{{! template-lint-disable no-invalid-interactive no-pointer-down-event-binding }}
{{this.registerComponents
  (hash
    Trigger=(component
      this.SelectBoxTrigger
      role=this.triggerRole
      aria-busy=this.isBusy
      aria-disabled=this.isDisabled
      aria-activedescendant=this.triggerActiveDescendant
      aria-expanded=this.isOpenAttr
      aria-controls=this.optionsElement.id
      tabindex=this.triggerTabIndex
      onInsert=this.handleInsertTrigger
      onDestroy=this.handleDestroyTrigger
      onMouseDown=this.handleMouseDownTrigger
      onKeyDown=this.handleKeyDownTrigger
    )
    Input=(component
      this.SelectBoxInput
      disabled=this.isDisabled
      aria-busy=this.isBusy
      aria-activedescendant=this.activeOption.element.id
      aria-expanded=this.isOpenAttr
      aria-controls=this.optionsElement.id
      onInsert=this.handleInsertInput
      onDestroy=this.handleDestroyInput
      onInput=this.handleInput
      onKeyDown=this.handleKeyDownInput
    )
    Group=this.SelectBoxGroup
    Options=(component
      this.SelectBoxOptions
      aria-multiselectable=this.isMultiple
      tabindex=this.optionsTabIndex
      onInsert=this.handleInsertOptions
      onDestroy=this.handleDestroyOptions
      onKeyDown=this.handleKeyDownOptions
    )
    Option=(component
      this.SelectBoxOption
      selectBox=this
      onInsert=this.handleInsertOption
      onDestroy=this.handleDestroyOption
      onMouseEnter=this.handleMouseEnterOption
      onMouseUp=this.handleMouseUpOption
      onMouseDown=this.handleMouseDownOption
      onKeyDown=this.handleKeyDownOption
      onFocusIn=this.handleFocusInOption
    )
  )
}}
<div
  class="select-box"
  data-busy="{{this.isBusy}}"
  data-disabled="{{this.isDisabled}}"
  data-open="{{this.isOpenAttr}}"
  {{on "focusout" this.handleFocusOut}}
  {{on "mousedown" this.handleMouseDown}}
  {{on "mouseup" this.handleMouseUp}}
  {{on "mouseleave" this.handleMouseLeave}}
  ...attributes
  {{did-insert this.handleInsertElement}}
  {{did-update this.handleUpdatedValue @value}}
  {{did-update this.handleUpdatedOptions @options}}
  {{will-destroy this.handleDestroyElement}}
>
  {{~yield this.api~}}
</div>