Real Terms <mv-real-terms>

node scripts/add.mjs real-terms --out ./src/marvelous

<mv-real-terms label="Base salary" start="86000" end="87200" format="currency">
  <script type="application/json" data-baselines>[{ "id": "cpi", "label": "Inflation (CPI)", "kind": "inflation", "change": "2.9%" }]</script>
</mv-real-terms>

<div id="rt-demo" style="width:min(100%,56rem);margin-inline:auto">
  <style>
    #rt-demo { display:grid; gap:1rem; align-content:start }
    #rt-demo .rt-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:1rem }
    #rt-demo .rt-controls { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1.25rem; flex-wrap:wrap; margin-top:-.25rem; padding:0 .25rem }
    #rt-demo .rt-controls span { display:flex; gap:1.25rem; flex-wrap:wrap }
    #rt-demo .mv-choice { font-size:.8125rem }
    #rt-demo .rt-log { margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono) }
    #rt-demo .rt-table { overflow:hidden; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #rt-demo .rt-table h4 { margin:0; padding:.875rem 1.25rem; border-bottom:1px solid var(--mv-border); font-size:.875rem }
    #rt-demo table { width:100%; border-collapse:collapse; font-size:.8125rem }
    #rt-demo th, #rt-demo td { padding:.625rem 1.25rem; text-align:start; vertical-align:middle }
    #rt-demo thead th { color:var(--mv-fg-muted); font-size:.75rem; font-weight:500; background:var(--mv-bg-subtle) }
    #rt-demo tbody tr + tr td, #rt-demo tbody tr + tr th { border-top:1px solid var(--mv-border) }
    #rt-demo tbody th { font-weight:500; white-space:nowrap }
    #rt-demo tbody th small { display:block; color:var(--mv-fg-muted); font-weight:400 }
    @media (max-width:40rem) { #rt-demo thead { display:none } #rt-demo tbody tr { display:grid } #rt-demo tbody td { padding-top:0 } }
  </style>

  <!-- Revenue grew, but the category grew faster: several baselines to compare with -->
  <mv-real-terms id="rt-arr" label="Annual recurring revenue" period="FY 2026 · Oct 2025 to Sep 2026"
    start="4200000" end="4540000" format="currency" compact baseline="category" subject="Kestrel">
    <script type="application/json" data-baselines>
      [
        { "id": "category", "label": "Category growth", "name": "the category", "kind": "benchmark", "change": "10.4%",
          "note": "Mid-market HR software, analyst consensus.", "source": "Industry revenue survey, Sep 2026" },
        { "id": "peers", "label": "Peer median", "name": "peers", "kind": "peers", "change": "6.2%",
          "note": "Median of 14 private SaaS companies with $3M-$8M ARR." },
        { "id": "cpi", "label": "Inflation (CPI)", "kind": "inflation", "change": "2.9%",
          "note": "US consumer prices, Sep 2025 to Sep 2026.", "source": "Bureau of Labor Statistics", "sourceUrl": "https://www.bls.gov/cpi/" },
        { "id": "plan", "label": "Board plan", "name": "the plan", "kind": "target", "change": "12%",
          "note": "Growth approved in the FY 2026 budget." }
      ]
    </script>
  </mv-real-terms>
  <div class="rt-controls">
    <span>
      <label class="mv-choice"><input type="checkbox" class="mv-switch" data-size="sm" id="rt-slope"> Slope chart</label>
      <label class="mv-choice"><input type="checkbox" class="mv-switch" data-size="sm" id="rt-lock"> Lock the baseline (veto changes)</label>
    </span>
    <p class="rt-log" id="rt-log" aria-live="polite">Pick a baseline or switch to Relative.</p>
  </div>

  <div class="rt-pair">
    <!-- A raise that is a pay cut in real terms: shown in the real view -->
    <mv-real-terms label="Your base salary" period="Oct 2025 → Oct 2026" start="86000" end="87200"
      format="currency" view="real" baseline="cpi">
      <script type="application/json" data-baselines>
        [
          { "id": "cpi", "label": "Inflation (CPI)", "kind": "inflation", "change": "2.9%", "note": "US consumer prices over the same 12 months." },
          { "id": "role", "label": "Same role, median raise", "name": "the median raise", "kind": "peers", "change": "3.6%", "note": "Senior product designers, US, 2,300 salary reports." }
        ]
      </script>
    </mv-real-terms>

    <!-- The counterintuitive case: down, yet ahead -->
    <mv-real-terms label="Retirement portfolio" period="Q3 2026" start="312400" end="302400"
      format="currency" visual="slope" baseline="index" subject="Portfolio">
      <script type="application/json" data-baselines>
        [
          { "id": "index", "label": "Global equity index", "name": "the index", "kind": "benchmark", "change": "-8.9%", "note": "Total return, dividends reinvested." },
          { "id": "balanced", "label": "60/40 benchmark", "name": "a 60/40 mix", "kind": "benchmark", "change": "-5.1%" }
        ]
      </script>
    </mv-real-terms>
  </div>

  <!-- Inline, in a KPI table: every row judged against its own baseline -->
  <section class="rt-table" aria-labelledby="rt-table-title">
    <h4 id="rt-table-title">Monthly review · December 2026</h4>
    <table>
      <thead><tr><th scope="col">Metric</th><th scope="col">Change, in context</th></tr></thead>
      <tbody>
        <tr>
          <th scope="row">Organic sessions<small>Dec vs Nov</small></th>
          <td><mv-real-terms variant="inline" change="40%" id="rt-traffic"></mv-real-terms></td>
        </tr>
        <tr>
          <th scope="row">Paid subscribers<small>Year over year</small></th>
          <td><mv-real-terms variant="inline" change="0%" id="rt-subs"></mv-real-terms></td>
        </tr>
        <tr>
          <th scope="row">Support cost per ticket<small>Year over year · lower is better</small></th>
          <td><mv-real-terms variant="inline" change="2.6%" direction="lower" id="rt-support"></mv-real-terms></td>
        </tr>
        <tr>
          <th scope="row">Hosting cost per user<small>Year over year · lower is better</small></th>
          <td><mv-real-terms variant="inline" change="1%" direction="lower" id="rt-hosting"></mv-real-terms></td>
        </tr>
      </tbody>
    </table>
  </section>

  <script type="module">
    const arr = document.getElementById("rt-arr");
    const log = document.getElementById("rt-log");
    const lock = document.getElementById("rt-lock");
    const pct = (x) => `${x > 0 ? "+" : ""}${(x * 100).toFixed(1)}`;

    arr.addEventListener("mv-baseline-change", (e) => {
      if (lock.checked) {
        e.preventDefault();
        log.textContent = `Vetoed: the baseline is locked to ${e.detail.from}.`;
        return;
      }
      const r = e.detail.result;
      log.textContent = `mv-baseline-change → ${e.detail.to} · ${r.verdict} (${pct(r.relative)}${r.method === "points" ? " pts" : "%"})`;
    });
    arr.addEventListener("mv-view-change", (e) => { log.textContent = `mv-view-change → ${e.detail.to}`; });
    document.getElementById("rt-slope").addEventListener("change", (e) => { arr.visual = e.target.checked ? "slope" : "bars"; });

    // Baselines can also be set as a property.
    const cpi = { id: "cpi", label: "inflation", kind: "inflation", change: 0.029 };
    document.getElementById("rt-traffic").baselines = [{ id: "ly", label: "same period last year", kind: "seasonal", change: 0.45 }];
    document.getElementById("rt-subs").baselines = [{ id: "peers", label: "peer median", kind: "peers", change: 0.041 }];
    document.getElementById("rt-support").baselines = [cpi];
    document.getElementById("rt-hosting").baselines = [cpi];
  </script>
</div>