chrome/browser/resources/new_tab_page/realbox_dropdown.html

<style>
  :host {
    background-color: var(--search-box-results-bg, white);
    overflow: hidden;
  }

  @media (min-width: 560px) {
    :host {
      width: 449px;
    }
  }

  @media (min-width: 672px) {
    :host {
      width: 561px;
    }
  }

  ntp-realbox-match {
    color: var(--search-box-results-text);
  }

  .header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    outline: none;
    padding-bottom: 6px;
    padding-inline-end: 16px;
    padding-inline-start: 12px;
    padding-top: 6px;
  }

  .header .text {
    color: var(--search-box-results-dim, var(--google-grey-refresh-700));
    cursor: default;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    overflow: hidden;
    padding-inline-end: 8px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
  }

  ntp-realbox-match:hover,
  .header:hover {
    background-color: var(--search-box-results-bg-hovered, rgba(var(--google-grey-900-rgb), .1));
  }

  ntp-realbox-match:-webkit-any(:focus-within, .selected),
  .header:focus-within:not(:focus) {
    background-color: var(--search-box-results-bg-selected, rgba(var(--google-grey-900-rgb), .16));
    color: var(--search-box-results-text-selected, var(--google-grey-900));
  }
</style>
<iron-selector id="selector" selectable="ntp-realbox-match"
    items="{{selectableMatchElements_}}" selected="{{selectedMatchIndex}}"
    selected-class="selected">
  <template is="dom-repeat" items="[[groupIds_]]" as="groupId">
    <template is="dom-if" if="[[groupHasHeader_(groupId)]]">
      <!-- Header cannot be tabbed into but gets focus when clicked. This stops
           the dropdown from losing focus and closing as a result. -->
      <div class="header" data-id$="[[groupId]]" tabindex="-1"
          on-focusin="onHeaderFocusin_" on-click="onHeaderClick_"
          aria-hidden="true"
          group-is-hidden$="[[groupIsHidden_(groupId, hiddenGroupIds_.*)]]">
        <span class="text">[[headerForGroup_(groupId)]]</span>
        <ntp-realbox-button tabindex="0" role="button"
            title="[[toggleButtonTitleForGroup_(groupId, hiddenGroupIds_.*)]]"
            aria-label$="[[toggleButtonA11yLabelForGroup_(groupId, hiddenGroupIds_.*)]]"
            on-keydown="onToggleButtonKeydown_">
        </ntp-realbox-button>
      </div>
    </template>
    <template is="dom-if" if="[[!groupIsHidden_(groupId, hiddenGroupIds_.*)]]"
        restamp>
      <template is="dom-repeat" items="[[result.matches]]"
          filter="[[computeMatchBelongsToGroup_(groupId)]]"
          on-dom-change="onResultRepaint_">
        <ntp-realbox-match tabindex="0" role="option" match="[[item]]"
            match-index="[[matchIndex_(item)]]">
        </ntp-realbox-match>
      </template>
    </template>
  <template>
</iron-selector>