@repobit/dex-system-design 0.23.40 → 0.23.42

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.42](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.41...@repobit/dex-system-design@0.23.42) (2026-06-05)
+
+### Bug Fixes
+
+* **DEX-1014:** new tabs component
+
+
+## [0.23.41](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.40...@repobit/dex-system-design@0.23.41) (2026-05-28)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [0.23.40](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.39...@repobit/dex-system-design@0.23.40) (2026-05-27)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.40",
+  "version": "0.23.42",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -70,8 +70,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.36",
-    "@repobit/dex-store-elements": "1.4.28",
+    "@repobit/dex-store": "1.3.38",
+    "@repobit/dex-store-elements": "1.4.30",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "7c0438c5fa395495c98a08c726229c230ba0299b"
+  "gitHead": "10aad8e43bf7f63e26d028876ff5aad0a530d74c"
 }

package/src/components/highlight/highlight.css.js

@@ -9,7 +9,7 @@ export default css`
   line-height: 1.3;
   text-align: center;
   color: #000;
-  max-width: 720px;
+  max-width: 820px;
   margin: 0 auto;
   padding-top: var(--spacing-64)
 }

package/src/components/highlight/highlight.js

@@ -1,30 +1,39 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
 import highlightCSS from "./highlight.css.js";
 
 class BdHighlightSection extends LitElement {
   static properties = {
-    highlightText: { type: String, attribute: 'highlight-text' },
-    subTitle     : { type: String, attribute: 'sub-title' }
+    highlightText: { type: String, attribute: "highlight-text" },
+    subTitle     : { type: String, attribute: "sub-title" },
+    as           : { type: String }
   };
 
   static styles = [tokens, highlightCSS];
 
+  constructor() {
+    super();
+    this.highlightText = "";
+    this.subTitle      = "";
+    this.as            = "h3";
+  }
+
   render() {
-    const fullText = this.textContent || "";
+    const fullText      = this.textContent || "";
     const highlightText = this.highlightText || "";
-    const subTitle = this.subTitle || "";
 
-    const subtitleTemplate = subTitle
-      ? html`
-      <h6 class="sub-title">${subTitle}</h6>
-    `
+    const subtitleTemplate = this.subTitle
+      ? html`<bd-p kind="small" class="sub-title">${this.subTitle}</bd-p>`
       : null;
 
     if (!highlightText || !fullText.includes(highlightText)) {
       return html`
         ${subtitleTemplate}
-        <p class="headline"><slot></slot></p>
+        <bd-h as="${this.as}" class="headline">
+          <slot></slot>
+        </bd-h>
       `;
     }
 
@@ -32,7 +41,7 @@ class BdHighlightSection extends LitElement {
 
     return html`
       ${subtitleTemplate}
-      <p class="headline">
+      <bd-h as="${this.as}" class="headline">
         ${before}
         <span class="highlight">
           <span class="highlight-text">${highlightText}</span>
@@ -47,7 +56,7 @@ class BdHighlightSection extends LitElement {
           </span>
         </span>
         ${after}
-      </p>
+      </bd-h>
     `;
   }
 
@@ -69,4 +78,4 @@ class BdHighlightSection extends LitElement {
   }
 }
 
-customElements.define("bd-highlight", BdHighlightSection);
+customElements.define("bd-highlight", BdHighlightSection);

package/src/components/tabs/tabs.css.js

@@ -2,266 +2,156 @@ import { css } from "lit";
 
 export default css`
   :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-700);
     --bd-accesibility-focus: var(--color-blue-500);
-
-    --text-color-white: var(--color-neutral-0);
     font-size: 100%;
     display: block;
     font-family: var(--typography-fontFamily-sans);
     padding-top: var(--spacing-64);
     padding-bottom: var(--spacing-64);
+    background: var(--color-blue-50);
   }
-.bd-tabs-subtitle{
-font-size: var(--typography-body-regular-fontSize);
-max-width: 500px;
-text-align: center;
-    font-family: var(--typography-fontFamily-sans);
-    margin-top: var(--spacing-32);
-    margin-bottom: var(--spacing-32);
 
-}
-  .bd-tab-button p {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-  .bd-tab-button:focus-visible,
-  .bd-find-out-more:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
-  }
-  .bd-tabs-component .bd-left img {
-    max-width: 90%;
-  }
-
-  .bd-card-container {
+  .bd-tabs-component {
     display: flex;
-    justify-content: space-between;
-    padding: 36px 0px;
-    border-radius: 5px;
-    margin-top: 10px;
-    margin: auto;
-    width: 50%;
-  }
-
-  .bd-card-container .bd-left {
-    flex: 1;
-    padding-right: 20px;
+    flex-direction: column;
+    align-items: center;
+    max-width: 1290px;
+    margin-inline: auto;
+    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
   }
 
-  .bd-card-container .bd-right {
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    padding: var(--spacing-0) var(--spacing-24);
+  .bd-tabs-subtitle {
+    font-size: var(--typography-body-regular-fontSize);
+    max-width: 780px;
+    text-align: center;
+    font-family: var(--typography-fontFamily-sans);
+    margin-top: var(--spacing-16);
+    margin-bottom: var(--spacing-8);
   }
 
+  /* Tab buttons row */
   .bd-tabs-container {
-    display: flex;
+    display: inline-flex;
     justify-content: center;
-    margin-bottom: 40px;
     flex-wrap: wrap;
-    border-bottom: 1px solid #e4f2ff;
-    margin: 0 auto;
-    margin-bottom: var(--spacing-32);
+    border-bottom: 1px solid var(--color-neutral-100);
+    margin-top: var(--spacing-32);
+    margin-bottom: var(--spacing-48);
   }
 
-  .bd-tabs-container button {
-    color: #006eff;
-    border: 0;
-    padding: 9px;
-    display: flex;
-    gap: 10px;
+  .bd-tab-button {
+    display: inline-flex;
     align-items: center;
-    position: relative;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: var(--spacing-10) var(--spacing-16);
     cursor: pointer;
-    font-size: 1.125em;
-    max-height: 55px;
+    color: var(--color-blue-500);
+    position: relative;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-body-large-fontSize);
+    font-weight: var(--typography-fontWeight-semibold);
+    transition: color var(--transition-duration-fast) var(--transition-easing-smooth);
   }
 
-  .bd-tabs-container button::after {
-    background: #006eff;
+  .bd-tab-button::after {
     content: "";
-    height: 4px;
+    height: 3px;
+    background: var(--color-blue-500);
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
-    transition: width 1s ease;
+    transition: width var(--transition-duration-slow) var(--transition-easing-smooth);
   }
 
-  .bd-tabs-container button.bd-selected::after {
+  .bd-tab-button.bd-selected::after {
     width: 100%;
   }
 
-  .bd-tabs-container button.bd-selected {
-    color: black;
+  .bd-tab-button.bd-selected {
+    color: var(--color-neutral-900);
+    font-weight: var(--typography-fontWeight-semibold);
   }
 
-  .bd-tab-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    background: none;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-   <!-- font-weight: bold; -->
+  .bd-tab-button:focus-visible {
+    outline: 2px solid var(--bd-accesibility-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
   }
 
-  .bd-tab-button img {
-    margin-right: 8px;
-    height: 30px;
-    width: 30px;
+  .bd-tab-label {
+    pointer-events: none;
   }
 
-  .bd-tabs-component h2 {
-    margin-bottom: 75px;
-    max-width: 630px;
-    text-align: center;
+  /* Columns grid */
+  .bd-columns-container {
+    display: grid;
+    gap: var(--spacing-32);
+    width: 100%;
+    justify-content: center;
   }
 
-  .bd-tabs-component {
+  /* Coloana individuala */
+  .bd-col {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    width: 300px;
   }
 
-  .bd-ul-privacy {
-    list-style: none;
-    padding-inline-start: 0px;
-  }
-
-  .bd-find-out-more {
-    text-decoration: none;
-    background-color: white;
-    color: #006eff;
-    border: 0;
+  /* Icon wrapper */
+  .col-icon-wrapper {
     display: flex;
-    gap: 10px;
-    align-items: start;
-    position: relative;
-    cursor: pointer;
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
+    align-items: flex-start;
+    margin-bottom: var(--spacing-8);
+    overflow: hidden;
   }
 
-  .bd-find-out-more .bd-arrow svg {
-    width: 12px;
-    height: 12px;
-    position: relative;
-    top: 1.5px;
-  }
-
-  .bd-right h3 {
-    font-size: var(--typography-heading-h4-fontSize);
+  /* Title wrapper */
+  .col-title-wrapper {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: var(--spacing-8);
+    overflow: hidden;
   }
 
-  .bd-section-title {
+  .col-title {
     font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
+    font-size: var(--typography-fontSize-2xl);
+    font-weight: var(--typography-fontWeight-bold);
+    color: var(--color-neutral-900);
+    line-height: var(--typography-lineHeight-normal);
   }
 
-  /* ✅ Responsive Design */
-  @media (max-width: 1200px) {
-    .bd-tabs-component.bd-we-container {
-      max-width: 100%;
-      padding: 0 20px;
-    }
+  .col-description {
+    margin-bottom: var(--spacing-16);
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-fontSize-md);
+    color: var(--color-neutral-700);
+    line-height: var(--typography-lineHeight-normal);
+    overflow: hidden;
   }
 
+  /* Responsive */
   @media (max-width: 992px) {
-    .bd-tabs-component .bd-card-container {
-      flex-direction: column;
-      width: 90%;
-    }
-
-    .bd-tabs-component .bd-tabs-container {
-      flex-wrap: wrap;
-    }
-
-    .bd-tabs-component .bd-tabs-container button picture img {
-      width: 24px;
-    }
-
-    .bd-tabs-component .bd-card-container {
-      align-items: center;
-      text-align: center;
-    }
-
-    .bd-tabs-component .bd-left {
-      width: 100%;
-      padding: 10px;
-    }
-
-    .bd-tabs-component .bd-left img {
-      max-width: 50%;
-    }
-
-    .bd-tabs-component .bd-right {
-      width: 100%;
-      padding: 10px;
-    }
-
-    .bd-tabs-component.bd-we-container {
-      max-width: 100%;
-      padding-left: 30px;
-      padding-right: 30px;
+    .bd-col {
+      width: 260px;
     }
   }
 
-  @media (max-width: 768px) {
-    .bd-card-container {
-      flex-direction: column;
+  @media (max-width: 600px) {
+    .bd-col {
       width: 100%;
-      padding: 20px;
-    }
-
-    .bd-section-title {
-      text-align: center;
-      font-size: 1.6em;
-      margin-bottom: 30px;
-      padding: 10px;
-    }
-
-    .bd-right h3 {
-      text-align: center;
-    }
-
-    .bd-tabs-component {
-      margin-top: 24px;
     }
 
     .bd-tabs-container {
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      width: 100%;
-    }
-
-    .bd-tabs-container button {
-      font-size: 1.2em;
-      padding: 6px;
-    }
-
-    .bd-tabs-component .bd-left img {
-      max-width: 100%;
-      height: auto;
-    }
-
-    .bd-tabs-component .bd-right {
-      text-align: center;
-      padding: 10px;
-      text-align: left;
+      gap: var(--spacing-4);
     }
 
-    .bd-find-out-more {
-      justify-content: center;
+    .bd-tab-button {
+      padding: var(--spacing-8) var(--spacing-12);
     }
   }
-`;
+`;