数値入力

<%# 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. %>
<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" 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>

/*
 * 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);
}

.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;
}