@repobit/dex-system-design 0.23.11 → 0.23.13

package/src/components/compare/compare.js

@@ -1,18 +1,6 @@
 import { LitElement, html, nothing } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import compareCSS from "./compare.css.js";
-// ═══════════════════════════════════════════════════════════════
-//  compare-bar
-//  Attributes / Properties:
-//    label       {String}  – Brand or product name
-//    score       {Number}  – Numeric score
-//    max-score   {Number}  – Max possible score (default: 6)
-//    variant     {String}  – "primary" | "secondary"
-//    score-label {String}  – Optional override text for the score
-//    reference-score {Number} – Baseline score (e.g. Bitdefender). With stretch
-//                               (set by compare-card), width maps [r_min,1] → [fill_min,100%].
-//    scale           {Number} – Only used when reference-score is unset (× max-score %)
-// ═══════════════════════════════════════════════════════════════
 
 function readStretchVars(el) {
   const styles = getComputedStyle(el);
@@ -24,32 +12,25 @@ function readStretchVars(el) {
   };
 }
 
-const SCORE_ANIM_MS = 800;
+const SCORE_ANIM_MS     = 800;
 const SCORE_ANIM_EASING = (t) => 1 - (1 - t) ** 3;
 
-/** After first paint of this document, intro is “consumed” (scroll-back won’t replay). */
-let compareIntroDone = false;
-/** @type {ReturnType<typeof setTimeout> | 0} */
+let compareIntroDone  = false;
 let compareIntroTimer = 0;
 
-function shouldPlayCompareIntro() {
-  return !compareIntroDone;
-}
+function shouldPlayCompareIntro() { return !compareIntroDone; }
 
 function scheduleCompareIntroDone() {
   if (compareIntroDone || compareIntroTimer) return;
   compareIntroTimer = setTimeout(() => {
     compareIntroTimer = 0;
-    compareIntroDone = true;
+    compareIntroDone  = true;
   }, SCORE_ANIM_MS + 120);
 }
 
 function prefersReducedMotion() {
-  try {
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  } catch {
-    return false;
-  }
+  try { return window.matchMedia("(prefers-reduced-motion: reduce)").matches; }
+  catch { return false; }
 }
 
 if (typeof globalThis !== "undefined" && prefersReducedMotion()) {
@@ -72,16 +53,15 @@ class CompareBar extends LitElement {
 
   constructor() {
     super();
-    this.label = "";
-    this.score = 0;
-    this.maxScore = 6;
-    this.variant = "secondary";
-    this.scoreLabel = "";
+    this.label          = "";
+    this.score          = 0;
+    this.maxScore       = 6;
+    this.variant        = "secondary";
+    this.scoreLabel     = "";
     this.referenceScore = 0;
-    this.scale = 1;
+    this.scale          = 1;
     this._animatedScore = NaN;
-    /** @type {number} */
-    this._scoreAnimRaf = 0;
+    this._scoreAnimRaf  = 0;
   }
 
   connectedCallback() {
@@ -105,15 +85,7 @@ class CompareBar extends LitElement {
   updated(changed) {
     super.updated(changed);
     this.setAttribute("aria-label", this._barAriaLabel());
-    const deps = [
-      "score",
-      "referenceScore",
-      "scoreLabel",
-      "variant",
-      "maxScore",
-      "label"
-
-    ];
+    const deps = ["score", "referenceScore", "scoreLabel", "variant", "maxScore", "label"];
     if (!deps.some((k) => changed.has(k))) return;
 
     this._cancelScoreAnim();
@@ -132,15 +104,14 @@ class CompareBar extends LitElement {
 
   _shouldAnimateCompetitorScore() {
     if (this.variant === "primary" || this.scoreLabel) return false;
-    const t = parseFloat(this.score);
-    return Number.isFinite(t);
+    return Number.isFinite(parseFloat(this.score));
   }
 
   _scoreAnimStart() {
     const target = parseFloat(this.score);
-    const ref = parseFloat(this.referenceScore);
-    const maxM = parseFloat(this.maxScore) || 6;
-    let start = ref > 0 ? ref : maxM;
+    const ref    = parseFloat(this.referenceScore);
+    const maxM   = parseFloat(this.maxScore) || 6;
+    let start    = ref > 0 ? ref : maxM;
     if (start <= target) start = Math.min(maxM, target + 0.2);
     return start;
   }
@@ -154,26 +125,22 @@ class CompareBar extends LitElement {
 
   _runScoreAnim() {
     const target = parseFloat(this.score);
-    const start = this._animatedScore;
+    const start  = this._animatedScore;
     if (!Number.isFinite(target) || !Number.isFinite(start)) return;
 
     const t0 = performance.now();
-
     const tick = (now) => {
-      const elapsed = now - t0;
-      const u = Math.min(1, elapsed / SCORE_ANIM_MS);
+      const u = Math.min(1, (now - t0) / SCORE_ANIM_MS);
       const e = SCORE_ANIM_EASING(u);
-      const v = start + (target - start) * e;
-      this._animatedScore = v;
+      this._animatedScore = start + (target - start) * e;
       if (u < 1) {
         this._scoreAnimRaf = requestAnimationFrame(tick);
       } else {
-        this._scoreAnimRaf = 0;
+        this._scoreAnimRaf  = 0;
         this._animatedScore = NaN;
         this.requestUpdate();
       }
     };
-
     this._scoreAnimRaf = requestAnimationFrame(tick);
   }
 
@@ -183,7 +150,7 @@ class CompareBar extends LitElement {
 
     const ref = parseFloat(this.referenceScore);
     if (ref > 0) {
-      const r = Math.min(1, Math.max(0, s / ref));
+      const r         = Math.min(1, Math.max(0, s / ref));
       const linearPct = r * 100;
       const { stretch, rMinStr, fillMin, gamma } = readStretchVars(this);
 
@@ -196,12 +163,12 @@ class CompareBar extends LitElement {
         return Math.min(100, Math.max(0, linearPct));
       }
 
-      const denom = 1 - rMin;
-      const wMin = Number.isFinite(fillMin) ? fillMin : 50;
-      const g = Number.isFinite(gamma) && gamma > 0 ? gamma : 1;
-      const u = (r - rMin) / denom;
-      const t = Math.min(1, Math.max(0, u));
-      const shaped = Math.pow(t, g);
+      const denom     = 1 - rMin;
+      const wMin      = Number.isFinite(fillMin) ? fillMin : 50;
+      const g         = Number.isFinite(gamma) && gamma > 0 ? gamma : 1;
+      const u         = (r - rMin) / denom;
+      const t         = Math.min(1, Math.max(0, u));
+      const shaped    = Math.pow(t, g);
       const stretched = wMin + shaped * (100 - wMin);
       return Math.min(100, Math.max(0, stretched));
     }
@@ -212,26 +179,20 @@ class CompareBar extends LitElement {
     return rawPct * (this.scale || 1);
   }
 
-  get _displayScore() {
-    return this.scoreLabel || this.score;
-  }
+  get _displayScore() { return this.scoreLabel || this.score; }
 
   _renderScoreText() {
-    if (this.variant === "primary" || this.scoreLabel) {
-      return this._displayScore;
-    }
+    if (this.variant === "primary" || this.scoreLabel) return this._displayScore;
     if (Number.isFinite(this._animatedScore)) {
       return CompareBar._formatScoreTick(this._animatedScore);
     }
     return this._displayScore;
   }
 
-  /** @param {number} v */
   static _formatScoreTick(v) {
     return (Math.round(v * 100) / 100).toFixed(2);
   }
 
-  /** Accessible name uses final numeric score (not the intro animation value). */
   _barAriaLabel() {
     const max = this.maxScore ?? 6;
     const val = this.scoreLabel || this.score;
@@ -252,9 +213,6 @@ class CompareBar extends LitElement {
 
 customElements.define("compare-bar", CompareBar);
 
-// ═══════════════════════════════════════════════════════════════
-//  compare-card
-// ═══════════════════════════════════════════════════════════════
 
 class CompareCard extends LitElement {
   static _idSeq = 0;
@@ -265,35 +223,28 @@ class CompareCard extends LitElement {
     footnote       : { type: String },
     footnoteHref   : { type: String, attribute: "footnote-href" },
     iconSrc        : { type: String, attribute: "icon-src" },
-    /** When true, competitor bar widths use stretched mapping so small score gaps read clearly. */
     barStretch     : { type: Boolean, attribute: "bar-stretch" },
-    /** Visual floor % for the weakest competitor (rest of span goes to 100% / Bitdefender). */
-    barFillMin     : { type: Number, attribute: "bar-fill-min" },
-    /**
-     * Curve on normalized rank within [r_min, 1]. >1 pulls stronger competitors down vs Bitdefender
-     * (bigger BD gap); =1 is pure linear spread.
-     */
-    barStretchGamma: { type: Number, attribute: "bar-stretch-gamma" },
-    /** Shown only in the screen-reader chart hint (scores are “out of” this scale). */
-    chartScale     : { type: Number, attribute: "chart-scale" }
+    barFillMin     : { type: Number,  attribute: "bar-fill-min" },
+    barStretchGamma: { type: Number,  attribute: "bar-stretch-gamma" },
+    chartScale     : { type: Number,  attribute: "chart-scale" }
   };
 
   static styles = [tokens, compareCSS];
 
   constructor() {
     super();
-    const n = ++CompareCard._idSeq;
-    this._headingId = `compare-card-title-${n}`;
-    this._chartHelpId = `compare-card-chart-${n}`;
-    this.title = "";
-    this.description = "";
-    this.footnote = "";
-    this.footnoteHref = "";
-    this.iconSrc = "";
-    this.barStretch = true;
-    this.barFillMin = 50;
+    const n              = ++CompareCard._idSeq;
+    this._headingId      = `compare-card-title-${n}`;
+    this._chartHelpId    = `compare-card-chart-${n}`;
+    this.title           = "";
+    this.description     = "";
+    this.footnote        = "";
+    this.footnoteHref    = "";
+    this.iconSrc         = "";
+    this.barStretch      = true;
+    this.barFillMin      = 50;
     this.barStretchGamma = 1;
-    this.chartScale = 6;
+    this.chartScale      = 6;
   }
 
   firstUpdated() {
@@ -316,10 +267,9 @@ class CompareCard extends LitElement {
     if (!slot) return;
 
     const apply = () => {
-      const nodes = slot.assignedElements({ flatten: true });
-      const bars = nodes.filter(
-        (el) => el.localName === "compare-bar"
-      );
+      const bars = slot
+        .assignedElements({ flatten: true })
+        .filter((el) => el.localName === "compare-bar");
 
       if (!this.barStretch) {
         this.style.setProperty("--cs-bar-stretch", "0");
@@ -328,7 +278,7 @@ class CompareCard extends LitElement {
       }
 
       const primary = bars.find((b) => b.variant === "primary");
-      const ref = primary ? parseFloat(primary.score) : 0;
+      const ref     = primary ? parseFloat(primary.score) : 0;
 
       if (!ref || ref <= 0) {
         this.style.setProperty("--cs-bar-stretch", "0");
@@ -356,10 +306,7 @@ class CompareCard extends LitElement {
         this.style.setProperty("--cs-bar-stretch", "1");
         this.style.setProperty("--cs-stretch-r-min", String(rMin));
         this.style.setProperty("--cs-bar-fill-min", String(this.barFillMin));
-        this.style.setProperty(
-          "--cs-bar-stretch-gamma",
-          String(this.barStretchGamma)
-        );
+        this.style.setProperty("--cs-bar-stretch-gamma", String(this.barStretchGamma));
       }
 
       this._refreshBars(bars);
@@ -374,6 +321,20 @@ class CompareCard extends LitElement {
     });
   }
 
+  /**
+   * Called by CompareSection to set a fixed min-height on .card-header
+   * so all headers in the same row are the same height.
+   */
+  setHeaderMinHeight(px) {
+    const header = this.shadowRoot?.querySelector(".card-header");
+    if (header) header.style.minHeight = px != null ? `${px}px` : "";
+  }
+
+  getHeaderHeight() {
+    const header = this.shadowRoot?.querySelector(".card-header");
+    return header ? header.getBoundingClientRect().height : 0;
+  }
+
   _renderFootnote() {
     if (!this.footnote) return "";
 
@@ -381,8 +342,8 @@ class CompareCard extends LitElement {
       return html`<bd-p kind="xsmall" class="card-footnote">${this.footnote}</bd-p>`;
     }
 
-    const splitOn = "Source ";
-    const idx = this.footnote.indexOf(splitOn);
+    const splitOn    = "Source ";
+    const idx        = this.footnote.indexOf(splitOn);
 
     if (idx === -1) {
       return html`
@@ -394,7 +355,7 @@ class CompareCard extends LitElement {
       `;
     }
 
-    const before = this.footnote.slice(0, idx + splitOn.length);
+    const before     = this.footnote.slice(0, idx + splitOn.length);
     const linkedText = this.footnote.slice(idx + splitOn.length);
 
     return html`
@@ -417,34 +378,34 @@ class CompareCard extends LitElement {
         <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-header">
           ${this.iconSrc
             ? html`
-            <div class="card-icon-wrap" aria-hidden="true">
-              <bd-img
-                src="${this.iconSrc}"
-                alt=""
-                width="48"
-                height="48"
-                fit="contain"
-                radius="none"
-                shadow="none"
-                loading="eager"
-              ></bd-img>
-            </div>
-          `
+              <div class="card-icon-wrap" aria-hidden="true">
+                <bd-img
+                  src="${this.iconSrc}"
+                  alt=""
+                  width="48"
+                  height="48"
+                  fit="contain"
+                  radius="none"
+                  shadow="none"
+                  loading="eager"
+                ></bd-img>
+              </div>
+            `
             : ""}
-
           <div class="card-text-wrap">
             ${isMobile
               ? html`<bd-h as="h5" class="card-title" heading-id="${this._headingId}">${this.title}</bd-h>`
               : html`<bd-h as="h4" class="card-title" heading-id="${this._headingId}">${this.title}</bd-h>`}
             ${this.description
               ? html`
-              <bd-p kind="${isMobile ? "small" : "regular"}" class="card-description">
-                ${this.description}
-              </bd-p>
-            `
+                <bd-p kind="${isMobile ? "small" : "regular"}" class="card-description">
+                  ${this.description}
+                </bd-p>
+              `
               : ""}
           </div>
         </div>
@@ -461,9 +422,6 @@ class CompareCard extends LitElement {
 
 customElements.define("compare-card", CompareCard);
 
-// ═══════════════════════════════════════════════════════════════
-//  compare-section
-// ═══════════════════════════════════════════════════════════════
 
 class CompareSection extends LitElement {
   static _idSeq = 0;
@@ -480,14 +438,74 @@ class CompareSection extends LitElement {
   constructor() {
     super();
     this._sectionTitleId = `bd-compare-section-title-${++CompareSection._idSeq}`;
-    this.title = "";
-    this.subtitle = "";
-    this.columns = 2;
-    this.gap = "";
+    this.title           = "";
+    this.subtitle        = "";
+    this.columns         = 2;
+    this.gap             = "";
+    this._syncRaf        = 0;
+    this._ro             = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // ResizeObserver — re-sync whenever any card changes size
+    this._ro = new ResizeObserver(() => this._syncHeaderHeights());
+    this._ro.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._ro?.disconnect();
+    this._ro = null;
+    if (this._syncRaf) cancelAnimationFrame(this._syncRaf);
   }
 
   firstUpdated() {
     scheduleCompareIntroDone();
+    // Initial sync after first paint
+    requestAnimationFrame(() => this._syncHeaderHeights());
+  }
+
+  /**
+   * Reads all compare-card children, finds the tallest .card-header
+   * across all of them, then sets that height as minHeight on every card.
+   * Runs in a rAF to batch DOM reads before writes.
+   */
+  _syncHeaderHeights() {
+    if (this._syncRaf) cancelAnimationFrame(this._syncRaf);
+    this._syncRaf = requestAnimationFrame(() => {
+      this._syncRaf = 0;
+
+      const isMobile = window.matchMedia("(max-width: 767px)").matches;
+
+      // Get all slotted compare-card elements
+      const slot = this.shadowRoot?.querySelector("slot");
+      if (!slot) return;
+
+      const cards = slot
+        .assignedElements({ flatten: true })
+        .filter((el) => el.localName === "compare-card");
+
+      if (!cards.length) return;
+
+      // On mobile reset all — no alignment needed
+      if (isMobile) {
+        cards.forEach((c) => c.setHeaderMinHeight?.(null));
+        return;
+      }
+
+      // Reset first so we get natural heights
+      cards.forEach((c) => c.setHeaderMinHeight?.(null));
+
+      // Read heights after reset
+      requestAnimationFrame(() => {
+        const heights = cards.map((c) => c.getHeaderHeight?.() ?? 0);
+        const maxH    = Math.max(...heights);
+
+        // Write — set all to tallest
+        cards.forEach((c) => c.setHeaderMinHeight?.(maxH));
+      });
+    });
   }
 
   render() {
@@ -503,27 +521,25 @@ class CompareSection extends LitElement {
       >
         ${this.title || this.subtitle
           ? html`
-          <div class="cs-heading">
-            ${this.title
-              ? html`
-              ${isMobile
-                ? html`<bd-h as="h4" class="cs-title" heading-id="${this._sectionTitleId}">${this.title}</bd-h>`
-                : html`<bd-h as="h3" class="cs-title" heading-id="${this._sectionTitleId}">${this.title}</bd-h>`}
-            `
-              : ""}
-            ${this.subtitle
-              ? html`
-              <bd-p kind="${isMobile ? "small" : "regular"}" class="cs-subtitle">
-                ${this.subtitle}
-              </bd-p>
-            `
-              : ""}
-          </div>
-        `
+            <div class="cs-heading">
+              ${this.title
+                ? isMobile
+                  ? html`<bd-h as="h4" class="cs-title" heading-id="${this._sectionTitleId}">${this.title}</bd-h>`
+                  : html`<bd-h as="h3" class="cs-title" heading-id="${this._sectionTitleId}">${this.title}</bd-h>`
+                : ""}
+              ${this.subtitle
+                ? html`
+                  <bd-p kind="${isMobile ? "small" : "regular"}" class="cs-subtitle">
+                    ${this.subtitle}
+                  </bd-p>
+                `
+                : ""}
+            </div>
+          `
           : ""}
 
         <div class="cs-grid" style="${gapStyle}">
-          <slot></slot>
+          <slot @slotchange=${this._syncHeaderHeights}></slot>
         </div>
       </section>
     `;