@repobit/dex-system-design 0.23.116 → 0.24.0

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.24.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.117...@repobit/dex-system-design@0.24.0) (2026-08-13)
+
+### Features
+
+* **DEX-28239:** add horizontal layout variation to compare card component
+
+
+## [0.23.117](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.116...@repobit/dex-system-design@0.23.117) (2026-08-11)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [0.23.116](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.115...@repobit/dex-system-design@0.23.116) (2026-08-07)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.116",
+  "version": "0.24.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.14",
-    "@repobit/dex-store-elements": "2.0.19",
+    "@repobit/dex-store": "1.6.16",
+    "@repobit/dex-store-elements": "2.0.21",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "7af92630a57f9ae948eb1eb3630085d3566d233c"
+  "gitHead": "c08cf4f44c57f9a84693f94fa894e97034624867"
 }

package/src/components/compare/compare.css.js

@@ -68,6 +68,10 @@ export default css`
   }
 }
 
+.cs-grid > ::slotted(compare-card[layout="horizontal"]) {
+  grid-column: 1 / -1;
+}
+
 .card {
   background:      var(--color-neutral-25);
   border-radius:   var(--radius-3xl);
@@ -124,6 +128,59 @@ export default css`
   flex:   0 0 auto;
 }
 
+/* ── Horizontal layout ──────────────────────────────────────────────────────── */
+
+.card--horizontal {
+  display:               grid;
+  grid-template-columns: 1fr 1fr;
+  align-items:           stretch;
+  gap:                   var(--spacing-40);
+}
+
+.card-left {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--spacing-16);
+}
+
+/* slot is transparent so fallback children are direct flex items of .card-left */
+slot[name="header"] { display: contents; }
+
+::slotted([slot="header"]) {
+  display:        flex;
+  flex-direction: column;
+}
+
+.card-left-top {
+  display:     flex;
+  align-items: center;
+  gap:         var(--spacing-12);
+}
+
+.card--horizontal .card-icon-wrap {
+  width:  var(--dimension-40px);
+  height: var(--dimension-40px);
+}
+
+.card--horizontal .card-description { margin: 0; }
+
+/* footnote sits at the bottom of the left column */
+.card--horizontal .card-footnote { margin-top: auto; }
+
+.card-right {
+  display:         flex;
+  flex-direction:  column;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .card--horizontal {
+    grid-template-columns: 1fr;
+  }
+
+  .card--horizontal .card-footnote { margin-top: 0; }
+}
+
 .bar-track {
   position:      relative;
   height:        var(--cs-bar-height);

package/src/components/compare/compare.js

@@ -223,6 +223,7 @@ class CompareCard extends LitElement {
     footnote       : { type: String },
     footnoteHref   : { type: String, attribute: "footnote-href" },
     iconSrc        : { type: String, attribute: "icon-src" },
+    layout         : { type: String },
     barStretch     : { type: Boolean, attribute: "bar-stretch" },
     barFillMin     : { type: Number,  attribute: "bar-fill-min" },
     barStretchGamma: { type: Number,  attribute: "bar-stretch-gamma" },
@@ -241,6 +242,7 @@ class CompareCard extends LitElement {
     this.footnote        = "";
     this.footnoteHref    = "";
     this.iconSrc         = "";
+    this.layout          = "";
     this.barStretch      = true;
     this.barFillMin      = 50;
     this.barStretchGamma = 1;
@@ -365,7 +367,56 @@ class CompareCard extends LitElement {
     `;
   }
 
+  _renderHorizontal() {
+    return html`
+      <div
+        class="card card--horizontal"
+        role="article"
+        aria-labelledby="${this._headingId}"
+        aria-describedby="${this._chartHelpId}"
+      >
+        <p class="cs-sr-only" id="${this._chartHelpId}">
+          Bar lengths are scaled for visibility between brands. Use the announced scores for exact values; scale is out of ${this.chartScale}.
+        </p>
+
+        <div class="card-left">
+          <slot name="header">
+            <div class="card-left-top">
+              ${this.iconSrc ? html`
+                <div class="card-icon-wrap" aria-hidden="true">
+                  <bd-img
+                    src="${this.iconSrc}"
+                    alt=""
+                    width="40"
+                    height="40"
+                    fit="contain"
+                    radius="none"
+                    shadow="none"
+                    loading="eager"
+                  ></bd-img>
+                </div>
+              ` : ""}
+              <bd-h as="h3" class="card-title" heading-id="${this._headingId}">${this.title}</bd-h>
+            </div>
+            ${this.description ? html`
+              <bd-p kind="regular" class="card-description">${this.description}</bd-p>
+            ` : ""}
+            ${this._renderFootnote()}
+          </slot>
+        </div>
+
+        <div class="card-right">
+          <div class="card-bars" role="group" aria-label="Scores by brand">
+            <slot @slotchange=${this._syncBarStretch}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   render() {
+    if (this.layout === "horizontal") return this._renderHorizontal();
+
     const isMobile = window.matchMedia("(max-width: 767px)").matches;
 
     return html`
@@ -484,7 +535,7 @@ class CompareSection extends LitElement {
 
       const cards = slot
         .assignedElements({ flatten: true })
-        .filter((el) => el.localName === "compare-card");
+        .filter((el) => el.localName === "compare-card" && el.getAttribute("layout") !== "horizontal");
 
       if (!cards.length) return;
 

package/src/components/compare/compare.stories.js

@@ -626,4 +626,54 @@ export const ThemeDark = {
       </bd-compare-section>
     </div>
   `
+};
+
+
+// ─── Horizontal layout ────────────────────────────────────────────────────────
+
+export const HorizontalLayout = {
+  name  : "Horizontal Layout (attribute-driven)",
+  render: () => html`
+    <bd-compare-section
+      title="Award-Winning Security, Independently Verified"
+      gap="32px"
+    >
+      <compare-card
+        layout="horizontal"
+        title="Best Protection"
+        description="Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)"
+        footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SHIELD_ICON}"
+        bar-stretch="false"
+      >
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary" scale="0.93"></compare-bar>
+        <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
+        <compare-bar label="Kaspersky"   score="5.20" max-score="6" variant="secondary" scale="0.40"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+  `
+};
+
+export const HorizontalLayoutCustomSlot = {
+  name  : "Horizontal Layout (custom slot=\"header\")",
+  render: () => html`
+    <bd-compare-section gap="32px">
+      <compare-card layout="horizontal" bar-stretch="false">
+        <div slot="header" style="display:flex;flex-direction:column;gap:var(--spacing-16)">
+          <div style="display:flex;align-items:center;gap:var(--spacing-12)">
+            <bd-img src="${SHIELD_ICON}" alt="" width="40" height="40" fit="contain" radius="none" shadow="none" loading="eager"></bd-img>
+            <bd-h as="h3">Award-Winning Protection</bd-h>
+          </div>
+          <bd-p kind="regular">Scale of 0–6. Higher is better. Independently tested since 2011.</bd-p>
+          <bd-p kind="xsmall" style="margin-top:auto">Overall Score. July 2011 – February 2025. Source AV TEST.org</bd-p>
+        </div>
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary" scale="0.93"></compare-bar>
+        <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
+        <compare-bar label="Kaspersky"   score="5.20" max-score="6" variant="secondary" scale="0.40"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+  `
 };