Combobox

<%# Markup for the combobox (APG Combobox / list autocomplete) demo.
    stimeo--combobox provides list filtering on input, Arrow/Enter/Esc, and
    aria-activedescendant. Focus stays on the input and the active option is shown via
    aria-selected. On selection, data-value (or the text, if absent) is placed in the input. %>
<div class="combobox" data-controller="stimeo--combobox">
  <label id="fruit-label" class="combobox__label" for="fruit-input"><%= t(
    "components.combobox.demo.label"
  ) %></label>
  <input
    id="fruit-input"
    type="text"
    class="combobox__input"
    role="combobox"
    aria-expanded="false"
    aria-autocomplete="list"
    aria-controls="fruit-list"
    autocomplete="off"
    data-stimeo--combobox-target="input"
    data-action="input->stimeo--combobox#filter
                 keydown->stimeo--combobox#onKeydown
                 focus->stimeo--combobox#open
                 click->stimeo--combobox#open">

  <ul
    id="fruit-list"
    class="combobox__list"
    role="listbox"
    aria-labelledby="fruit-label"
    data-stimeo--combobox-target="list"
    hidden>
    <% %w[apple apricot banana cherry].each do |fruit| %>
      <% label = t("components.combobox.demo.fruits.#{fruit}") %>
      <li role="option" id="fruit-<%= fruit %>" class="combobox__option" data-value="<%= label %>"
          data-stimeo--combobox-target="option"
          data-action="click->stimeo--combobox#select"><%= label %></li>
    <% end %>
  </ul>

  <%# The no-results message is a region of the empty state: the library shows it while the
      open listbox has no match and hides it otherwise, so it is authored hidden. Copy via
      i18n. %>
  <div
    class="combobox__empty"
    data-stimeo--combobox-target="empty"
    hidden><%= t("components.combobox.demo.empty") %></div>
</div>

/*
 * Presentation-only styles for the combobox demo.
 * The active option is highlighted via aria-selected (set by the library).
 */

.combobox {
  position: relative;
  display: inline-block;
  width: min(20rem, 100%);
}

.combobox__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.combobox__input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--border-interactive);
  border-radius: 0.375rem;
}

.combobox__list {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 12rem;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.combobox__option {
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.combobox__option[aria-selected="true"] {
  background: var(--accent);
  color: var(--white);
}

/*
 * The no-results message from the ERB (copy lives in the locale files). The library owns
 * its hidden attribute and shows it only while there are no matches, so what this file
 * gives it is the surface, not its visibility.
 */
.combobox__empty {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  color: var(--muted);
  font-size: 0.875rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/*
 * While there are no matches the library sets data-stimeo--combobox-empty on the root.
 * Dropping the list is this demo's own choice: the message takes its place instead of
 * sitting under an empty popup.
 */
.combobox[data-stimeo--combobox-empty] .combobox__list {
  display: none;
}