Meter

<%# Markup for the meter demo.
    Syncs role="meter" and aria-value*, and classifies data-state into low/medium/high
    via the low/high thresholds. demo.css applies color based on data-state.
    aria-valuetext is generated by the library from the {percent}/{state} template.
    Only a move into another segment reaches the shared stimeo--announcer your app seats
    once, in its layout — reading every value would be unusable.
    Like a progressbar, a meter must not contain interactive children, so the preset
    buttons sit beside it and update it through the meter:set CustomEvent the
    controller listens for (see demo.js) rather than a Stimulus data-action, which
    only binds within the controller's own element. %>
<div class="meter-demo">
  <div
    class="meter"
    data-controller="stimeo--meter"
    role="meter"
    aria-label="<%= t('components.meter.demo.label') %>"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="72"
    data-stimeo--meter-value-value="72"
    data-stimeo--meter-low-value="50"
    data-stimeo--meter-high-value="80"
    data-stimeo--meter-value-text-value="<%= t('components.meter.demo.value_text') %>"
    data-stimeo--meter-announce-text-value="<%= t('components.meter.demo.announce_state') %>"
    data-action="meter:set->stimeo--meter#setValue">
    <div class="meter__bar" data-stimeo--meter-target="bar"></div>
  </div>

  <div class="meter-demo__controls" role="group"
       aria-label="<%= t('components.meter.demo.controls_label') %>">
    <% [20, 65, 90].each do |amount| %>
      <button
        class="demo-trigger"
        type="button"
        data-meter-amount="<%= amount %>">
        <%= amount %>
      </button>
    <% end %>
  </div>
</div>

/*
 * Presentation-only styles for the meter demo.
 * The bar width comes from --stimeo--meter-ratio (0–1) and its color from the
 * data-state band (low / medium / high). aria-valuetext is used alongside color
 * so meaning never relies on color alone.
 */

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

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

.meter__bar {
  height: 100%;
  border-radius: inherit;
  width: calc(var(--stimeo--meter-ratio, 0) * 100%);
  background: var(--slate-500);
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}

.meter[data-state="low"] .meter__bar {
  background: var(--leaf-500);
}

.meter[data-state="medium"] .meter__bar {
  background: var(--amber-500);
}

.meter[data-state="high"] .meter__bar {
  background: var(--danger-500);
}

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

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

// meter external-update demo (consumer-side JS).
//
// The core controller (stimeo--meter) syncs the ARIA value attributes and the
// low/medium/high data-state; it does not own any buttons. A meter must not
// contain interactive children, so the preset buttons live next to it, and 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
// meter:set event, so here each button fires meter:set with its value.
document.querySelectorAll(".meter-demo").forEach((root) => {
  const meter = root.querySelector('.meter[data-controller~="stimeo--meter"]');
  const controls = root.querySelector(".meter-demo__controls");
  if (!meter || !controls) return;

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