Single Combobox

<div class="combobox-container">
  <label for="framework-combobox">Choose a framework:</label>

  <!-- The combobox provides its own text field and arrow; label it like any form control -->
  <sv-combobox id="framework-combobox" class="framework-combobox" placeholder="Type to search">
    <sv-flyout>
      <!-- Options -->
      <button class="option" value="astro">Astro</button>
      <button class="option" value="preact">Preact</button>
      <button class="option" value="qwik">Qwik</button>
      <button class="option" value="react">React</button>
      <button class="option" value="solid">SolidJS</button>
      <button class="option" value="svelte">Svelte</button>
      <button class="option" value="vue">Vue</button>

      <!-- Shown by the component only while the query matches nothing -->
      <p class="empty" data-combobox-no-results>No framework matches your search</p>
    </sv-flyout>
  </sv-combobox>
</div>

<style>
  .combobox-container {
5 collapsed lines
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    max-inline-size: 350px;
    margin: auto;

    label {
      align-self: flex-start;
      cursor: pointer;
    }

    /* Size the supplied flyout through its own content part. */
    sv-flyout::part(content) {
      /* Match the flyout’s inline size to the anchor (text field). */
      inline-size: var(--sv-anchor-width);
      min-block-size: 50px;

      /* Let long content shrink and scroll so the current position can fit. */
      max-block-size: min(var(--sv-anchor-available-height), 400px);
    }

    .empty {
3 collapsed lines
      padding: 0.5em;
      margin: 0;
      color: var(--sv-gray-3);
    }
  }
</style>