@repobit/dex-system-design 0.23.71 → 0.23.73

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.73](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.72...@repobit/dex-system-design@0.23.73) (2026-07-08)
+
+### Bug Fixes
+
+* **DEX-1014:** fix for tabs and features
+* **DEX-1014:** new features tab component
+* **DEX-1014:** package.json updated
+* **DEX-1014:** package.json updated
+
+
+## [0.23.72](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.71...@repobit/dex-system-design@0.23.72) (2026-07-08)
+
+### Bug Fixes
+
+* **DEX-1014:** tabs component family
+* **DEX-1014:** tabs component family
+
+
 ## [0.23.71](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.70...@repobit/dex-system-design@0.23.71) (2026-07-07)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.71",
+  "version": "0.23.73",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -32,6 +32,7 @@
     "./divider-vertical": "./src/components/divider/divider-vertical.js",
     "./dropdown": "./src/components/dropdown/dropdown.js",
     "./features": "./src/components/features/features.js",
+    "./features-tab": "./src/components/features-tab/features-tab.js",
     "./footer": "./src/components/footer/footer.js",
     "./footer-links-group": "./src/components/footer/footer-links-group.js",
     "./footer-lp": "./src/components/footer/footer-lp.js",
@@ -52,6 +53,7 @@
     "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
     "./radio": "./src/components/radio/radio.js",
     "./tabs": "./src/components/tabs/tabs.js",
+    "./tabsComponent": "./src/components/tabsComponent/tabsComponent.js",
     "./terms": "./src/components/termsOfUse/terms.js"
   },
   "publishConfig": {
@@ -72,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.67",
-    "@repobit/dex-store-elements": "1.4.59",
+    "@repobit/dex-store": "1.3.69",
+    "@repobit/dex-store-elements": "1.4.61",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -90,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "b8bacc469b17438b97fb365454579a626a3c2b43"
+  "gitHead": "c2b31338e7ca8c4e8cc49cd4e7ed95419f23b369"
 }

package/src/components/cards/card.css.js

@@ -16,6 +16,7 @@ export default css`
     height: auto !important;
     object-fit: contain !important;
     display: block !important;
+    border-radius: var(--spacing-20);
   }
 
   .bd-section-title-s {
@@ -168,6 +169,7 @@ export default css`
     align-items: flex-start;
     gap: var(--spacing-4, 4px);
     overflow: hidden;
+    margin-bottom: var(--spacing-8);
   }
 
   .bd-light-title-no-content {

package/src/components/features-tab/features-tab.css.js

@@ -0,0 +1,104 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    width: 100%;
+    max-width: 1290px;
+    margin: 0 auto;
+    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  .bd-features-tab-container {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-64);
+    width: 100%;
+    animation: bd-fade-slide-right 350ms ease forwards;
+  }
+
+  .bd-features-tab-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-24);
+  }
+
+  .bd-features-tab-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
+
+  .bd-features-tab-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bd-features-tab-image {
+    width: 100%;
+    max-width: 520px;
+    height: auto;
+    border-radius: var(--radius-lg, 16px);
+    object-fit: cover;
+    display: block;
+  }
+
+  ::slotted([slot="image"]) {
+    width: 100%;
+    max-width: 520px;
+    height: auto;
+    border-radius: var(--radius-lg, 16px);
+    object-fit: cover;
+    display: block;
+  }
+
+  ::slotted([slot="heading"]) {
+    margin: 0;
+  }
+
+  @keyframes bd-fade-slide-right {
+    from {
+      opacity: 0;
+      transform: translateX(24px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @media (max-width: 992px) {
+    .bd-features-tab-container {
+      flex-direction: column-reverse;
+      gap: var(--spacing-32);
+    }
+
+    .bd-features-tab-container.bd-features-tab-reverse {
+      flex-direction: column-reverse;
+    }
+
+    .bd-features-tab-left {
+      align-items: center;
+      text-align: center;
+    }
+
+    .bd-features-tab-image {
+      max-width: 100%;
+    }
+
+    ::slotted([slot="image"]) {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .bd-features-tab-container {
+      gap: var(--spacing-24);
+    }
+  }
+`;

package/src/components/features-tab/features-tab.js

@@ -0,0 +1,84 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../button/button.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import featuresTabCSS from "./features-tab.css.js";
+
+class BdFeaturesTab extends LitElement {
+  static properties = {
+    imageSrc: { type: String,  attribute: "image-src" },
+    imageAlt: { type: String,  attribute: "image-alt" },
+    ctaLabel: { type: String,  attribute: "cta-label" },
+    ctaHref : { type: String,  attribute: "cta-href"  },
+    ctaKind : { type: String,  attribute: "cta-kind"  },
+    ctaSize : { type: String,  attribute: "cta-size"  },
+    reverse : { type: Boolean, reflect: true           }
+  };
+
+  static styles = [tokens, featuresTabCSS];
+
+  constructor() {
+    super();
+    this.imageSrc = "";
+    this.imageAlt = "";
+    this.ctaLabel = "";
+    this.ctaHref  = "#";
+    this.ctaKind  = "danger";
+    this.ctaSize  = "md";
+    this.reverse  = false;
+  }
+
+  render() {
+    const hasCtaSlot = this.querySelector("[slot='cta']");
+    const hasImgSlot = this.querySelector("[slot='image']");
+
+    const leftContent = html`
+      <div class="bd-features-tab-left">
+        <slot name="heading"></slot>
+        <div class="bd-features-tab-content">
+          <slot name="content"></slot>
+        </div>
+        ${hasCtaSlot
+          ? html`<slot name="cta"></slot>`
+          : this.ctaLabel
+            ? html`
+                <bd-button-link
+                  href="${this.ctaHref}"
+                  kind="${this.ctaKind}"
+                  size="${this.ctaSize}"
+                  label="${this.ctaLabel}"
+                  strong="true"
+                >
+                  ${this.ctaLabel}
+                </bd-button-link>`
+            : ""}
+      </div>
+    `;
+
+    const rightContent = html`
+      <div class="bd-features-tab-right">
+        ${hasImgSlot
+          ? html`<slot name="image"></slot>`
+          : this.imageSrc
+            ? html`<img
+                src="${this.imageSrc}"
+                alt="${this.imageAlt}"
+                class="bd-features-tab-image"
+                loading="lazy"
+              />`
+            : ""}
+      </div>
+    `;
+
+    return html`
+      <div class="bd-features-tab-container ${this.reverse ? "bd-features-tab-reverse" : ""}">
+        ${this.reverse
+          ? html`${rightContent}${leftContent}`
+          : html`${leftContent}${rightContent}`}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-features-tab", BdFeaturesTab);