<span
  class="x-toggle-container
    {{@size}}
    {{if @disabled 'x-toggle-container-disabled'}}
    {{if @value 'x-toggle-container-checked'}}
  "
  ...attributes
  {{did-pan
    onPanStart=this.handlePan
    onPan=this.handlePan
    pointerTypes=(array 'touch' 'mouse')
  }}
  {{will-destroy this.removeListener}}
>
  <input
    class='x-toggle'
    type='checkbox'
    checked={{@toggled}}
    disabled={{@disabled}}
    id={{@forId}}
    name={{@name}}
    {{on 'change' this.onChange}}
  />

  <label for={{this.effectiveForId}}>
    <div
      id="x-toggle-visual-{{@forId}}"
      role='checkbox'
      class="x-toggle-btn
        {{this.themeClass}}
        {{@variant}}
        {{@size}}
        {{if @disabled ' x-toggle-disabled'}}
      "
      aria-owns={{@forId}}
      aria-checked={{@toggled}}
      data-tg-on={{@onLabel}}
      data-tg-off={{@offLabel}}
    >
    </div>
  </label>
</span>