Currency Input

<%# Markup for the currency-input demo.
    stimeo--currency-input formats thousands separators (while typing / on blur) and
    rounds decimals, keeping the normalized number in a submit hidden input. It
    separates the formatted display from the machine-readable value, and has assistive
    tech announce the normalized actual value (srValue) via aria-describedby. %>
<div
  class="currency-input"
  data-controller="stimeo--currency-input"
  data-stimeo--currency-input-locale-value="<%= t("components.currency_input.demo.locale") %>"
  data-stimeo--currency-input-currency-value="<%= t("components.currency_input.demo.currency") %>"
  data-stimeo--currency-input-precision-value="<%= t(
    "components.currency_input.demo.precision"
  ) %>">
  <label class="currency-input__label" for="currency-amount">
    <%= t("components.currency_input.demo.label") %>
  </label>
  <div class="currency-input__field">
    <span class="currency-input__symbol" aria-hidden="true">
      <%= t("components.currency_input.demo.symbol") %>
    </span>
    <input
      id="currency-amount"
      class="currency-input__input"
      type="text"
      inputmode="decimal"
      value="1234.5"
      aria-describedby="currency-amount-unit currency-amount-sr"
      data-stimeo--currency-input-target="display"
      data-action="input->stimeo--currency-input#onInput
                   blur->stimeo--currency-input#format" />
    <span id="currency-amount-unit" class="currency-input__unit">
      <%= t("components.currency_input.demo.unit") %>
    </span>
  </div>

  <%# Channel that conveys the normalized actual value to assistive tech (visually hidden). %>
  <span id="currency-amount-sr" class="visually-hidden"
        data-stimeo--currency-input-target="srValue"></span>

  <input type="hidden" name="amount" data-stimeo--currency-input-target="field" />
</div>

/*
 * Presentation-only styles for the currency-input demo.
 * The library handles the formatting logic; the input and currency-symbol look are
 * defined here.
 */

.currency-input {
  width: min(20rem, 100%);
}

.currency-input__label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
}

.currency-input__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface, var(--surface-card));
}

.currency-input__field:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.currency-input__symbol,
.currency-input__unit {
  color: var(--text-muted, var(--color-text-muted));
}

.currency-input__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.currency-input__input:focus {
  outline: none;
}

// Demo that subscribes to the currency-input change event to inspect the normalized
// number that gets submitted. The display uses thousands separators, while the hidden
// input holds the unseparated number.
document.querySelectorAll('[data-controller~="stimeo--currency-input"]').forEach((root) => {
  root.addEventListener('stimeo--currency-input:change', (e) => {
    // In real use, e.detail.value (the number) feeds form submission or aggregation.
    console.log('currency value:', e.detail.value, 'formatted:', e.detail.formatted);
  });
});