emoji-picker-element/src/svelte/components/Picker/Picker.html

<svelte:options tag="lite-emoji-picker" />
<section
  class="lep-picker {resolvedDarkMode ? 'lep-dark' : 'lep-light'}"
  aria-label={i18n.regionLabel}
  bind:this={rootElement}
  style="--lep-num-columns: {numColumns};"
>
  <div class="lep-search-row">
    <div class="lep-search-wrapper">
      <input
        id="lep-search"
        class="lep-search"
        type="text"
        placeholder={i18n.search}
        autocapitalize="none"
        spellcheck="true"
        bind:value={rawSearchText}
      >
      <label class="lep-sr-only" for="lep-search">{i18n.search}</label>
    </div>
    <button class="lep-emoji lep-skintone-button">👍</button>

  </div>
  <div class="lep-nav"
       role="tablist"
       style="grid-template-columns: repeat({categories.length}, 1fr);"
       aria-label={i18n.categoriesLabel}>
    {#each categories as category (category.group)}
      <button role="tab"
              class="lep-nav-button"
              aria-controls="lep-tab-{category.group}"
              aria-label={i18n.categories[category.name]}
              aria-selected={currentCategory.group === category.group}
              title={i18n.categories[category.name]}
              on:click={() => handleCategoryClick(category)}>
        <div class="lep-emoji">
          {category.emoji}
        </div>
      </button>
    {/each}
  </div>
  <div class="lep-indicators"
       aria-hidden="true">
    {#each categories as category (category.group)}
      <div class="lep-indicator {currentCategory.group === category.group ? '' : 'lep-hidden'}">
      </div>
    {/each}
  </div>
  <div class="lep-tabpanel"
       role="tabpanel"
       aria-label={i18n.categories[currentCategory.name]}
       id="lep-tab-{currentCategory.group}">
      <div class="lep-emoji-menu" role="menu">
        {#each currentEmojis as emoji (emoji.unicode)}
          <button role="menuitem"
                  class="lep-tabpanel-emoji lep-emoji"
                  id="lep-emoji-{emoji.unicode}">
            {emoji.unicode}
          </button>
        {/each}
        <!-- Render placeholders to make sure that the grid spacing looks correct. There may be a better way. -->
        {#each placeholders as placeholder}
          <div class="lep-emoji lep-hidden"></div>
        {/each}
    </div>
  </div>
  <div aria-hidden="true" class="lep-hidden lep-abs-pos">
    <button class="lep-emoji lep-baseline-emoji" bind:this={baselineEmoji}>😀</button>
  </div>
</section>