carbon-components-svelte/src/PaginationNav/PaginationOverflow.svelte

<script>
  /**
   * @event {{ index: number; }} select
   */

  /** Specify the pivot start index */
  export let fromIndex = 0;

  /** Specify the pivot end index */
  export let count = 0;

  import { createEventDispatcher } from "svelte";
  import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
  import PaginationItem from "./PaginationItem.svelte";

  const dispatch = createEventDispatcher();

  let value = "";
</script>

{#if count > 1}
  <li class:bx--pagination-nav__list-item="{true}">
    <div class:bx--pagination-nav__select="{true}">
      <!-- svelte-ignore a11y-no-onchange -->
      <select
        aria-label="Select Page number"
        value="{value}"
        class:bx--pagination-nav__page="{true}"
        class:bx--pagination-nav__page--select="{true}"
        on:change="{({ target }) => {
          value = '';
          dispatch('select', { index: Number(target.value) });
        }}"
      >
        <option value="" hidden></option>
        {#each Array.from({ length: count }, (_, i) => i) as i}
          <option value="{fromIndex + i}" data-page="{fromIndex + i + 1}">
            {fromIndex + i + 1}
          </option>
        {/each}
      </select>
      <div class:bx--pagination-nav__select-icon-wrapper="{true}">
        <OverflowMenuHorizontal16 class="bx--pagination-nav__select-icon" />
      </div>
    </div>
  </li>
{:else if count === 1}
  <PaginationItem
    page="{fromIndex + 1}"
    on:click="{() => {
      dispatch('select', { index: fromIndex });
    }}"
  >
    Page
  </PaginationItem>
{/if}