数値入力

<%# Markup for the number-input (APG Spinbutton) demo.
    Increment/decrement buttons and the arrow keys step by `step`, clamped to min/max.
    The input is the only tab stop (buttons are tabindex="-1"); a button is disabled at
    its boundary.

    The widget owns the stepping, so it reports a step the way the browser reports its
    own: a bubbling `input` then a bubbling `change` on its own input. That is why the
    surrounding `stimeo--auto-submit` reacts to a button or an arrow key with nothing
    wired between them. %>
<form class="number-input-demo__form"
      data-controller="stimeo--auto-submit"
      data-stimeo--auto-submit-debounce-value="400"
      data-action="change->stimeo--auto-submit#submit">
<div class="number-input-demo" data-controller="stimeo--number-input"
     data-stimeo--number-input-min-value="0"
     data-stimeo--number-input-max-value="10"
     data-stimeo--number-input-step-value="1">
  <button type="button" class="number-input-demo__btn"
          aria-label="<%= t('components.number_input.demo.decrease') %>" tabindex="-1"
          data-stimeo--number-input-target="decrement"
          data-action="click->stimeo--number-input#decrement">
    <svg class="demo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
  </button>

  <input type="number" class="number-input-demo__input" name="quantity"
         min="0" max="10" step="1" value="1"
         aria-label="<%= t('components.number_input.demo.quantity') %>"
         data-stimeo--number-input-target="input"
         data-action="change->stimeo--number-input#onInput
                      keydown->stimeo--number-input#onKeydown" />

  <button type="button" class="number-input-demo__btn"
          aria-label="<%= t('components.number_input.demo.increase') %>" tabindex="-1"
          data-stimeo--number-input-target="increment"
          data-action="click->stimeo--number-input#increment">
    <svg class="demo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="12" y1="5" x2="12" y2="19"></line>
      <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
  </button>
</div>
</form>

<%# The readout is aria-hidden: the value is already in the field the screen reader
    reads, so repeating it here would say it twice. The value is a code fragment
    (API identifiers and values), so only the label is translated. %>
<p class="demo-readout" aria-hidden="true">
  <span><%= t("catalog.readout.field") %></span>
  <span class="demo-readout__value" data-readout
        data-empty-text="<%= t("catalog.readout.empty") %>">—</span>
</p>

/*
 * Presentation-only styles for the number-input demo.
 * Disabling at the boundary is expressed with native :disabled (the library sets disabled).
 */

.number-input-demo {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-interactive);
  border-radius: 0.375rem;
  overflow: hidden;
}

.number-input-demo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  color: var(--fg);
  background: var(--bg);
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.number-input-demo__btn:hover:not(:disabled) {
  background: var(--color-primary-soft);
  color: var(--accent-700);
}

.number-input-demo__btn:disabled {
  color: var(--slate-300);
  cursor: not-allowed;
}

.number-input-demo__input {
  width: 3.5rem;
  padding: 0.5rem 0.25rem;
  font-size: 1rem;
  text-align: center;
  color: var(--fg);
  background: var(--bg);
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  /* Hide the native spin buttons (this demo uses its own buttons). */
  -moz-appearance: textfield;
  appearance: textfield;
}

.number-input-demo__input::-webkit-outer-spin-button,
.number-input-demo__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input-demo__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.number-input-demo__btn .demo-icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* The form only groups the widget with the auto-submit controller; it adds no box. */
.number-input-demo__form {
  display: contents;
}

// Consumer-side JS for the number-input demo (demo-only).
//
// The widget owns the stepping, so a button, an arrow key or a press-and-hold is a
// value it wrote itself — and it reports that the way the browser reports its own:
// a bubbling `input` then a bubbling `change` on its own input. The surrounding
// `stimeo--auto-submit` therefore reacts without knowing what this component is.
//
// This Playground has no endpoint, so the native submit is cancelled and the Turbo
// lifecycle is finished with a synthetic `turbo:submit-end` (which is what clears
// the controller's `aria-busy` and emits `stimeo--auto-submit:done`). The readout
// then shows exactly what would have been submitted.
const demoStage = document.querySelector(".demo-stage") ?? document;
const form = demoStage.querySelector(".number-input-demo__form");
const readout = demoStage.querySelector("[data-readout]");

const submitted = () => {
  const field = form?.querySelector("[name]");
  if (!field?.name) return readout?.dataset.emptyText ?? "";
  return `${field.name}=${field.value}`;
};

if (form) {
  form.addEventListener("submit", (event) => {
    event.preventDefault(); // No real navigation in the demo.
    if (readout) readout.textContent = submitted();
    // Complete the Turbo cycle the controller is waiting on (clears aria-busy).
    form.dispatchEvent(new CustomEvent("turbo:submit-end"));
  });
}