Bootstrap 5 choices.js styling, with Stimulus controller

choices.scss

$choices-font-size-lg: $input-font-size-lg;
$choices-font-size-md: $input-font-size;
$choices-font-size-sm: $input-font-size-sm;
$choices-guttering: $spacer;

$choices-border-radius: 0;
$choices-border-radius-item: 0;
@if $enable-rounded {
    $choices-border-radius: $input-border-radius;
    $choices-border-radius-item: $border-radius-pill;
}

$choices-bg-color: $input-bg;
$choices-bg-color-disabled: $input-disabled-bg;
$choices-bg-color-dropdown: $input-bg;
$choices-text-color: $input-color;
$choices-keyline-color: $input-border-color;
$choices-primary-color: $primary;
$choices-disabled-color: $input-disabled-bg;

@import "choices.js/src/styles/choices.scss";

.choices__inner {
    // width: 100px;
    min-height: $input-height;
    height: $input-height;
    padding: $input-padding-y $input-padding-x;

    & div.choices__list.choices__list--single {
        padding: 0;
    }
}

select_controller.js

import { Controller } from '@hotwired/stimulus';
import Choices from 'choices.js'

// TODO: we need something that can take HTML inside the option and use it
// the way Choices.js requires HTML setting up is *dumb*
export default class extends Controller {
  static targets = [
    'input',
  ]

  connect() {
    if(!this.choices) {
      this.choices = new Choices(this.hasInputTarget ? this.inputTarget : this.element.querySelector('select'));
    }
  }

  disconnect() {
    this.choices.destroy();
    delete this.choices;
  }
}