Filter List

<filter-list data-bascik-prop-label="Filter languages">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>TypeScript</li>
</filter-list>

<!-- @bascik
A list with a live text filter. Pass <li> items in the default slot. Without JavaScript the full list shows and the filter box stays hidden.
@prop label - Label for the filter box. Defaults to "Filter".
@slot default - The <li> items to filter.
-->
<style>
  .filter-list {
    display: grid;
    gap: 0.5rem;
  }

  .controls {
    display: grid;
    gap: 0.25rem;
  }

  .input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 30%, transparent));
    border-radius: var(--radius, 0.5rem);
    background: var(--color-bg, Field);
    color: inherit;
    font: inherit;
  }

  .input:focus-visible {
    outline: 2px solid var(--color-accent, currentColor);
    outline-offset: 1px;
  }

  .items {
    margin: 0;
    padding: 0.75rem 0.75rem 0.75rem 2rem;
    border-radius: var(--radius, 0.5rem);
    background: var(--color-surface, color-mix(in srgb, currentColor 8%, transparent));
  }

  .count {
    margin: 0;
    color: var(--color-muted, inherit);
    font-size: 0.875em;
  }
</style>
<div class="filter-list">
  <div class="controls" id="controls" hidden>
    <label for="query" data-bascik-prop-label>Filter</label>
    <input class="input" id="query" type="search" autocomplete="off" />
    <p class="count" id="count" aria-live="polite"></p>
  </div>
  <ul class="items" id="items">
    <li data-bascik-slot></li>
  </ul>
</div>
<script>
  const query = document.getElementById('query');
  const count = document.getElementById('count');
  const items = [...document.getElementById('items').children];

  const apply = () => {
    const needle = query.value.trim().toLowerCase();
    let shown = 0;
    for (const item of items) {
      const match = item.textContent.toLowerCase().includes(needle);
      item.hidden = !match;
      if (match) shown++;
    }
    count.textContent = needle ? `${shown} of ${items.length} shown` : '';
  };

  query.addEventListener('input', apply);
  // The browser may restore a typed value on Back or reload without firing input.
  window.addEventListener('pageshow', apply);
  document.getElementById('controls').hidden = false;
</script>