ディスミッシブル

<%# Markup for the dismissible (element dismissed via a close button) demo.
    The close button (or Escape) removes the element, and if focus was inside before
    removal it is moved to a safe place (fallback → next/previous focusable → body).
    Here it uses hide mode (adds hidden) and allows closing with Escape too.
    Semantics like role="status" are the consumer markup's responsibility. %>
<div
  class="dismissible"
  data-controller="stimeo--dismissible"
  data-stimeo--dismissible-mode-value="hide"
  data-stimeo--dismissible-close-on-escape-value="true">
  <div
    class="dismissible__banner"
    role="status"
    data-stimeo--dismissible-target="root">
    <span class="dismissible__icon" aria-hidden="true">✓</span>
    <p class="dismissible__message"><%= t("components.dismissible.demo.message") %></p>
    <button
      class="dismissible__close"
      type="button"
      aria-label="<%= t('components.dismissible.demo.close') %>"
      data-action="click->stimeo--dismissible#dismiss">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <a class="dismissible__after" href="#" data-stimeo--dismissible-target="fallback">
    <%= t("components.dismissible.demo.fallback") %>
  </a>
</div>

/*
 * Presentation-only styles for the dismissible demo.
 * Dismissal is expressed via hide mode (the library adds hidden to the root).
 */

.dismissible {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 32rem;
}

.dismissible__banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--leaf-50);
  border-radius: 0.5rem;
  background: var(--leaf-50);
  /* leaf-500 is the status *fill*; carrying text it measures 3.11:1 on this
     tinted surface. The 700 step exists for exactly this (status TEXT). */
  color: var(--leaf-700);
}

.dismissible__icon {
  font-weight: 700;
}

.dismissible__message {
  margin: 0;
  flex: 1;
}

.dismissible__close {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.dismissible__close:hover {
  background: var(--leaf-50);
}

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

.dismissible__after {
  align-self: flex-start;
  font-size: 0.875rem;
  color: var(--accent-700);
}