<tk-bulk-selector>
  <p class="mb-0x" slot="count">1 item selected</p>
  <tk-dropdown slot="actions" trigger-type="action" light position="top-right">
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Beauxbatons Academy
      </button>
    </tk-dropdown-item>
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Durmstrang Institute
      </button>
    </tk-dropdown-item>
    <tk-dropdown-item>
      <button class="dropdown__link" current="true" type="button">
        Hogwarts
      </button>
    </tk-dropdown-item>
  </tk-dropdown>
</tk-bulk-selector>

<tk-checkbox id="bulkToggler" label="Bulk Selector"></tk-checkbox>

<script>
  let shouldShowBulkSelector = true;

  const bulkSelector = document.getElementsByTagName('tk-bulk-selector');
  const selectedCount = document.querySelectorAll('p[slot="count"]');

  bulkToggler.addEventListener('check', (e) => toggleBulkSelector(e.target))
  bulkSelector[0].addEventListener('allSelected', (e) => updateCount(e.detail));

  const updateCount = (eventDetail) => {
    const selectedText = eventDetail ? '9k items selected' : '1 item selected';
    return selectedCount[0].innerText = selectedText;
  }

  const toggleBulkSelector = (element) => {
    bulkSelector[0].showBulkSelector(shouldShowBulkSelector);
    shouldShowBulkSelector = !shouldShowBulkSelector;
  };
</script>

<tk-bulk-selector light>
  <tk-dropdown slot="actions" trigger-type="action" position="top-right">
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Beauxbatons Academy
      </button>
    </tk-dropdown-item>
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Durmstrang Institute
      </button>
    </tk-dropdown-item>
    <tk-dropdown-item>
      <button class="dropdown__link" current="true" type="button">
        Hogwarts
      </button>
    </tk-dropdown-item>
  </tk-dropdown>
</tk-bulk-selector>

<tk-checkbox id="bulkToggler2" label="Bulk Selector"></tk-checkbox>

<script>
  let shouldShowBulkSelector2 = true;
  bulkToggler2.addEventListener('check', (e) => toggleBulkSelector2(e.target));

  const toggleBulkSelector2 = (element) => {
    bulkSelector[1].showBulkSelector(shouldShowBulkSelector2);
    shouldShowBulkSelector2 = !shouldShowBulkSelector2;
  };
</script>