Price <mv-price>

node scripts/add.mjs price --out ./src/marvelous

<div id="price-demo" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.25rem;width:min(100%,52rem);margin-inline:auto">
  <style>
    #price-demo .tile { display:grid; gap:.625rem; align-content:start; padding:1.25rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface) }
    #price-demo .cap { margin:0; font-size:.75rem; font-weight:500; color:var(--mv-fg-muted); letter-spacing:.02em }
    #price-demo .name { margin:0; font-size:.875rem; font-weight:500 }
  </style>

  <div class="tile" style="grid-column:1/-1">
    <p class="cap">Product page · sale</p>
    <p class="name" style="font-size:1.125rem">Merino crewneck sweater</p>
    <mv-price id="price-demo-pdp" value="89" compare-at="119" note="+ tax" data-size="xl"></mv-price>
    <div style="display:flex;gap:.5rem;flex-wrap:wrap">
      <button class="mv-button" data-variant="outline" data-size="sm" data-price="89" aria-pressed="true">Sand · $89</button>
      <button class="mv-button" data-variant="outline" data-size="sm" data-price="99">Midnight · $99</button>
      <button class="mv-button" data-variant="outline" data-size="sm" data-price="119">Limited edition · $119</button>
    </div>
  </div>

  <div class="tile">
    <p class="cap">Grid thumbnail</p>
    <p class="name">Glazed stoneware mug</p>
    <mv-price value="24.9" compare-at="32" data-size="sm"></mv-price>
  </div>

  <div class="tile">
    <p class="cap">Price per ounce</p>
    <p class="name">Insulated bottle, 25 oz</p>
    <mv-price value="34.5" unit-price="1.38" unit="oz"></mv-price>
  </div>

  <div class="tile">
    <p class="cap">Price range</p>
    <p class="name">Scented candle · 3 sizes</p>
    <mv-price from value="18" max="46"></mv-price>
  </div>

  <div class="tile">
    <p class="cap">Superscript cents</p>
    <p class="name">Wave wireless headphones</p>
    <mv-price value="189.9" compare-at="229.9" data-variant="superscript" data-size="lg" discount="amount"></mv-price>
  </div>

  <div class="tile">
    <p class="cap">Other currency · de-DE</p>
    <p class="name">Canvas tote bag</p>
    <mv-price value="42" compare-at="56" currency="EUR" locale="de-DE"></mv-price>
  </div>

  <div class="tile">
    <p class="cap">Reference currency · tooltip</p>
    <p class="name">Leather weekender bag</p>
    <mv-price value="249" compare-at="299" reference-currency="EUR" rate="0.8531" rate-note="Indicative rate, Oct 3" data-size="lg"></mv-price>
  </div>

  <div class="tile">
    <p class="cap">Reference currency · inline</p>
    <p class="name">Linen throw blanket</p>
    <mv-price value="64" currency="GBP" locale="en-GB" reference-currency="USD" rate="1.3412" reference-display="inline"></mv-price>
  </div>

  <div class="tile">
    <p class="cap">Range · equivalent in yen</p>
    <p class="name">Ceramic pour-over set · 3 sizes</p>
    <mv-price from value="38" max="72" reference-currency="JPY" rate="147.32"></mv-price>
  </div>

  <div class="tile">
    <p class="cap">Static HTML (no JS)</p>
    <p class="name">Opaline lamp</p>
    <span class="mv-price" data-sale>
      <span class="mv-price-current"><span class="mv-sr-only">Sale price: </span>$129</span>
      <s class="mv-price-compare"><span class="mv-sr-only">Original price: </span>$159</s>
      <span class="mv-price-discount">−19%</span>
    </span>
  </div>
</div>
<script type="module">
  const root = document.getElementById("price-demo");
  const pdp = root.querySelector("#price-demo-pdp");
  root.addEventListener("click", (e) => {
    const btn = e.target.closest("[data-price]");
    if (!btn) return;
    root.querySelectorAll("[data-price]").forEach((b) => b.setAttribute("aria-pressed", String(b === btn)));
    pdp.value = Number(btn.dataset.price);
  });
</script>