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

<svelte:options tag={null} />
<section
  class="lep-picker {resolvedDarkMode ? 'lep-dark' : 'lep-light'}"
  aria-label={i18n.regionLabel}
  bind:this={rootElement}
  style="--lep-num-columns: {numColumns};"
>
  <div>
    <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>
  <div class="lep-nav" role="tablist" aria-label={i18n.categoriesLabel}>
    {#each categories as category (category.group)}
    <button role="tab"
            class="lep-nav-button lep-emoji"
            aria-controls="lep-tab-{category.group}"
            aria-label={i18n.categories[category.name]}
            title={i18n.categories[category.name]}
            on:click={() => handleCategoryClick(category)}>
      {category.emoji}
    </button>
    {/each}
  </div>
  <div role="tabpanel"
       class="lep-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}
    </div>
  </div>
  <div aria-hidden="true" class="lep-hidden">
    <button class="lep-emoji lep-baseline-emoji" bind:this={baselineEmoji}>😀</button>
  </div>
</section>