Selector

Live examples will be added when the component is implemented.

<!-- Single-select selector group (roving tabindex pattern) -->
<fieldset role="radiogroup" aria-labelledby="consult-type-label">
  <legend id="consult-type-label">Select a consultation type</legend>
  <div class="selector-grid">

    <!-- Selected tile -->
    <div
      class="selector-tile selector-tile--selected"
      role="radio"
      aria-checked="true"
      tabindex="0"
    >
      <wa-icon name="clipboard-list" aria-hidden="true"></wa-icon>
      <span class="selector-tile__label">Online survey</span>
      <span class="selector-tile__description">Structured questions, scalable responses</span>
    </div>

    <!-- Unselected tile -->
    <div
      class="selector-tile"
      role="radio"
      aria-checked="false"
      tabindex="-1"
    >
      <wa-icon name="users" aria-hidden="true"></wa-icon>
      <span class="selector-tile__label">Workshop</span>
      <span class="selector-tile__description">Facilitated group discussion</span>
    </div>

    <!-- Disabled tile -->
    <div
      class="selector-tile selector-tile--disabled"
      role="radio"
      aria-checked="false"
      aria-disabled="true"
      tabindex="-1"
    >
      <wa-icon name="phone" aria-hidden="true"></wa-icon>
      <span class="selector-tile__label">Phone consultation</span>
      <span class="selector-tile__description">Not available on this plan</span>
    </div>

  </div>
</fieldset>

<!-- Multi-select selector group with group-level error -->
<fieldset
  role="group"
  aria-labelledby="channels-label"
  aria-describedby="channels-error"
>
  <legend id="channels-label">Enable engagement channels</legend>
  <div class="selector-grid">

    <div
      class="selector-tile selector-tile--selected"
      role="checkbox"
      aria-checked="true"
      tabindex="0"
    >
      <wa-icon name="envelope" aria-hidden="true"></wa-icon>
      <span class="selector-tile__label">Email</span>
    </div>

    <div
      class="selector-tile"
      role="checkbox"
      aria-checked="false"
      tabindex="0"
    >
      <wa-icon name="message" aria-hidden="true"></wa-icon>
      <span class="selector-tile__label">SMS</span>
    </div>

  </div>
  <!-- Group-level error: colour + icon, never colour alone -->
  <div id="channels-error" class="selector-error" role="alert">
    <wa-icon name="circle-exclamation" aria-hidden="true"></wa-icon>
    Select at least one engagement channel to continue.
  </div>
</fieldset>

/* Selector component styles */
.selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--op-space-12);
}

.selector-tile {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-4);
  padding: var(--op-space-16);
  min-height: 80px;
  border: 1px solid var(--orbit-border);
  border-radius: var(--op-radius-md);
  background: var(--op-color-bg-primary);
  cursor: pointer;
  transition: background var(--op-transition-fast), border-color var(--op-transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .selector-tile {
    transition: none;
  }
}

.selector-tile:hover {
  background: var(--op-color-bg-secondary);
  border-color: var(--op-color-interactive-hover);
}

.selector-tile:focus-visible {
  outline: 3px solid var(--op-color-interactive-focus);
  outline-offset: 2px;
}

.selector-tile--selected {
  border: 2px solid var(--op-color-interactive-default);
}

.selector-tile--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.selector-tile__label {
  font-size: var(--op-text-sm);
  font-weight: 600;
  color: var(--op-color-text-primary);
}

.selector-tile__description {
  font-size: var(--op-text-xs);
  color: var(--op-color-text-secondary);
}

.selector-error {
  display: flex;
  align-items: center;
  gap: var(--op-space-8);
  margin-top: var(--op-space-8);
  font-size: var(--op-text-sm);
  color: var(--op-color-status-error);
}

// Minimal roving tabindex for single-select
const group = document.querySelector('[role="radiogroup"]');
const tiles = [...group.querySelectorAll('[role="radio"]')];

group.addEventListener('keydown', (e) => {
  const current = tiles.indexOf(document.activeElement);
  let next = current;
  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (current + 1) % tiles.length;
  if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (current - 1 + tiles.length) % tiles.length;
  if (next !== current) {
    tiles[current].setAttribute('tabindex', '-1');
    tiles[current].setAttribute('aria-checked', 'false');
    tiles[next].setAttribute('tabindex', '0');
    tiles[next].setAttribute('aria-checked', 'true');
    tiles[next].focus();
    e.preventDefault();
  }
});

tiles.forEach((tile) => {
  tile.addEventListener('click', () => {
    tiles.forEach((t) => { t.setAttribute('aria-checked', 'false'); t.setAttribute('tabindex', '-1'); });
    tile.setAttribute('aria-checked', 'true');
    tile.setAttribute('tabindex', '0');
  });
});