Spinner

<%# Markup for the spinner (loading indicator) demo.
    The indicator is the visual half — its text plus a spinner marked aria-hidden="true" —
    and the controlled region reflects aria-busy. An indicator revealed at the moment of
    the change is not reliably read, so the loading / ready wording goes to the shared
    stimeo--announcer your app seats once, in its layout, and is said exactly once
    (loading ↔ ready is the transition worth reading; aria-busy is state the reader can
    query, not a notification). A show delay and a minimum display time suppress flicker.
    The Start/Stop buttons call the controller's methods directly. %>
<div
  class="spinner-demo"
  data-controller="stimeo--spinner"
  data-stimeo--spinner-delay-value="150"
  data-stimeo--spinner-min-duration-value="600"
  data-stimeo--spinner-announce-text-value="<%= t("components.spinner.demo.loading") %>"
  data-stimeo--spinner-announce-ready-text-value="<%=
    t("components.spinner.demo.announce_ready") %>">
  <div class="spinner-demo__controls">
    <button
      class="demo-trigger"
      type="button"
      data-action="click->stimeo--spinner#start">
      <%= t("components.spinner.demo.start") %>
    </button>
    <button
      class="demo-trigger"
      type="button"
      data-action="click->stimeo--spinner#stop">
      <%= t("components.spinner.demo.stop") %>
    </button>
  </div>

  <p class="spinner-demo__hint"><%= t("components.spinner.demo.hint") %></p>

  <%# Visual only: the announcer says this once, so a live region here would repeat it. %>
  <div
    class="spinner"
    hidden
    data-stimeo--spinner-target="indicator">
    <span class="spinner__icon" aria-hidden="true"></span>
    <span data-stimeo--spinner-target="message"><%= t("components.spinner.demo.loading") %></span>
  </div>

  <div
    class="spinner-demo__region"
    aria-busy="false"
    data-stimeo--spinner-target="region">
    <%= t("components.spinner.demo.content") %>
  </div>
</div>

/*
 * Presentation-only styles for the spinner demo.
 * This CSS owns the visual spinner's rotation; the library only toggles
 * hidden / aria-busy / data-state (idle / pending / loading).
 */

.spinner-demo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 32rem;
}

.spinner-demo__controls {
  display: flex;
  gap: 0.5rem;
}

/* Explanatory caption: clarifies the intentional delay / minimum-display timing. */
.spinner-demo__hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--fg);
}

.spinner__icon {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rotate 0.7s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.spinner-demo__region {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 0.375rem;
  color: var(--fg);
}

/* Dim the target region while loading so the visual matches aria-busy. */
.spinner-demo__region[aria-busy="true"] {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .spinner__icon {
    animation: none;
  }
}