@vcl/vcl/select-list/demo/example-listbox.html

The whole VCL in one package

<ul class="select-list" role="listbox" aria-multiselectable="false" aria-activedescendant="activeItem" style="position: static;">
  <li class="select-list-item-group-header">
    <div class="select-list-item-group-header-label">Europe</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Greece</div>
    <div class="select-list-item-sub-label">Sub-label for Greece</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">France</div>
    <div class="select-list-item-sub-label">Sub-label for France</div>
  </li>
  <li class="select-list-item selected" role="option" tabindex="0" aria-selected="true" id="activeItem">
    <div class="select-list-item-label">Germany (selected)</div>
    <div class="select-list-item-sub-label">Sub-label for Germany</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">The United Kingdom of Great Britain and Northern Ireland long long long long long long long entry</div>
    <div class="select-list-item-sub-label">Sub-label for UK</div>
  </li>
  <li class="select-list-item highlighted" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Italy (highlighted)</div>
    <div class="select-list-item-sub-label">Sub-label for Italy</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Spain</div>
    <div class="select-list-item-sub-label">Sub-label for Spain</div>
  </li>
  <li class="select-list-item-group-header">
    <div class="select-list-item-group-header-label">Asia</div>
  </li>
  <li class="select-list-item selected" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Japan (selected)</div>
    <div class="select-list-item-sub-label">Sub-label for Japan</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">China</div>
    <div class="select-list-item-sub-label">Sub-label for China</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Thailand</div>
    <div class="select-list-item-sub-label">Sub-label for Thailand</div>
  </li>
  <li class="select-list-item selected" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">India (selected)</div>
    <div class="select-list-item-sub-label">Sub-label for India</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">South Korea</div>
    <div class="select-list-item-sub-label">Sub-label for South Korea</div>
  </li>
  <li class="select-list-item disabled" role="option" tabindex="0" aria-disabled="true">
    <div class="select-list-item-label">Disabled Item</div>
    <div class="select-list-item-sub-label">Sub-label for Disabled</div>
  </li>
  <li class="select-list-item-group-header">
    <div class="select-list-item-group-header-label">Africa</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Egypt</div>
    <div class="select-list-item-sub-label">Sub-label for Egypt</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Ghana</div>
    <div class="select-list-item-sub-label">Sub-label for Ghana</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Namibia</div>
    <div class="select-list-item-sub-label">Sub-label for Namibia</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Uganda</div>
    <div class="select-list-item-sub-label">Sub-label for Uganda</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="select-list-item-label">Sudan</div>
    <div class="select-list-item-sub-label">Sub-label for Sudan</div>
  </li>
</ul>