Toggle

<k-toggle>Toggle Me</k-toggle>

<k-toggle value="true">Toggle Me</k-toggle>

<k-toggle 
  style="
    --switch_height: 3rem;
    --switch_width: 5rem;
    --switch_border: none;
    --switch_background__off: var(--c_danger);
    --switch_background__on: var(--c_success);
    --handle_size__off: 2rem;
    --handle_size__on: calc(3rem - 2px);
    --handle_border: none;
    --handle_background__off: #ddd;
    --handle_background__on: white;
  "
>Toggle Me</k-toggle>

<k-toggle id="tog1">Toggle Me</k-toggle>
<button id="turnOn">Turn On</button>
<button id="turnOff">Turn Off</button>
<button id="toggle">Toggle</button>
<script>
  const $tog1 = document.getElementById('tog1');
  document.getElementById('turnOn').addEventListener('click', ()=>{
    $tog1.on();
  });
  document.getElementById('turnOff').addEventListener('click', ()=>{
    $tog1.off();
  });
  document.getElementById('toggle').addEventListener('click', ()=>{
    $tog1.toggle();
  });
</script>