入力マスク

<%# Markup for the input mask demo.
    The controller formats the field in place against the pattern (9=digit), inserts
    the separators, rejects non-digits, preserves the caret, and syncs the raw value
    to the hidden field. demo.js mirrors that hidden raw value (and the complete flag)
    into the visible readout below, since the unmask field is hidden. %>
<div class="mask-demo">
  <form class="mask-demo__form">
    <label class="mask-demo__field">
      <span><%= t("components.input_mask.demo.label") %></span>
      <input type="text" class="demo-input" inputmode="numeric"
             data-controller="stimeo--input-mask"
             data-stimeo--input-mask-pattern-value="(999) 999-9999"
             data-action="input->stimeo--input-mask#format"
             aria-describedby="mask-hint"
             placeholder="<%= t("components.input_mask.demo.placeholder") %>">
      <input type="hidden" name="phone" data-stimeo--input-mask-unmask>
    </label>
    <p id="mask-hint" class="mask-demo__hint"><%= t("components.input_mask.demo.hint") %></p>
  </form>

  <p class="mask-demo__raw"
     data-empty="<%= t("components.input_mask.demo.empty") %>"
     data-complete="<%= t("components.input_mask.demo.complete") %>">
    <%= t("components.input_mask.demo.raw_label") %>
    <code data-mask-demo="raw"><%= t("components.input_mask.demo.empty") %></code>
    <span data-mask-demo="status"></span>
  </p>
</div>

/*
 * Presentation-only styles for the input mask demo.
 * The library formats the value, preserves the caret, and reflects
 * data-mask-complete / data-mask-empty; this CSS owns layout and the readout, and
 * can react to the completion flag for a finished-state affordance.
 */

.mask-demo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
}

.mask-demo__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* The library marks a fully-filled mask with data-mask-complete. */
.mask-demo .demo-input[data-mask-complete] {
  border-color: var(--leaf-500);
}

.mask-demo__hint {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.mask-demo__raw {
  margin: 0;
  font-size: 0.9rem;
}

.mask-demo__raw code {
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--surface-subtle);
  font-family: ui-monospace, monospace;
}

// Consumer-side JS for the input mask demo (demo-only).
// The raw (unmasked) value the controller syncs lives in a hidden field, so this
// mirrors it into a visible readout from the change event, and shows a "complete"
// note when every slot is filled. Localized strings come from data attributes.
const readout = document.querySelector(".mask-demo__raw");
const raw = document.querySelector("[data-mask-demo='raw']");
const status = document.querySelector("[data-mask-demo='status']");

if (readout && raw) {
  const render = (event) => {
    const { unmasked, complete } = event.detail;
    raw.textContent = unmasked || readout.dataset.empty;
    if (status) status.textContent = complete ? ` ${readout.dataset.complete}` : "";
  };
  // change carries your edits; reconcile carries a value the controller decided
  // (a server-rendered value normalized on connect), and both share the detail.
  document.addEventListener("stimeo--input-mask:change", render);
  document.addEventListener("stimeo--input-mask:reconcile", render);
}