時刻選択

<%# Markup for the time-picker (time selection) demo.
    stimeo--time-picker treats each segment (hour / minute / AM·PM) as an APG Spinbutton,
    handling arrow-key increment/decrement, edge wrap and carry (minute→hour), left/right
    segment movement, and direct numeric entry, and reflects the composed 24-hour value
    (HH:MM) into a hidden input. Each segment is an independent tab stop. %>
<div
  class="time-picker"
  data-controller="stimeo--time-picker"
  data-stimeo--time-picker-hour-cycle-value="12"
  data-stimeo--time-picker-step-value="5"
  role="group"
  aria-label="<%= t("components.time_picker.demo.group_label") %>">
  <span class="time-picker__segment" role="spinbutton"
        aria-label="<%= t("components.time_picker.demo.hours") %>"
        tabindex="0" aria-valuenow="9" aria-valuemin="1" aria-valuemax="12" aria-valuetext="09"
        data-segment="hour" data-stimeo--time-picker-target="segment"
        data-action="keydown->stimeo--time-picker#onKeydown">09</span>
  <span class="time-picker__colon" aria-hidden="true">:</span>
  <span class="time-picker__segment" role="spinbutton"
        aria-label="<%= t("components.time_picker.demo.minutes") %>"
        tabindex="0" aria-valuenow="30" aria-valuemin="0" aria-valuemax="59" aria-valuetext="30"
        data-segment="minute" data-stimeo--time-picker-target="segment"
        data-action="keydown->stimeo--time-picker#onKeydown">30</span>
  <span class="time-picker__segment time-picker__segment--meridiem" role="spinbutton"
        aria-label="<%= t("components.time_picker.demo.meridiem") %>"
        tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="1" aria-valuetext="AM"
        data-segment="meridiem" data-stimeo--time-picker-target="segment"
        data-action="keydown->stimeo--time-picker#onKeydown">AM</span>

  <input type="hidden" name="time" data-stimeo--time-picker-target="field" />
</div>

/*
 * Presentation-only styles for the time-picker demo.
 * Each segment is an independent spinbutton (tab stop). Formatting and composition are
 * the library's.
 */

.time-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface, var(--surface-card));
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
}

.time-picker__segment {
  min-width: 1.75rem;
  padding: 0.125rem 0.25rem;
  text-align: center;
  border-radius: 0.25rem;
  cursor: ns-resize;
  user-select: none;
}

.time-picker__segment--meridiem {
  margin-left: 0.375rem;
  cursor: pointer;
}

/* Invert the focused segment on :focus (not just :focus-visible) so a mouse click —
   not only keyboard focus — clearly shows which segment the arrow keys / typing act on. */
.time-picker__segment:focus {
  outline: none;
  background: var(--accent);
  color: var(--white);
}

.time-picker__colon {
  color: var(--text-muted, var(--color-text-muted));
}

// Demo that subscribes to the time-picker change event to inspect the composed 24-hour
// value (HH:MM). Shows that even when operated in 12-hour mode (AM/PM), the hidden input
// holds the 24-hour value.
document.querySelectorAll('[data-controller~="stimeo--time-picker"]').forEach((root) => {
  root.addEventListener('stimeo--time-picker:change', (e) => {
    // In real use, e.detail.value ("HH:MM") feeds form submission, etc.
    console.log('time value (24h):', e.detail.value);
  });
});