ダイアログ

<%# Markup for the dialog demo.
    The single source used for both the live render and the copy-paste code.
    stimeo--dialog provides the focus trap, Esc, and background scroll lock.
    The behavior is the library's; the look (classes) is the Playground's CSS. %>
<div class="dialog" data-controller="stimeo--dialog">
  <button
    type="button"
    class="dialog__trigger"
    data-stimeo--dialog-target="trigger"
    data-action="click->stimeo--dialog#open">
    <%= t("components.dialog.demo.open_button") %>
  </button>

  <%# The role="dialog" + aria-modal region. Starts hidden (closed).
       Clicking this element itself (the backdrop) also closes it. %>
  <div
    class="dialog__backdrop"
    role="dialog"
    aria-modal="true"
    aria-labelledby="dialog-title"
    data-stimeo--dialog-target="dialog"
    data-action="click->stimeo--dialog#closeOnBackdrop"
    hidden>
    <div class="dialog__panel">
      <h3 id="dialog-title" class="dialog__title"><%= t(
        "components.dialog.demo.confirm_title"
      ) %></h3>
      <p><%= t("components.dialog.demo.confirm_desc") %></p>
      <div class="dialog__actions">
        <button type="button" data-action="click->stimeo--dialog#close"><%= t(
          "components.dialog.demo.cancel"
        ) %></button>
        <button type="button" data-action="click->stimeo--dialog#close"><%= t(
          "components.dialog.demo.ok"
        ) %></button>
      </div>
    </div>
  </div>
</div>

/*
 * Presentation-only styles for the dialog demo.
 * Stimeo UI itself ships behavior only (no CSS), so the styling lives here.
 */

.dialog__trigger {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--border-interactive);
  border-radius: 0.375rem;
  background: var(--surface-card);
}

/* Use the role="dialog" region as a centered backdrop. */
.dialog__backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
}

/* Setting display explicitly overrides the hidden attribute's default display:none, so
   re-declare display:none while closed to honor the library's hidden control. */
.dialog__backdrop[hidden] {
  display: none;
}

.dialog__panel {
  width: min(28rem, 100%);
  padding: 1.5rem;
  background: var(--bg);
  border-radius: 0.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.dialog__title {
  margin: 0 0 0.5rem;
}

.dialog__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.dialog__actions button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface-card);
}

.dialog__actions button:last-child {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
}