@aurelia-mdc-web/select/dist/mdc-select.html

Wrapper for Material Components Web Select

<template class="
    mdc-select
    mdc-select--${outlined ? 'outlined' : 'filled'}
    ${leadingIcon ? 'mdc-select--with-leading-icon' : ''}
    ${required ? 'mdc-select--required' : ''}
  " role="button" aria-haspopup="listbox" id="${id}">
  <div class="mdc-select__anchor" ref="selectAnchor" mdc-ripple="no-class.bind: true;" change.trigger="handleChange()"
    focus.trigger="handleFocus()" blur.trigger="handleBlur()" keydown.trigger="handleKeydown($event)"
    click.trigger="handleClick($event)">
    <span class="mdc-select__ripple" if.bind="!outlined"></span>
    <slot name="leading-icon"></slot>
    <span class="mdc-select__selected-text-container">
      <span class="mdc-select__selected-text" ref="selectedText"></span>
    </span>
    <span class="mdc-select__dropdown-icon">
      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
        <polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10">
        </polygon>
        <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15">
        </polygon>
      </svg>
    </span>
    <mdc-floating-label if.bind="label && !outlined" for="${id}" view-model.ref="mdcLabel">${label}
    </mdc-floating-label>
    <mdc-line-ripple if.bind="!outlined" view-model.ref="lineRipple"></mdc-line-ripple>
    <mdc-notched-outline if.bind="outlined" view-model.ref="outline">
      <mdc-floating-label if.bind="label" for="${id}" view-model.ref="mdcLabel">${label}</mdc-floating-label>
    </mdc-notched-outline>
  </div>

  <mdc-menu class="mdc-select__menu ${naturalWidth || hoistToBody || fixed ? '' : 'mdc-menu-surface--fullwidth'}"
    view-model.ref="menu" ref="menuElement" typeahead mdcmenusurface:closed.trigger="handleMenuClosed()"
    anchor-margin.bind="anchorMargin" mdcmenusurface:opened.trigger="handleMenuOpened()"
    mdcmenu:selected.trigger="handleMenuItemAction($event)" mdclist:itemschanged.trigger="handleItemsChanged($event)"
    hoist-to-body.bind="hoistToBody" fixed.bind="fixed">
    <slot></slot>
  </mdc-menu>
</template>