@repobit/dex-system-design 0.23.6 → 0.23.8

package/src/components/compare/compare.js

@@ -1,9 +1,6 @@
-import { LitElement, html } from "lit";
-import "../../components/image/image.js";
+import { LitElement, html, nothing } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import "../link/link.js";
-import compareCSS from "./compare.css";
-
+import compareCSS from "./compare.css.js";
 // ═══════════════════════════════════════════════════════════════
 //  compare-bar
 //  Attributes / Properties:
@@ -12,50 +9,241 @@ import compareCSS from "./compare.css";
 //    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);
+  return {
+    stretch: styles.getPropertyValue("--cs-bar-stretch").trim() !== "0",
+    rMinStr: styles.getPropertyValue("--cs-stretch-r-min").trim(),
+    fillMin: parseFloat(styles.getPropertyValue("--cs-bar-fill-min").trim()),
+    gamma  : parseFloat(styles.getPropertyValue("--cs-bar-stretch-gamma").trim())
+  };
+}
+
+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 compareIntroTimer = 0;
+
+function shouldPlayCompareIntro() {
+  return !compareIntroDone;
+}
+
+function scheduleCompareIntroDone() {
+  if (compareIntroDone || compareIntroTimer) return;
+  compareIntroTimer = setTimeout(() => {
+    compareIntroTimer = 0;
+    compareIntroDone = true;
+  }, SCORE_ANIM_MS + 120);
+}
+
+function prefersReducedMotion() {
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+
+if (typeof globalThis !== "undefined" && prefersReducedMotion()) {
+  compareIntroDone = true;
+}
+
 class CompareBar extends LitElement {
   static properties = {
-    label     : { type: String },
-    score     : { type: Number },
-    maxScore  : { type: Number, attribute: "max-score" },
-    variant   : { type: String },
-    scoreLabel: { type: String, attribute: "score-label" }
+    label         : { type: String },
+    score         : { type: Number },
+    maxScore      : { type: Number, attribute: "max-score" },
+    variant       : { type: String },
+    scoreLabel    : { type: String, attribute: "score-label" },
+    referenceScore: { type: Number, attribute: "reference-score" },
+    scale         : { type: Number },
+    _animatedScore: { state: true }
   };
 
   static styles = [tokens, compareCSS];
 
   constructor() {
     super();
-    this.label      = "";
-    this.score      = 0;
-    this.maxScore   = 6;
-    this.variant    = "secondary";
+    this.label = "";
+    this.score = 0;
+    this.maxScore = 6;
+    this.variant = "secondary";
     this.scoreLabel = "";
+    this.referenceScore = 0;
+    this.scale = 1;
+    this._animatedScore = NaN;
+    /** @type {number} */
+    this._scoreAnimRaf = 0;
   }
 
-  get _pct() {
-    const s = parseFloat(this.score)    || 0;
-    const m = parseFloat(this.maxScore) || 6;
-    if (m === 0) return 0;
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-label", this._barAriaLabel());
+    if (!shouldPlayCompareIntro()) {
+      this.classList.add("compare-no-motion");
+      return;
+    }
+    scheduleCompareIntroDone();
+    if (this._shouldAnimateCompetitorScore()) {
+      this._animatedScore = this._scoreAnimStart();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cancelScoreAnim();
+  }
+
+  updated(changed) {
+    super.updated(changed);
+    this.setAttribute("aria-label", this._barAriaLabel());
+    const deps = [
+      "score",
+      "referenceScore",
+      "scoreLabel",
+      "variant",
+      "maxScore",
+      "label"
+
+    ];
+    if (!deps.some((k) => changed.has(k))) return;
+
+    this._cancelScoreAnim();
+    if (!shouldPlayCompareIntro()) {
+      this.classList.add("compare-no-motion");
+      this._animatedScore = NaN;
+      return;
+    }
+    if (this._shouldAnimateCompetitorScore()) {
+      this._animatedScore = this._scoreAnimStart();
+      this._runScoreAnim();
+    } else {
+      this._animatedScore = NaN;
+    }
+  }
 
+  _shouldAnimateCompetitorScore() {
+    if (this.variant === "primary" || this.scoreLabel) return false;
+    const t = parseFloat(this.score);
+    return Number.isFinite(t);
+  }
+
+  _scoreAnimStart() {
+    const target = parseFloat(this.score);
+    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;
+  }
+
+  _cancelScoreAnim() {
+    if (this._scoreAnimRaf) {
+      cancelAnimationFrame(this._scoreAnimRaf);
+      this._scoreAnimRaf = 0;
+    }
+  }
+
+  _runScoreAnim() {
+    const target = parseFloat(this.score);
+    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 e = SCORE_ANIM_EASING(u);
+      const v = start + (target - start) * e;
+      this._animatedScore = v;
+      if (u < 1) {
+        this._scoreAnimRaf = requestAnimationFrame(tick);
+      } else {
+        this._scoreAnimRaf = 0;
+        this._animatedScore = NaN;
+        this.requestUpdate();
+      }
+    };
+
+    this._scoreAnimRaf = requestAnimationFrame(tick);
+  }
+
+  get _pct() {
+    const s = parseFloat(this.score) || 0;
     if (this.variant === "primary") return 100;
 
+    const ref = parseFloat(this.referenceScore);
+    if (ref > 0) {
+      const r = Math.min(1, Math.max(0, s / ref));
+      const linearPct = r * 100;
+      const { stretch, rMinStr, fillMin, gamma } = readStretchVars(this);
+
+      if (!stretch || !rMinStr || rMinStr === "none") {
+        return Math.min(100, Math.max(0, linearPct));
+      }
+
+      const rMin = parseFloat(rMinStr);
+      if (Number.isNaN(rMin) || rMin >= 1 - 1e-9) {
+        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 stretched = wMin + shaped * (100 - wMin);
+      return Math.min(100, Math.max(0, stretched));
+    }
+
+    const m = parseFloat(this.maxScore) || 6;
+    if (m === 0) return 0;
     const rawPct = Math.min(100, Math.max(0, (s / m) * 100));
-    return rawPct * 0.75;
+    return rawPct * (this.scale || 1);
   }
 
   get _displayScore() {
     return this.scoreLabel || this.score;
   }
 
+  _renderScoreText() {
+    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;
+    return `${this.label}, score ${val} out of ${max}`;
+  }
+
   render() {
     return html`
       <div class="bar-track">
-        <div class="bar-fill" style="width: ${this._pct}%"></div>
-        <div class="bar-content">
-          <span class="bar-label">${this.label}</span>
-          <span class="bar-score">${this._displayScore}</span>
+        <div class="bar-fill" style="width: ${this._pct}%">
+          <span class="bar-label" aria-hidden="true">${this.label}</span>
+          <span class="bar-score" aria-hidden="true">${this._renderScoreText()}</span>
         </div>
       </div>
     `;
@@ -64,42 +252,128 @@ class CompareBar extends LitElement {
 
 customElements.define("compare-bar", CompareBar);
 
-
 // ═══════════════════════════════════════════════════════════════
 //  compare-card
-//  Attributes / Properties:
-//    title         {String}  – Card heading
-//    description   {String}  – Explanatory subtitle
-//    footnote      {String}  – Small source text at the bottom
-//    footnote-href {String}  – URL for the linked part of the footnote
-//    icon-src      {String}  – Path to icon asset for bd-img
-//
-//  Slots:
-//    (default) – <compare-bar> elements
 // ═══════════════════════════════════════════════════════════════
 
 class CompareCard extends LitElement {
+  static _idSeq = 0;
+
   static properties = {
-    title       : { type: String },
-    description : { type: String },
-    footnote    : { type: String },
-    footnoteHref: { type: String, attribute: "footnote-href" },
-    iconSrc     : { type: String, attribute: "icon-src" }
+    title          : { type: String },
+    description    : { type: String },
+    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" }
   };
 
   static styles = [tokens, compareCSS];
 
   constructor() {
     super();
-    this.title        = "";
-    this.description  = "";
-    this.footnote     = "";
+    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.iconSrc = "";
+    this.barStretch = true;
+    this.barFillMin = 50;
+    this.barStretchGamma = 1;
+    this.chartScale = 6;
+  }
+
+  firstUpdated() {
+    this._syncBarStretch();
+  }
+
+  updated(changed) {
+    super.updated(changed);
+    if (
+      changed.has("barFillMin") ||
+      changed.has("barStretchGamma") ||
+      changed.has("barStretch")
+    ) {
+      this._syncBarStretch();
+    }
+  }
+
+  _syncBarStretch() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (!slot) return;
+
+    const apply = () => {
+      const nodes = slot.assignedElements({ flatten: true });
+      const bars = nodes.filter(
+        (el) => el.localName === "compare-bar"
+      );
+
+      if (!this.barStretch) {
+        this.style.setProperty("--cs-bar-stretch", "0");
+        this._refreshBars(bars);
+        return;
+      }
+
+      const primary = bars.find((b) => b.variant === "primary");
+      const ref = primary ? parseFloat(primary.score) : 0;
+
+      if (!ref || ref <= 0) {
+        this.style.setProperty("--cs-bar-stretch", "0");
+        this._refreshBars(bars);
+        return;
+      }
+
+      const secondaries = bars.filter((b) => b.variant !== "primary");
+      if (secondaries.length < 2) {
+        this.style.setProperty("--cs-bar-stretch", "0");
+        this._refreshBars(bars);
+        return;
+      }
+
+      let rMin = 1;
+      for (const b of bars) {
+        if (b.variant === "primary") continue;
+        const sc = parseFloat(b.score);
+        if (!Number.isNaN(sc)) rMin = Math.min(rMin, sc / ref);
+      }
+
+      if (rMin >= 1 - 1e-6) {
+        this.style.setProperty("--cs-bar-stretch", "0");
+      } else {
+        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._refreshBars(bars);
+    };
+
+    apply();
+  }
+
+  _refreshBars(bars) {
+    queueMicrotask(() => {
+      bars.forEach((b) => b.requestUpdate?.());
+    });
   }
 
-  // Splits footnote text on "Source " and wraps everything after
-  // it in a bd-link. Falls back to plain text if no href given.
   _renderFootnote() {
     if (!this.footnote) return "";
 
@@ -111,7 +385,6 @@ class CompareCard extends LitElement {
     const idx = this.footnote.indexOf(splitOn);
 
     if (idx === -1) {
-      // No "Source " found — link the whole footnote text
       return html`
         <bd-p kind="xsmall" class="card-footnote">
           <bd-link href="${this.footnoteHref}" target="_blank" font-size="12px" color="var(--color-neutral-900)" underline>
@@ -121,7 +394,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`
@@ -135,17 +408,24 @@ class CompareCard extends LitElement {
     const isMobile = window.matchMedia("(max-width: 767px)").matches;
 
     return html`
-      <div class="card">
+      <div
+        class="card"
+        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-header">
-
           ${this.iconSrc
             ? html`
             <div class="card-icon-wrap" aria-hidden="true">
               <bd-img
                 src="${this.iconSrc}"
                 alt=""
-                width="42"
-                height="39"
+                width="48"
+                height="48"
                 fit="contain"
                 radius="none"
                 shadow="none"
@@ -157,9 +437,8 @@ class CompareCard extends LitElement {
 
           <div class="card-text-wrap">
             ${isMobile
-                ? html`<bd-h as="h5" class="card-title">${this.title}</bd-h>`
-                : html`<bd-h as="h4" class="card-title">${this.title}</bd-h>`
-            }
+              ? 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">
@@ -168,11 +447,10 @@ class CompareCard extends LitElement {
             `
               : ""}
           </div>
-
         </div>
 
-        <div class="card-bars">
-          <slot></slot>
+        <div class="card-bars" role="group" aria-label="Scores by brand">
+          <slot @slotchange=${this._syncBarStretch}></slot>
         </div>
 
         ${this._renderFootnote()}
@@ -183,20 +461,13 @@ class CompareCard extends LitElement {
 
 customElements.define("compare-card", CompareCard);
 
-
 // ═══════════════════════════════════════════════════════════════
 //  compare-section
-//  Attributes / Properties:
-//    title    {String}  – Section heading
-//    subtitle {String}  – Optional subheading
-//    columns  {Number}  – Column count override (default: 2)
-//    gap      {String}  – Gap between cards e.g. "16px" or "var(--spacing-4)"
-//
-//  Slots:
-//    (default) – <compare-card> elements
 // ═══════════════════════════════════════════════════════════════
 
 class CompareSection extends LitElement {
+  static _idSeq = 0;
+
   static properties = {
     title   : { type: String },
     subtitle: { type: String },
@@ -208,10 +479,15 @@ class CompareSection extends LitElement {
 
   constructor() {
     super();
-    this.title    = "";
+    this._sectionTitleId = `bd-compare-section-title-${++CompareSection._idSeq}`;
+    this.title = "";
     this.subtitle = "";
-    this.columns  = 2;
-    this.gap      = "";
+    this.columns = 2;
+    this.gap = "";
+  }
+
+  firstUpdated() {
+    scheduleCompareIntroDone();
   }
 
   render() {
@@ -221,16 +497,18 @@ class CompareSection extends LitElement {
       : `--_cols: ${this.columns}`;
 
     return html`
-      <section class="cs-section">
+      <section
+        class="cs-section"
+        aria-labelledby="${this.title ? this._sectionTitleId : nothing}"
+      >
         ${this.title || this.subtitle
           ? html`
           <div class="cs-heading">
             ${this.title
               ? html`
               ${isMobile
-                  ? html`<bd-h as="h4" class="cs-title">${this.title}</bd-h>`
-                  : html`<bd-h as="h3" class="cs-title">${this.title}</bd-h>`
-              }
+                ? 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