Refactor de calculadoras com Design System

class BmiCalculator extends HTMLElement {
  connectedCallback() {
    this.render();
    this.form = this.querySelector('form');
    this.output = this.querySelector('[data-output]');
    this.band = this.querySelector('[data-band]');
    this.live = this.querySelector('[data-live]');
    this.form.addEventListener('input', () => this.compute());
  }

  compute() {
    const weight = Number(this.form.weight.value);
    const height = Number(this.form.height.value) / 100;
    if (!weight || !height) return this.announce('');

    const bmi = weight / (height * height);
    const band = this.classify(bmi);
    this.output.textContent = bmi.toFixed(1);
    this.band.textContent = band;
    this.announce(`IMC ${bmi.toFixed(1)}, ${band}`);
  }

  classify(bmi) {
    if (bmi < 18.5) return 'Abaixo do peso';
    if (bmi < 25) return 'Peso saudável';
    if (bmi < 30) return 'Sobrepeso';
    return 'Obesidade';
  }

  announce(message) {
    this.live.textContent = message;
  }
}

customElements.define('bmi-calculator', BmiCalculator);

.calculator {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-2);
  font-family: var(--font-body);
}

.calculator__output {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-ink);
}