class DemoToggle extends HTMLElement {
  static formAssociated = true;
  #internals = this.attachInternals();

  setState(name, on) {
    on ? this.#internals.states.add(name)
       : this.#internals.states.delete(name);
  }

  connectedCallback() {
    this.addEventListener("click", () =>
      this.setState("--on", !this.#internals.states.has("--on")));
  }
}
customElements.define("demo-toggle", DemoToggle);

/* Custom element states, styled like native pseudo-classes */

demo-toggle { display: block; }

/* The switch track */
demo-toggle .track {
  width: 56px; height: 30px; border-radius: 999px;
  background: #cbd5e1; transition: background 0.2s;
  position: relative;
}
demo-toggle .knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 999px;
  background: white; transition: left 0.2s;
}

/* Custom states drive the styling: no .on classes needed */
demo-toggle:state(--on) .track { background: #0d9488; }
demo-toggle:state(--on) .knob { left: 29px; }

demo-toggle:state(--invalid) { outline: 2px solid #ef4444; outline-offset: 4px; border-radius: 8px; }
demo-toggle:state(--loading) .knob { animation: spin 1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

5 of 5 free copies left.