Listbox

<%# Markup for the listbox demo.
    Pressing the role="combobox" trigger opens a role="listbox"; arrows / typeahead
    navigate the options to pick one. Focus stays on the trigger and the active option
    is shown via aria-activedescendant. The library handles open/close, option
    movement, single selection, reflecting into the trigger label and hidden input, and
    closing on Escape / outside click. Static placement is in demo.css. %>
<div class="listbox" data-controller="stimeo--listbox">
  <span id="listbox-label" class="listbox__label"><%= t("components.listbox.demo.label") %></span>
  <button
    type="button"
    class="listbox__trigger"
    role="combobox"
    aria-haspopup="listbox"
    aria-expanded="false"
    aria-controls="listbox-options"
    aria-labelledby="listbox-label listbox-value"
    data-stimeo--listbox-target="trigger"
    data-action="click->stimeo--listbox#toggle keydown->stimeo--listbox#onTriggerKeydown">
    <span id="listbox-value" data-stimeo--listbox-target="value">
      <%= t("components.listbox.demo.placeholder") %>
    </span>
    <span class="listbox__chevron" aria-hidden="true">▾</span>
  </button>

  <ul
    id="listbox-options"
    class="listbox__list"
    role="listbox"
    aria-label="<%= t("components.listbox.demo.label") %>"
    hidden
    data-stimeo--listbox-target="list">
    <% %w[apple banana cherry grape orange].each_with_index do |fruit, index| %>
      <li
        id="listbox-opt-<%= index %>"
        class="listbox__option"
        role="option"
        aria-selected="false"
        data-value="<%= fruit %>"
        data-stimeo--listbox-target="option"
        data-action="click->stimeo--listbox#select">
        <%= t("components.listbox.demo.options.#{fruit}") %>
      </li>
    <% end %>
  </ul>

  <input type="hidden" name="fruit" data-stimeo--listbox-target="field" />
</div>

/*
 * Presentation-only styles for the listbox demo.
 * The library toggles the list's hidden, options' aria-selected, and the active
 * candidate's data-active highlight. Placement (directly below the trigger) is static
 * and the consumer's CSS responsibility; use stimeo-ui/positioning for dynamic flip.
 */

.listbox {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 14rem;
}

.listbox__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg, var(--color-text));
}

.listbox__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  background: var(--surface, var(--surface-card));
  color: var(--fg, var(--color-text));
  font: inherit;
  cursor: pointer;
}

.listbox__trigger[aria-expanded="true"] {
  border-color: var(--accent, var(--color-primary));
}

.listbox__chevron {
  color: var(--color-text-muted);
}

.listbox__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface, var(--surface-card));
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
}

.listbox__option {
  padding: 0.45rem 0.6rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.listbox__option[data-active] {
  background: var(--vital-100);
}

.listbox__option[aria-selected="true"] {
  font-weight: 600;
  color: var(--accent, var(--color-primary));
}

.listbox__option[aria-selected="true"]::after {
  content: "✓";
  margin-left: 0.4rem;
}