Multi Select

<%# Markup for the multi-select (multiple-selection combobox) demo.
    Filter candidates as you type, select several, and show the selected ones as chips.
    Focus stays on the input; the active candidate is shown via aria-activedescendant
    and selection via aria-selected. The library handles filtering, multi-select
    toggling, chip create/remove, roving, dismiss, and the selection announcements read
    by the shared stimeo--announcer your app seats once, in its layout (selecting and
    removing a value are the transitions worth reading; the multi-select owns no live
    region of its own). Placement lives in demo.css. %>
<% announce_selected = t("components.multi_select.demo.announce_selected") %>
<% announce_removed = t("components.multi_select.demo.announce_removed") %>
<% remove_label = t("components.multi_select.demo.remove_label") %>
<div
  class="multi-select"
  data-controller="stimeo--multi-select"
  data-stimeo--multi-select-announce-text-value="<%= announce_selected %>"
  data-stimeo--multi-select-announce-removed-text-value="<%= announce_removed %>">
  <span id="multi-select-label" class="multi-select__label">
    <%= t("components.multi_select.demo.label") %>
  </span>

  <ul
    class="multi-select__tags"
    aria-label="<%= t("components.multi_select.demo.selected_label") %>"
    data-stimeo--multi-select-target="tags"></ul>

  <input
    type="text"
    class="multi-select__input"
    role="combobox"
    aria-expanded="false"
    aria-autocomplete="list"
    aria-controls="multi-select-list"
    aria-labelledby="multi-select-label"
    placeholder="<%= t("components.multi_select.demo.placeholder") %>"
    data-stimeo--multi-select-target="input"
    data-action="input->stimeo--multi-select#filter
                 keydown->stimeo--multi-select#onKeydown
                 focus->stimeo--multi-select#open" />

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

  <template data-stimeo--multi-select-target="tagTemplate">
    <li class="multi-select__tag" data-stimeo--multi-select-target="tag">
      <span data-stimeo--multi-select-target="label"></span>
      <%# Removal is handled by a delegated listener on the tags container, so it
          works instantly without waiting on Stimulus wiring a data-action onto the
          dynamically-added button. %>
      <button
        type="button"
        class="multi-select__remove"
        tabindex="-1"
        aria-label="<%= remove_label %>"
        data-stimeo--multi-select-target="remove">×</button>
    </li>
  </template>
</div>

/*
 * Presentation-only styles for the multi-select demo.
 * The library toggles the list's hidden, options' aria-selected, and the active
 * candidate's data-active. Creating/removing chips and roving are the library's
 * job too. The list's static placement (directly below the input) is the
 * consumer's CSS; dynamic flip is via stimeo-ui/positioning.
 */

.multi-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 18rem;
}

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

.multi-select__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.multi-select__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--vital-100);
  color: var(--vital-800);
  font-size: 0.8125rem;
}

.multi-select__remove {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.multi-select__remove:focus-visible {
  outline: 2px solid var(--accent, var(--color-primary));
  outline-offset: 2px;
  border-radius: 50%;
}

.multi-select__input {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  background: var(--surface, var(--surface-card));
  color: var(--fg, var(--color-text));
  font: inherit;
}

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

.multi-select__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 14rem;
  overflow-y: auto;
  margin: 0.25rem 0 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);
}

.multi-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.multi-select__option[hidden] {
  display: none;
}

/* A theme-aware soft accent surface, not the raw `--vital-100`: this rule sets a
   background but lets the text inherit `--color-text`, which flips with the theme.
   A fixed light mint therefore paired light text on light in dark mode — measured
   1.02:1, i.e. the row the keyboard is on was effectively invisible. */
.multi-select__option[data-active] {
  background: var(--color-primary-soft);
}

/* `--accent-800`, one step stronger than the plain accent text token: this text can
   land on the tinted active/selected surface as well as the card, and on the tinted
   one in dark `--accent-700` measures 4.44:1 — just under the floor. */
.multi-select__option[aria-selected="true"]::after {
  content: "✓";
  color: var(--accent-800);
}

.multi-select[data-stimeo--multi-select-empty] .multi-select__list::after {
  content: "—";
  display: block;
  padding: 0.45rem 0.6rem;
  color: var(--color-text-subtle);
}