Progress

<%# Markup for the progress (progress bar) demo.
    The library syncs role="progressbar" and aria-value*, and exposes the ratio as
    --stimeo--progress-ratio (0–1). The bar's width and color live in demo.css.
    Completion is handed to the shared stimeo--announcer your app seats once, in its
    layout — aria-valuenow is state a reader can query, not a notification, so reaching
    the end is the one thing read out.
    The control buttons sit outside the progressbar (a progressbar must not contain
    interactive children), so they can't drive it through a Stimulus data-action —
    that only binds inside the controller's own element. Instead they dispatch the
    progress:set CustomEvent the controller listens for (see demo.js), the same
    contract a consumer would use to update progress from elsewhere. %>
<div class="progress-demo">
  <div
    class="progress"
    data-controller="stimeo--progress"
    role="progressbar"
    aria-label="<%= t('components.progress.demo.label') %>"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="40"
    data-stimeo--progress-value-value="40"
    data-stimeo--progress-value-text-value="<%= t('components.progress.demo.value_text') %>"
    data-stimeo--progress-announce-text-value="<%=
      t('components.progress.demo.announce_complete') %>"
    data-action="progress:set->stimeo--progress#setValue">
    <div class="progress__bar" data-stimeo--progress-target="bar"></div>
  </div>

  <div
    class="progress-demo__controls"
    role="group"
    aria-label="<%= t('components.progress.demo.controls_label') %>">
    <% [0, 25, 50, 75, 100].each do |amount| %>
      <button
        class="demo-trigger"
        type="button"
        data-progress-amount="<%= amount %>">
        <%= amount %>%
      </button>
    <% end %>
  </div>

  <%# Indeterminate example: drop aria-valuenow and let the consumer apply a looping
      animation via data-state="indeterminate". %>
  <div
    class="progress progress--indeterminate"
    data-controller="stimeo--progress"
    role="progressbar"
    aria-label="<%= t('components.progress.demo.indeterminate_label') %>"
    aria-valuemin="0"
    aria-valuemax="100"
    data-stimeo--progress-indeterminate-value="true">
    <div class="progress__bar" data-stimeo--progress-target="bar"></div>
  </div>
</div>

/*
 * Presentation-only styles for the progress demo.
 * The bar width is derived from --stimeo--progress-ratio (0–1) exposed by the
 * library; the indeterminate state is detected via data-state="indeterminate" to
 * apply a looping animation.
 */

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

.progress {
  height: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-subtle);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  /* Convert the 0–1 ratio into a percentage width. */
  width: calc(var(--stimeo--progress-ratio, 0) * 100%);
  transition: width 0.25s ease;
}

/* Indeterminate: fix the width and slide it back and forth to signal "working". */
.progress--indeterminate[data-state="indeterminate"] .progress__bar {
  width: 40%;
  animation: progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

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

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

  .progress--indeterminate[data-state="indeterminate"] .progress__bar {
    animation: none;
  }
}

// progress external-update demo (consumer-side JS).
//
// The core controller (stimeo--progress) syncs the ARIA value attributes and the
// --stimeo--progress-ratio custom property; it does not own any buttons. A
// progressbar must not contain interactive children, so the preset buttons live
// next to it rather than inside it — which means a Stimulus data-action on them
// would never bind (actions only wire up within the controller's own element).
// The contract for updating from outside is the progress:set event, so here each
// button fires progress:set with its target value on the progressbar element.
document.querySelectorAll(".progress-demo").forEach((root) => {
  const bar = root.querySelector(
    '.progress:not(.progress--indeterminate)[data-controller~="stimeo--progress"]',
  );
  const controls = root.querySelector(".progress-demo__controls");
  if (!bar || !controls) return;

  controls.querySelectorAll("[data-progress-amount]").forEach((button) => {
    button.addEventListener("click", () => {
      const value = Number(button.getAttribute("data-progress-amount"));
      bar.dispatchEvent(new CustomEvent("progress:set", { detail: { value } }));
    });
  });
});