Combobox

---
import { Combobox } from '@santi020k/lumen-astro'
---

<Combobox
  label="Framework"
  list="ex-frameworks"
  options={[
    'Astro',
    { label: 'React', value: 'react' },
    { label: 'Web Components', value: 'web-components' },
    { label: 'Vue', value: 'vue', disabled: true }
  ]}
  placeholder="Search frameworks"
/>

import { Combobox } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Combobox
      label="Framework"
      list="ex-frameworks"
      options={[
        'Astro',
        { label: 'React', value: 'react' },
        { label: 'Web Components', value: 'web-components' },
        { label: 'Vue', value: 'vue', disabled: true }
      ]}
      placeholder="Search frameworks"
    />
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-combobox data-ui-combobox>
  <label class="ui-label" for="ex-frameworks-input">Framework</label>
  <input
    aria-autocomplete="list"
    aria-controls="ex-frameworks"
    aria-expanded="false"
    class="ui-input"
    id="ex-frameworks-input"
    placeholder="Search frameworks"
    role="combobox"
    type="text"
  />
  <div class="ui-combobox__list" hidden id="ex-frameworks" role="listbox">
    <button data-ui-combobox-option data-value="Astro" role="option" type="button">Astro</button>
    <button data-ui-combobox-option data-value="React" role="option" type="button">React</button>
    <button data-ui-combobox-option data-value="Web Components" role="option" type="button">Web Components</button>
  </div>
</lumen-combobox>