Toast

<%# Markup for the toast demo.
    The single source used for both the live render and the copy-paste code.
    stimeo--toast provides max-count management, WAI-ARIA live region support, and
    pausing the auto-dismiss timer on hover or keyboard focus.

    Showing a toast is done with attributes alone (no hand-written JS):
    put data-action="click->stimeo--toast#show" plus
    data-stimeo--toast-body-param / data-stimeo--toast-type-param on the trigger button.
    For advanced cases where you want to trigger it remotely from JS, the controller
    element keeps show->stimeo--toast#show, so CustomEvent('show', { detail }) works too. %>
<div
  class="toast-demo"
  data-controller="stimeo--toast"
  data-stimeo--toast-duration-value="5000"
  data-stimeo--toast-max-value="3"
  data-action="show->stimeo--toast#show">

  <div class="toast-demo__triggers">
    <button
      type="button"
      class="demo-trigger toast-demo__btn--status"
      data-action="click->stimeo--toast#show"
      data-stimeo--toast-body-param="<%= t("components.toast.demo.status_body") %>"
      data-stimeo--toast-type-param="status">
      <%= t("components.toast.demo.show_status") %>
    </button>

    <button
      type="button"
      class="demo-trigger toast-demo__btn--alert"
      data-action="click->stimeo--toast#show"
      data-stimeo--toast-body-param="<%= t("components.toast.demo.alert_body") %>"
      data-stimeo--toast-type-param="alert">
      <%= t("components.toast.demo.show_alert") %>
    </button>
  </div>

  <%# The live region is a descendant of the controller. The controller element only
      needs to contain the trigger and the list/template; role="region" goes on this
      inner container. %>
  <div
    id="playground-toast"
    role="region"
    aria-label="<%= t("components.toast.demo.region_label") %>"
    class="toast-container">
    
    <%# The element where notifications are placed. %>
    <ol class="toast-list" data-stimeo--toast-target="list"></ol>

    <%# Template used to create new toasts. %>
    <template data-stimeo--toast-target="template">
      <li
        class="toast-item"
        data-stimeo--toast-target="item"
        tabindex="0">
        <div class="toast-item__content">
          <span role="status" data-toast-slot="body" class="toast-item__body"></span>
          <button
            type="button"
            class="toast-item__dismiss"
            data-toast-dismiss
            aria-label="<%= t("components.toast.demo.dismiss_label") %>">
            <svg
              class="toast-item__icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2">
              <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
          </button>
        </div>
      </li>
    </template>
  </div>
</div>

/*
 * Presentation-only styles for the toast demo.
 * Toned-down, semi-flat styling (no glassmorphism) to blend with the wireframe look
 * (plain white background) of the other components.
 */

.toast-demo {
  margin: 1rem 0;
}

.toast-demo__triggers {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.toast-demo__btn--status:hover {
  color: var(--leaf-500);
}

.toast-demo__btn--alert:hover {
  color: var(--danger-500);
}

/* Container that positions the whole toast stack. */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  pointer-events: none; /* The container as a whole is click-through. */
}

.toast-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: min(22rem, 90vw);
}

/* Each toast item - plain white background to blend with other popups and dropdown lists. */
.toast-item {
  pointer-events: auto; /* The toast item itself is clickable. */
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  outline: none;
}

.toast-item__body[role="alert"]::before,
.toast-item__body[role="status"]::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  content: "";
}

.toast-item__body[role="alert"]::before {
  background: var(--danger-500);
}

.toast-item__body[role="status"]::before {
  background: var(--leaf-500);
}

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

/* Paused state when data-paused="true" (slightly gray). */
.toast-item[data-paused="true"] {
  background: var(--surface-subtle);
}

/* Lifecycle states used for transitions. */
.toast-item[data-state="entering"] {
  opacity: 0;
  transform: translateY(0.5rem);
}

.toast-item[data-state="visible"] {
  opacity: 1;
  transform: translateY(0);
}

.toast-item[data-state="leaving"] {
  opacity: 0;
  transform: translateY(-0.25rem);
}

.toast-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  gap: 1rem;
}

.toast-item__body {
  font-size: 0.9rem;
  color: var(--fg);
  line-height: 1.4;
  flex-grow: 1;
}

.toast-item__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-subtle);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.toast-item__dismiss:hover {
  background: var(--surface-subtle);
  color: var(--color-text-muted);
}

.toast-item__icon {
  width: 0.85rem;
  height: 0.85rem;
}