<h3>Default Stopwatch</h3>
<sl-time-tracker>
  <span slot="label">Duration</span>
</sl-time-tracker>

<h3>Timer Mode</h3>
<sl-time-tracker mode="timer" targetDuration="10">
  <span slot="label">Countdown (10s)</span>
</sl-time-tracker>

<h3>Auto Start</h3>
<sl-time-tracker mode="stopwatch" autoStart>
  <span slot="label">Auto Start Stopwatch</span>
</sl-time-tracker>

<h3>Start from Initial Time (Auto Start)</h3>
<sl-time-tracker mode="stopwatch" initialTime="60">
  <span slot="label">Starts from 60 seconds and runs automatically</span>
</sl-time-tracker>

<h3>Custom Control</h3>
<sl-time-tracker id="myTracker" mode="stopwatch">
  <span slot="label">Working time</span>
  <sl-button id="myTrackerBtn" slot="control" size="small" variant="success">
    <sl-icon id="myTrackerIcon" name="mdi:play-circle-outline"></sl-icon>
    <span id="myTrackerText">Start</span>
  </sl-button>
</sl-time-tracker>

<script>
  const tracker = document.querySelector('#myTracker');
  const btn = document.querySelector('#myTrackerBtn');
  const icon = document.querySelector('#myTrackerIcon');
  const text = document.querySelector('#myTrackerText');

  let running = false;

  function update() {
    btn.variant = running ? 'danger' : 'success';
    icon.name = running ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline';
    text.textContent = running ? 'Stop' : 'Start';
  }

  btn.addEventListener('click', () => {
    running ? tracker.stop() : tracker.start();
  });

  tracker.addEventListener('sl-start-time', () => {
    running = true;
    update();
  });

  tracker.addEventListener('sl-stop-time', () => {
    running = false;
    update();
  });
</script>