<div
  class='x-toggle-component {{if this.focused 'x-toggle-focused'}}'
  tabindex='0'
  ...attributes
  {{did-insert this.setContainer}}
  {{on 'focusin' this.handleFocusIn}}
  {{on 'focusout' this.handleFocusOut}}
  {{on 'keypress' this.spacebarToggle}}
>
  {{#if (has-block)}}
    {{yield
      (hash
        switch=(component
          'x-toggle-switch'
          disabled=this.disabled
          forId=this.forId
          name=this.name
          offLabel=this.offLabel
          onLabel=this.onLabel
          size=this.size
          theme=this.theme
          variant=this.variant
          toggled=this.toggled
          value=this.value
          sendToggle=this.toggleSwitch
        )
        offLabel=(component
          'x-toggle-label'
          label=this.offLabel
          show=this.showLabels
          switchId=this.forId
          value=false
          sendToggle=this.toggleSwitch
        )
        onLabel=(component
          'x-toggle-label'
          label=this.onLabel
          show=this.showLabels
          switchId=this.forId
          value=true
          sendToggle=this.toggleSwitch
        )
        label=(component
          'x-toggle-label'
          show=this.showLabels
          switchId=this.forId
          sendToggle=this.toggleSwitch
        )
      )
    }}
  {{else}}
    <XToggleLabel
      @label={{this.offLabel}}
      @show={{this.showLabels}}
      @switchId={{this.forId}}
      @value={{false}}
      @sendToggle={{this.toggleSwitch}}
    />

    <XToggleSwitch
      @disabled={{this.disabled}}
      @forId={{this.forId}}
      @name={{this.name}}
      @offLabel={{this.offLabel}}
      @onLabel={{this.onLabel}}
      @size={{this.size}}
      @theme={{this.theme}}
      @variant={{this.variant}}
      @toggled={{this.toggled}}
      @value={{this.value}}
      @sendToggle={{this.toggleSwitch}}
    />

    <XToggleLabel
      @label={{this.onLabel}}
      @show={{this.showLabels}}
      @switchId={{this.forId}}
      @value={{true}}
      @sendToggle={{this.toggleSwitch}}
    />
  {{/if}}
</div>