{%- doc -%}
  @param {string} children - The children of the overflow list.
  @param {string} [class] - The class that is applied on the overflow-list element.
  @param {string} [attributes] - The attributes that are applied on the overflow-list element.
  @param {number} [minimum-items] - The minimum number of items to show in the overflow list.
  @param {string} [ref] - The ref that is set on the overflow-list element.
  @param {string} [data-testid] - The data-testid attribute that is set on the overflow-list element.
  @param {string} [more-attributes] - The attributes that are applied on the more button slot.
  @param {string} [more-button-attributes] - The attributes that are applied directly on the more button element.
{%- enddoc -%}

<overflow-list
  {% if ref %}
    ref="{{ ref }}"
  {% endif %}
  {% if class %}
    class="{{ class }}"
  {% endif %}
  {% if minimum-items %}
    minimum-items="{{ minimum-items }}"
  {% endif %}
  {% if data-testid %}
    data-testid="{{ data-testid }}"
  {% endif %}
  {% if attributes %}
    {{ attributes }}
  {% endif %}
>
  <template shadowrootmode="open">
    {{ 'overflow-list.css' | asset_url | stylesheet_tag }}

    <ul part="list">
      <slot></slot>
      <slot
        name="more"
        part="more"
        hidden
        {% if more-attributes %}
          {{ more-attributes }}
        {% endif %}
      >
        <li
          part="more"
        >
          <button
            class="button"
            type="button"
            tabindex="0"
            {% if more-button-attributes %}
              {{ more-button-attributes }}
            {% endif %}
          >
            {{ 'actions.more' | t }}
          </button>
        </li>
      </slot>
      <li
        part="placeholder"
        hidden
      ></li>
    </ul>

    <div part="overflow">
      <ul part="overflow-list">
        <slot name="overflow"></slot>
      </ul>
    </div>
  </template>

  {{ children }}
</overflow-list>
