@vielzeug/refine 1.1.1 → 1.3.0

package/dist/toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.cjs","names":[],"sources":["../src/feedback/toast/toast.ts"],"sourcesContent":["import { uuid } from '@vielzeug/arsenal';\nimport { define, html, prop, ref } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { SwipeControl } from '../../headless';\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { warn } from '../../_dev';\nimport { createSwipeControl } from '../../headless';\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './toast.css?inline';\n\n// ---------------------------------------------------------------------------\n// NOTE: Architecture\n//\n// Each toast has two DOM layers:\n//   .toast-wrapper  — layout / stacking / grid positioning (no animation)\n//   .toast-inner    — animation target (opacity fade in/out)\n//\n// This separation means stacking rules (nth-last-child, hover) and animation\n// rules never fight over the same element. No !important needed anywhere.\n//\n// State: a single signal<ToastEntry[]> owns all per-toast state (data, phase,\n// timer). There are no parallel Sets or Maps tracking lifecycle separately.\n//\n// Exit animation: .toast-inner.exiting fades opacity → 0.\n// The wrapper stays in-flow during the fade so the grid doesn't snap shut.\n// After transitionend (or TOAST_EXIT_MS fallback), finalize() removes the\n// toast from the entries array which removes the wrapper from the DOM.\n//\n// Swipe gesture animates .toast-inner (not .toast-wrapper) to avoid\n// polluting the wrapper's transition state used by the exit animation.\n// Swipe commit calls finalizeRemoval() directly — it owns the animation,\n// so the normal removeToast() path is not involved.\n//\n// Close button: owned by the toast template, not ore-alert. ore-alert renders\n// content only. This keeps ore-alert a pure presentational component with no\n// animation lifecycle coupling.\n//\n// Max eviction: when adding would exceed max, oldest non-exiting toasts are\n// dismissed via removeToast() — animated, with onDismiss callback + event.\n//\n// Dismiss queue: removed. Each toast exits independently in parallel.\n// ---------------------------------------------------------------------------\n\n/** Duration (ms) of the CSS opacity exit transition on .toast-inner.\n * Must match the value in toast.css: `transition: opacity 300ms`.  */\nconst TOAST_EXIT_MS = 300;\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type OreToastEvents = {\n  add: { id: string };\n  dismiss: { id: string };\n};\n\nexport type OreToastProps = {\n  max?: number;\n  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n};\n\n/** Individual toast notification */\nexport type ToastItem = {\n  actions?: Array<{\n    color?: ThemeColor;\n    label: string;\n    onClick?: () => void;\n    variant?: 'solid' | 'flat' | 'bordered';\n  }>;\n  color?: ThemeColor;\n  dismissible?: boolean;\n  /** Auto-dismiss delay in ms. Set to 0 for persistent toasts (default: 5000) */\n  duration?: number;\n  heading?: string;\n  /** Show message and actions side-by-side (horizontal layout) */\n  horizontal?: boolean;\n  /** Auto-generated via crypto.randomUUID() if omitted */\n  id?: string;\n  message: string;\n  /** Metadata text (e.g. timestamp) shown in the alert meta slot */\n  meta?: string;\n  /** Called after the toast is fully dismissed and removed */\n  onDismiss?: () => void;\n  rounded?: RoundedSize | '';\n  size?: ComponentSize;\n  /**\n   * Urgency level for screen readers.\n   * - `'polite'` (default): announced after the user finishes their current action.\n   * - `'assertive'`: interrupts the user immediately. Use only for critical errors.\n   */\n  urgency?: 'polite' | 'assertive';\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\ntype ToastPhase = 'entering' | 'active' | 'exiting';\n\ntype ToastTimer = {\n  remaining: number;\n  startedAt: number;\n  timeoutId: ReturnType<typeof setTimeout>;\n};\n\n/** Internal: a ToastItem that has been normalized and given a lifecycle phase. */\ntype ToastEntry = Required<Pick<ToastItem, 'dismissible' | 'duration' | 'id'>> &\n  Omit<ToastItem, 'dismissible' | 'duration' | 'id'> & {\n    id: string;\n    phase: ToastPhase;\n    timer: ToastTimer | null;\n  };\n\n/** Public API of the ore-toast element */\nexport interface ToastElement extends HTMLElement {\n  add: (toast: ToastItem) => string;\n  clear: () => void;\n  dismiss: (id: string) => void;\n  update: (id: string, updates: Partial<ToastItem>) => void;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * An accessible toast stack with polite/assertive live regions and hover expansion.\n * Stacks up to 3 notifications with a 3D effect.\n *\n * @element ore-toast\n *\n * @attr {string} position - 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n * @attr {number} max - Max toasts in DOM at once (default: 5)\n *\n * @fires add - When a toast is added `{ id }`\n * @fires dismiss - When a toast is dismissed `{ id }`\n *\n * @slot - Manually placed `ore-alert` elements\n *\n * @cssprop --toast-position - Position type (default: fixed)\n * @cssprop --toast-inset-top - Top inset\n * @cssprop --toast-inset-bottom - Bottom inset\n * @cssprop --toast-inset-left - Left inset\n * @cssprop --toast-inset-right - Right inset\n * @cssprop --toast-z-index - Z-index (default: 9999)\n * @cssprop --toast-max-width - Max width (default: 400px)\n * @cssprop --toast-gap - Gap between expanded toasts (default: 0.5rem)\n * @cssprop --toast-exit-duration - Exit animation duration (default: 300ms)\n *\n * @example\n * ```html\n * <!-- Declarative: place once in HTML -->\n * <ore-toast position=\"bottom-right\"></ore-toast>\n *\n * <!-- Programmatic: use the singleton service -->\n * <script type=\"module\">\n *   import { toast } from '@vielzeug/refine';\n *   toast.success('Changes saved!');\n * </script>\n * ```\n */\n\n/** Renders the action buttons for a toast entry. */\nfunction renderToastActions(entry: ToastEntry, onDismiss: () => void) {\n  if (!entry.actions?.length) return '';\n\n  return html`\n    <div slot=\"actions\" class=\"toast-actions\">\n      ${entry.actions.map(\n        (action) => html`\n          <ore-button\n            size=\"sm\"\n            color=${action.color || entry.color || 'primary'}\n            variant=${action.variant || 'solid'}\n            @click=${() => {\n              action.onClick?.();\n              onDismiss();\n            }}\n            >${action.label}</ore-button\n          >\n        `,\n      )}\n    </div>\n  `;\n}\n\nexport const TOAST_TAG = 'ore-toast' as const;\ndefine<OreToastProps, OreToastEvents>(TOAST_TAG, {\n  props: {\n    max: prop.number(5),\n    position: prop.oneOf(\n      ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'] as const,\n      'bottom-right',\n    ),\n  },\n  setup(props, { el, emit, onCleanup, onMounted }) {\n    // Single source of truth for all toast state.\n    const entries = signal<ToastEntry[]>([]);\n    const containerRef = ref<HTMLDivElement>();\n\n    // Per-toast swipe-to-dismiss controls (keyed by id, cleaned up in finalizeRemoval).\n    const swipeControls = new Map<string, SwipeControl>();\n\n    // Pause state is reactive so computed derivations and watches can observe it.\n    const hoverPaused = signal(false);\n    const focusPaused = signal(false);\n    const paused = computed(() => hoverPaused.value || focusPaused.value);\n\n    // ── Helpers ────────────────────────────────────────────────────────────\n\n    const updateEntry = (id: string, patch: Partial<ToastEntry>) => {\n      entries.value = entries.value.map((e) => (e.id === id ? { ...e, ...patch } : e));\n    };\n\n    const getEntry = (id: string) => entries.value.find((e) => e.id === id);\n\n    const getInner = (wrapperOrEvent: HTMLElement | Event): HTMLElement | null => {\n      const wrapper = wrapperOrEvent instanceof Event ? (wrapperOrEvent.currentTarget as HTMLElement) : wrapperOrEvent;\n\n      return wrapper.querySelector<HTMLElement>('.toast-inner');\n    };\n\n    // ── Timer management ───────────────────────────────────────────────────\n\n    const clearEntryTimer = (entry: ToastEntry): ToastEntry => {\n      if (entry.timer) clearTimeout(entry.timer.timeoutId);\n\n      return { ...entry, timer: null };\n    };\n\n    const scheduleTimer = (id: string, remaining: number) => {\n      if (remaining <= 0) return;\n\n      const timeoutId = setTimeout(() => removeToast(id), remaining);\n\n      updateEntry(id, { timer: { remaining, startedAt: Date.now(), timeoutId } });\n    };\n\n    const pauseTimers = () => {\n      entries.value = entries.value.map((e) => {\n        if (!e.timer) return e;\n\n        clearTimeout(e.timer.timeoutId);\n\n        return {\n          ...e,\n          timer: { ...e.timer, remaining: Math.max(0, e.timer.remaining - (Date.now() - e.timer.startedAt)) },\n        };\n      });\n    };\n\n    const resumeTimers = () => {\n      for (const e of entries.value) {\n        if (!e.timer || e.timer.remaining <= 0) continue;\n\n        const timeoutId = setTimeout(() => removeToast(e.id), e.timer.remaining);\n\n        updateEntry(e.id, { timer: { ...e.timer, startedAt: Date.now(), timeoutId } });\n      }\n    };\n\n    // Watch reactive pause state — automatically pauses/resumes all timers.\n    watch(paused, (isPaused) => {\n      if (isPaused) pauseTimers();\n      else resumeTimers();\n    });\n\n    // ── Swipe gesture ──────────────────────────────────────────────────────\n    // Animates .toast-inner to avoid polluting the wrapper transition state.\n    // On commit, calls finalizeRemoval() directly (swipe owns the animation).\n\n    const createToastSwipe = (id: string): SwipeControl => {\n      // Same reset behavior whether the swipe was interrupted by the platform\n      // (onCancel) or simply released without crossing the commit threshold\n      // (onRelease) — the toast snaps back to rest either way.\n      const resetSwipeStyles = ({ event }: { event: PointerEvent }): void => {\n        const inner = getInner(event);\n\n        if (!inner) return;\n\n        inner.style.transition = '';\n        inner.style.transform = '';\n        inner.style.opacity = '';\n      };\n\n      return createSwipeControl({\n        axis: () => 'x',\n        // Do not capture pointers for toast swipe gestures; capture can steal\n        // close-button clicks when the gesture does not move.\n        captureTarget: () => null,\n        disabled: computed(() => !(getEntry(id)?.dismissible ?? true)),\n        onCancel: resetSwipeStyles,\n        onCommit: ({ distance, event }) => {\n          const inner = getInner(event);\n\n          if (!inner) return;\n\n          const dir = distance >= 0 ? 1 : -1;\n          const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          const finish = () => finalizeRemoval(id);\n\n          if (reducedMotion) {\n            inner.style.opacity = '0';\n            finish();\n\n            return;\n          }\n\n          inner.style.transition = 'transform 0.22s ease-out, opacity 0.22s ease-out';\n          void inner.offsetWidth;\n          inner.style.transform = `translateX(${dir * 120}%)`;\n          inner.style.opacity = '0';\n\n          const onTransitionEnd = (e: TransitionEvent) => {\n            if (e.target !== inner || e.propertyName !== 'transform') return;\n\n            inner.removeEventListener('transitionend', onTransitionEnd);\n            clearTimeout(fallback);\n            finish();\n          };\n\n          const fallback = setTimeout(() => {\n            inner.removeEventListener('transitionend', onTransitionEnd);\n            finish();\n          }, 300);\n\n          inner.addEventListener('transitionend', onTransitionEnd);\n        },\n        onMove: ({ distance, event }) => {\n          const inner = getInner(event);\n\n          if (!inner) return;\n\n          inner.style.transition = 'none';\n          inner.style.transform = `translateX(${distance}px)`;\n          inner.style.opacity = String(Math.max(0, 1 - Math.abs(distance) / 200));\n        },\n        onRelease: resetSwipeStyles,\n      });\n    };\n\n    // ── Toast lifecycle ────────────────────────────────────────────────────\n\n    /** Remove all per-entry resources and fire callbacks. Does not animate. */\n    const finalizeRemoval = (id: string) => {\n      const entry = getEntry(id);\n\n      // Clean up timer and swipe control before removing from signal.\n      if (entry?.timer) clearTimeout(entry.timer.timeoutId);\n\n      swipeControls.delete(id);\n      entries.value = entries.value.filter((e) => e.id !== id);\n      entry?.onDismiss?.();\n      emit('dismiss', { id });\n    };\n\n    const addToast = (item: ToastItem): string => {\n      const id = item.id || uuid();\n      const maxToasts = props.max?.value ?? 5;\n\n      // Evict oldest non-exiting toasts to stay within max — animated, with callbacks.\n      const active = entries.value.filter((e) => e.phase !== 'exiting');\n      const overflow = active.length - (maxToasts - 1);\n\n      if (overflow > 0) {\n        for (const evicted of active.slice(0, overflow)) removeToast(evicted.id);\n      }\n\n      const entry: ToastEntry = {\n        dismissible: true,\n        duration: 5000,\n        ...item,\n        id,\n        phase: 'entering',\n        timer: null,\n      };\n\n      swipeControls.set(id, createToastSwipe(id));\n      entries.value = [...entries.value, entry];\n      emit('add', { id });\n\n      requestAnimationFrame(() => {\n        // Guard: if the toast was dismissed before this rAF fired (e.g. evicted\n        // by max), do not overwrite its exiting phase back to active.\n        if (getEntry(id)?.phase === 'entering') updateEntry(id, { phase: 'active' });\n      });\n\n      if (entry.duration > 0) scheduleTimer(id, entry.duration);\n\n      return id;\n    };\n\n    const removeToast = (id: string) => {\n      const entry = getEntry(id);\n\n      // Already animating out or not found — ignore.\n      if (!entry || entry.phase === 'exiting') return;\n\n      // Clear the auto-dismiss timer: the user (or max-eviction) is dismissing now.\n      updateEntry(id, { ...clearEntryTimer(entry), phase: 'exiting' });\n\n      // Force a layout flush on the current inner element (if in DOM now) so the\n      // browser snapshots the current opacity as the animation start value.\n      const innerEl = containerRef.value?.querySelector<HTMLElement>(`[data-toast-id=\"${id}\"] .toast-inner`);\n\n      void innerEl?.offsetHeight;\n\n      let done = false;\n      const onDone = () => {\n        if (done) return;\n\n        done = true;\n        finalizeRemoval(id);\n      };\n\n      // TOAST_EXIT_MS is the built-in default, matching the CSS opacity transition's own\n      // default. Read the *actual* computed duration so a consumer-customized\n      // `--toast-exit-duration` doesn't get cut off by a shorter hardcoded fallback.\n      // Fallback fires if transitionend never arrives (jsdom, reduced-motion, etc.).\n      const computedExitMs = innerEl ? parseFloat(getComputedStyle(innerEl).transitionDuration) * 1000 : NaN;\n      const exitMs = Number.isFinite(computedExitMs) && computedExitMs > 0 ? computedExitMs : TOAST_EXIT_MS;\n      const fallback = setTimeout(onDone, exitMs + 50);\n\n      // Listen on the container with event delegation so we are immune to\n      // ore re-rendering the entries list (e.g. rAF phase transitions that\n      // rebuild DOM after our listener would have been set up).\n      // transitionend bubbles, so it reaches the container regardless of which\n      // generation of .toast-inner element fires it.\n      const onTransitionEnd = (e: TransitionEvent) => {\n        const wrapper = (e.target as HTMLElement | null)?.closest?.(`[data-toast-id=\"${id}\"]`);\n\n        if (!wrapper) return;\n\n        containerRef.value?.removeEventListener('transitionend', onTransitionEnd);\n        clearTimeout(fallback);\n        onDone();\n      };\n\n      containerRef.value?.addEventListener('transitionend', onTransitionEnd);\n    };\n\n    const updateToast = (id: string, updates: Partial<ToastItem>) => {\n      const entry = getEntry(id);\n\n      if (!entry) return;\n\n      const cleared = updates.duration !== undefined ? clearEntryTimer(entry) : entry;\n\n      updateEntry(id, { ...cleared, ...updates, id });\n\n      if (updates.duration !== undefined && updates.duration > 0) scheduleTimer(id, updates.duration);\n    };\n\n    const clearAll = () => {\n      // Fire all removals concurrently — parallel fades are visually correct.\n      for (const e of entries.value) {\n        if (e.phase !== 'exiting') removeToast(e.id);\n      }\n    };\n\n    // ── Derived lists for live regions ─────────────────────────────────────\n\n    const urgencyOf = (e: ToastEntry) => e.urgency ?? (e.color === 'error' ? 'assertive' : 'polite');\n    const politeEntries = computed(() => entries.value.filter((e) => urgencyOf(e) === 'polite'));\n    const assertiveEntries = computed(() => entries.value.filter((e) => urgencyOf(e) === 'assertive'));\n\n    // ── Cleanup on disconnect ──────────────────────────────────────────────\n\n    onCleanup(() => {\n      for (const e of entries.value) {\n        if (e.timer) clearTimeout(e.timer.timeoutId);\n      }\n\n      swipeControls.clear();\n    });\n\n    // ── Template ───────────────────────────────────────────────────────────\n\n    const renderEntry = (entry: ToastEntry) => {\n      const dismiss = () => removeToast(entry.id);\n\n      return html`\n        <div\n          class=\"toast-wrapper\"\n          data-toast-id=${entry.id}\n          part=\"toast-wrapper\"\n          @pointerdown=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerDown(e)}\n          @pointermove=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerMove(e)}\n          @pointerup=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerUp(e)}\n          @pointercancel=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerCancel(e)}>\n          <div class=\"${() => `toast-inner${entry.phase !== 'active' ? ` ${entry.phase}` : ''}`}\" part=\"toast-inner\">\n            <ore-alert\n              color=${entry.color || (entry.urgency === 'assertive' ? 'error' : 'primary')}\n              variant=${entry.variant || 'solid'}\n              size=${entry.size || 'md'}\n              rounded=${entry.rounded || 'md'}\n              ?horizontal=${entry.horizontal}\n              heading=${entry.heading || ''}\n              ?dismissible=${entry.dismissible !== false}\n              @dismiss=${dismiss}>\n              ${entry.meta ? html`<span slot=\"meta\">${entry.meta}</span>` : ''} ${entry.message}\n              ${renderToastActions(entry, dismiss)}\n            </ore-alert>\n          </div>\n        </div>\n      `;\n    };\n\n    // Expose imperative API directly on mount — calls made before mount are\n    // safe because ore mounts synchronously on connectedCallback.\n    onMounted(() => {\n      const toastEl = el as ToastElement;\n\n      toastEl.add = addToast;\n      toastEl.clear = clearAll;\n      toastEl.dismiss = removeToast;\n      toastEl.update = updateToast;\n    });\n\n    return html`\n      <div\n        class=\"toast-container\"\n        ref=${containerRef}\n        @pointerenter=${() => {\n          hoverPaused.value = true;\n          el.classList.add('hovered');\n        }}\n        @pointerleave=${() => {\n          hoverPaused.value = false;\n          el.classList.remove('hovered');\n        }}\n        @focusin=${() => {\n          focusPaused.value = true;\n        }}\n        @focusout=${() => {\n          focusPaused.value = false;\n        }}\n        part=\"container\">\n        <!-- Polite live region: normal informational toasts -->\n        <div\n          role=\"region\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Notifications\"\n          class=\"toast-live-region\">\n          ${() => politeEntries.value.map(renderEntry)}\n        </div>\n        <!-- Assertive live region: critical errors that interrupt immediately -->\n        <div\n          role=\"region\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Critical notifications\"\n          class=\"toast-live-region\">\n          ${() => assertiveEntries.value.map(renderEntry)}\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n\n// ─── Toast service ────────────────────────────────────────────────────────────\n\nexport type ToastServiceConfig = OreToastProps;\n\nexport interface ToastService {\n  /** Add a toast and return its id */\n  add(item: ToastItem): string;\n  /** Dismiss all toasts (animated, in parallel) */\n  clear(): void;\n  /**\n   * Configure the auto-created container.\n   * Has no effect if called after the first `add()` — logs a dev warning in that case.\n   */\n  configure(config: ToastServiceConfig): void;\n  /** Dismiss a toast by id (animated) */\n  dismiss(id: string): void;\n  /** Shortcut: error toast with red color (assertive live region) */\n  error(message: string, opts?: Partial<ToastItem>): string;\n  /** Shortcut: info toast */\n  info(message: string, opts?: Partial<ToastItem>): string;\n  /**\n   * Shows a loading toast tied to a promise.\n   * Updates to success/error when the promise settles.\n   */\n  promise<T>(\n    promise: Promise<T>,\n    messages: {\n      error: string | ((err: unknown) => string);\n      loading: string;\n      success: string | ((data: T) => string);\n    },\n  ): Promise<T>;\n  /** Shortcut: success toast with green color */\n  success(message: string, opts?: Partial<ToastItem>): string;\n  /** Update an existing toast in-place */\n  update(id: string, updates: Partial<ToastItem>): void;\n  /** Shortcut: warning toast */\n  warning(message: string, opts?: Partial<ToastItem>): string;\n}\n\n/**\n * Creates a scoped toast service backed by an `ore-toast` element.\n *\n * The service lazily creates an `<ore-toast>` element inside `root` on first\n * use. Pass a custom root to scope notifications to a sub-tree (e.g. a drawer),\n * or use the pre-built `toast` singleton which targets `document.body`.\n *\n * @example\n * ```ts\n * // Scoped instance\n * const drawerToast = createToastService(drawerEl);\n * drawerToast.success('Saved inside drawer');\n *\n * // The default singleton\n * import { toast } from '@vielzeug/refine';\n * toast.success('Saved!');\n * ```\n */\nexport function createToastService(root: ParentNode = document.body): ToastService {\n  let host: ToastElement | null = null;\n  let configured = false;\n  let pendingConfig: ToastServiceConfig | null = null;\n\n  const getHost = (): ToastElement => {\n    if (host?.isConnected) return host;\n\n    // Re-use an existing element in the root (supports declarative placement).\n    host = (root instanceof Element ? root : (root as Document | ShadowRoot)).querySelector<ToastElement>('ore-toast');\n\n    if (!host) {\n      host = document.createElement('ore-toast') as ToastElement;\n\n      if (pendingConfig) {\n        if (pendingConfig.position) host.setAttribute('position', pendingConfig.position);\n\n        if (pendingConfig.max != null) host.setAttribute('max', String(pendingConfig.max));\n\n        pendingConfig = null;\n      }\n\n      (root as Element | Document).appendChild(host);\n    }\n\n    configured = true;\n\n    return host;\n  };\n\n  const service: ToastService = {\n    add(item) {\n      return getHost().add(item);\n    },\n\n    clear() {\n      getHost().clear();\n    },\n\n    configure(config) {\n      if (configured) {\n        warn('toast.configure() called after the container was already created; options ignored.');\n\n        return;\n      }\n\n      pendingConfig = { ...pendingConfig, ...config };\n    },\n\n    dismiss(id) {\n      getHost().dismiss(id);\n    },\n\n    error(message, opts) {\n      return service.add({ color: 'error', ...opts, message });\n    },\n\n    info(message, opts) {\n      return service.add({ color: 'info', ...opts, message });\n    },\n\n    async promise(promise, messages) {\n      const id = service.add({ color: 'primary', dismissible: false, duration: 0, message: messages.loading });\n\n      try {\n        const data = await promise;\n\n        service.update(id, {\n          color: 'success',\n          dismissible: true,\n          duration: 5000,\n          message: typeof messages.success === 'function' ? messages.success(data) : messages.success,\n        });\n\n        return data;\n      } catch (err) {\n        service.update(id, {\n          color: 'error',\n          dismissible: true,\n          duration: 5000,\n          message: typeof messages.error === 'function' ? messages.error(err) : messages.error,\n        });\n        throw err;\n      }\n    },\n\n    success(message, opts) {\n      return service.add({ color: 'success', ...opts, message });\n    },\n\n    update(id, updates) {\n      getHost().update(id, updates);\n    },\n\n    warning(message, opts) {\n      return service.add({ color: 'warning', ...opts, message });\n    },\n  };\n\n  return service;\n}\n\n/**\n * Singleton toast service — finds or creates a single `<ore-toast>` on `document.body`.\n *\n * @example\n * ```ts\n * import { toast } from '@vielzeug/refine';\n *\n * toast.success('Changes saved!');\n * toast.error('Upload failed', { duration: 0 });\n *\n * const id = toast.add({ message: 'Uploading…', duration: 0, dismissible: false });\n * toast.update(id, { message: 'Done!', color: 'success', duration: 3000, dismissible: true });\n *\n * await toast.promise(uploadFile(), {\n *   loading: 'Uploading…',\n *   success: (url) => `Uploaded to ${url}`,\n *   error: 'Upload failed',\n * });\n * ```\n */\nexport const toast: ToastService = createToastService();\n"],"mappings":"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"}
+{"version":3,"file":"toast.cjs","names":[],"sources":["../src/feedback/toast/toast.ts"],"sourcesContent":["import { uuid } from '@vielzeug/arsenal';\nimport { define, html, prop, ref, getHost, onCleanup, onMounted, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { SwipeControl } from '../../headless';\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { warn } from '../../_dev';\nimport { createSwipeControl } from '../../headless';\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './toast.css?inline';\n\n// ---------------------------------------------------------------------------\n// NOTE: Architecture\n//\n// Each toast has two DOM layers:\n//   .toast-wrapper  — layout / stacking / grid positioning (no animation)\n//   .toast-inner    — animation target (opacity fade in/out)\n//\n// This separation means stacking rules (nth-last-child, hover) and animation\n// rules never fight over the same element. No !important needed anywhere.\n//\n// State: a single signal<ToastEntry[]> owns all per-toast state (data, phase,\n// timer). There are no parallel Sets or Maps tracking lifecycle separately.\n//\n// Exit animation: .toast-inner.exiting fades opacity → 0.\n// The wrapper stays in-flow during the fade so the grid doesn't snap shut.\n// After transitionend (or TOAST_EXIT_MS fallback), finalize() removes the\n// toast from the entries array which removes the wrapper from the DOM.\n//\n// Swipe gesture animates .toast-inner (not .toast-wrapper) to avoid\n// polluting the wrapper's transition state used by the exit animation.\n// Swipe commit calls finalizeRemoval() directly — it owns the animation,\n// so the normal removeToast() path is not involved.\n//\n// Close button: owned by the toast template, not ore-alert. ore-alert renders\n// content only. This keeps ore-alert a pure presentational component with no\n// animation lifecycle coupling.\n//\n// Max eviction: when adding would exceed max, oldest non-exiting toasts are\n// dismissed via removeToast() — animated, with onDismiss callback + event.\n//\n// Dismiss queue: removed. Each toast exits independently in parallel.\n// ---------------------------------------------------------------------------\n\n/** Duration (ms) of the CSS opacity exit transition on .toast-inner.\n * Must match the value in toast.css: `transition: opacity 300ms`.  */\nconst TOAST_EXIT_MS = 300;\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type OreToastEvents = {\n  add: { id: string };\n  dismiss: { id: string };\n};\n\nexport type OreToastProps = {\n  max?: number;\n  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n};\n\n/** Individual toast notification */\nexport type ToastItem = {\n  actions?: Array<{\n    color?: ThemeColor;\n    label: string;\n    onClick?: () => void;\n    variant?: 'solid' | 'flat' | 'bordered';\n  }>;\n  color?: ThemeColor;\n  dismissible?: boolean;\n  /** Auto-dismiss delay in ms. Set to 0 for persistent toasts (default: 5000) */\n  duration?: number;\n  heading?: string;\n  /** Show message and actions side-by-side (horizontal layout) */\n  horizontal?: boolean;\n  /** Auto-generated via crypto.randomUUID() if omitted */\n  id?: string;\n  message: string;\n  /** Metadata text (e.g. timestamp) shown in the alert meta slot */\n  meta?: string;\n  /** Called after the toast is fully dismissed and removed */\n  onDismiss?: () => void;\n  rounded?: RoundedSize | '';\n  size?: ComponentSize;\n  /**\n   * Urgency level for screen readers.\n   * - `'polite'` (default): announced after the user finishes their current action.\n   * - `'assertive'`: interrupts the user immediately. Use only for critical errors.\n   */\n  urgency?: 'polite' | 'assertive';\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\ntype ToastPhase = 'entering' | 'active' | 'exiting';\n\ntype ToastTimer = {\n  remaining: number;\n  startedAt: number;\n  timeoutId: ReturnType<typeof setTimeout>;\n};\n\n/** Internal: a ToastItem that has been normalized and given a lifecycle phase. */\ntype ToastEntry = Required<Pick<ToastItem, 'dismissible' | 'duration' | 'id'>> &\n  Omit<ToastItem, 'dismissible' | 'duration' | 'id'> & {\n    id: string;\n    phase: ToastPhase;\n    timer: ToastTimer | null;\n  };\n\n/** Public API of the ore-toast element */\nexport interface ToastElement extends HTMLElement {\n  add: (toast: ToastItem) => string;\n  clear: () => void;\n  dismiss: (id: string) => void;\n  update: (id: string, updates: Partial<ToastItem>) => void;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * An accessible toast stack with polite/assertive live regions and hover expansion.\n * Stacks up to 3 notifications with a 3D effect.\n *\n * @element ore-toast\n *\n * @attr {string} position - 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n * @attr {number} max - Max toasts in DOM at once (default: 5)\n *\n * @fires add - When a toast is added `{ id }`\n * @fires dismiss - When a toast is dismissed `{ id }`\n *\n * @slot - Manually placed `ore-alert` elements\n *\n * @cssprop --toast-position - Position type (default: fixed)\n * @cssprop --toast-inset-top - Top inset\n * @cssprop --toast-inset-bottom - Bottom inset\n * @cssprop --toast-inset-left - Left inset\n * @cssprop --toast-inset-right - Right inset\n * @cssprop --toast-z-index - Z-index (default: 9999)\n * @cssprop --toast-max-width - Max width (default: 400px)\n * @cssprop --toast-gap - Gap between expanded toasts (default: 0.5rem)\n * @cssprop --toast-exit-duration - Exit animation duration (default: 300ms)\n *\n * @example\n * ```html\n * <!-- Declarative: place once in HTML -->\n * <ore-toast position=\"bottom-right\"></ore-toast>\n *\n * <!-- Programmatic: use the singleton service -->\n * <script type=\"module\">\n *   import { toast } from '@vielzeug/refine';\n *   toast.success('Changes saved!');\n * </script>\n * ```\n */\n\n/** Renders the action buttons for a toast entry. */\nfunction renderToastActions(entry: ToastEntry, onDismiss: () => void) {\n  if (!entry.actions?.length) return '';\n\n  return html`\n    <div slot=\"actions\" class=\"toast-actions\">\n      ${entry.actions.map(\n        (action) => html`\n          <ore-button\n            size=\"sm\"\n            color=${action.color || entry.color || 'primary'}\n            variant=${action.variant || 'solid'}\n            @click=${() => {\n              action.onClick?.();\n              onDismiss();\n            }}\n            >${action.label}</ore-button\n          >\n        `,\n      )}\n    </div>\n  `;\n}\n\nexport const TOAST_TAG = 'ore-toast' as const;\ndefine<OreToastProps>(TOAST_TAG, {\n  props: {\n    max: prop.number(5),\n    position: prop.oneOf(\n      ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'] as const,\n      'bottom-right',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreToastEvents>();\n\n    // Single source of truth for all toast state.\n    const entries = signal<ToastEntry[]>([]);\n    const containerRef = ref<HTMLDivElement>();\n\n    // Per-toast swipe-to-dismiss controls (keyed by id, cleaned up in finalizeRemoval).\n    const swipeControls = new Map<string, SwipeControl>();\n\n    // Pause state is reactive so computed derivations and watches can observe it.\n    const hoverPaused = signal(false);\n    const focusPaused = signal(false);\n    const paused = computed(() => hoverPaused.value || focusPaused.value);\n\n    // ── Helpers ────────────────────────────────────────────────────────────\n\n    const updateEntry = (id: string, patch: Partial<ToastEntry>) => {\n      entries.value = entries.value.map((e) => (e.id === id ? { ...e, ...patch } : e));\n    };\n\n    const getEntry = (id: string) => entries.value.find((e) => e.id === id);\n\n    const getInner = (wrapperOrEvent: HTMLElement | Event): HTMLElement | null => {\n      const wrapper = wrapperOrEvent instanceof Event ? (wrapperOrEvent.currentTarget as HTMLElement) : wrapperOrEvent;\n\n      return wrapper.querySelector<HTMLElement>('.toast-inner');\n    };\n\n    // ── Timer management ───────────────────────────────────────────────────\n\n    const clearEntryTimer = (entry: ToastEntry): ToastEntry => {\n      if (entry.timer) clearTimeout(entry.timer.timeoutId);\n\n      return { ...entry, timer: null };\n    };\n\n    const scheduleTimer = (id: string, remaining: number) => {\n      if (remaining <= 0) return;\n\n      const timeoutId = setTimeout(() => removeToast(id), remaining);\n\n      updateEntry(id, { timer: { remaining, startedAt: Date.now(), timeoutId } });\n    };\n\n    const pauseTimers = () => {\n      entries.value = entries.value.map((e) => {\n        if (!e.timer) return e;\n\n        clearTimeout(e.timer.timeoutId);\n\n        return {\n          ...e,\n          timer: { ...e.timer, remaining: Math.max(0, e.timer.remaining - (Date.now() - e.timer.startedAt)) },\n        };\n      });\n    };\n\n    const resumeTimers = () => {\n      for (const e of entries.value) {\n        if (!e.timer || e.timer.remaining <= 0) continue;\n\n        const timeoutId = setTimeout(() => removeToast(e.id), e.timer.remaining);\n\n        updateEntry(e.id, { timer: { ...e.timer, startedAt: Date.now(), timeoutId } });\n      }\n    };\n\n    // Watch reactive pause state — automatically pauses/resumes all timers.\n    watch(paused, (isPaused) => {\n      if (isPaused) pauseTimers();\n      else resumeTimers();\n    });\n\n    // ── Swipe gesture ──────────────────────────────────────────────────────\n    // Animates .toast-inner to avoid polluting the wrapper transition state.\n    // On commit, calls finalizeRemoval() directly (swipe owns the animation).\n\n    const createToastSwipe = (id: string): SwipeControl => {\n      // Same reset behavior whether the swipe was interrupted by the platform\n      // (onCancel) or simply released without crossing the commit threshold\n      // (onRelease) — the toast snaps back to rest either way.\n      const resetSwipeStyles = ({ event }: { event: PointerEvent }): void => {\n        const inner = getInner(event);\n\n        if (!inner) return;\n\n        inner.style.transition = '';\n        inner.style.transform = '';\n        inner.style.opacity = '';\n      };\n\n      return createSwipeControl({\n        axis: () => 'x',\n        // Do not capture pointers for toast swipe gestures; capture can steal\n        // close-button clicks when the gesture does not move.\n        captureTarget: () => null,\n        disabled: computed(() => !(getEntry(id)?.dismissible ?? true)),\n        onCancel: resetSwipeStyles,\n        onCommit: ({ distance, event }) => {\n          const inner = getInner(event);\n\n          if (!inner) return;\n\n          const dir = distance >= 0 ? 1 : -1;\n          const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          const finish = () => finalizeRemoval(id);\n\n          if (reducedMotion) {\n            inner.style.opacity = '0';\n            finish();\n\n            return;\n          }\n\n          inner.style.transition = 'transform 0.22s ease-out, opacity 0.22s ease-out';\n          void inner.offsetWidth;\n          inner.style.transform = `translateX(${dir * 120}%)`;\n          inner.style.opacity = '0';\n\n          const onTransitionEnd = (e: TransitionEvent) => {\n            if (e.target !== inner || e.propertyName !== 'transform') return;\n\n            inner.removeEventListener('transitionend', onTransitionEnd);\n            clearTimeout(fallback);\n            finish();\n          };\n\n          const fallback = setTimeout(() => {\n            inner.removeEventListener('transitionend', onTransitionEnd);\n            finish();\n          }, 300);\n\n          inner.addEventListener('transitionend', onTransitionEnd);\n        },\n        onMove: ({ distance, event }) => {\n          const inner = getInner(event);\n\n          if (!inner) return;\n\n          inner.style.transition = 'none';\n          inner.style.transform = `translateX(${distance}px)`;\n          inner.style.opacity = String(Math.max(0, 1 - Math.abs(distance) / 200));\n        },\n        onRelease: resetSwipeStyles,\n      });\n    };\n\n    // ── Toast lifecycle ────────────────────────────────────────────────────\n\n    /** Remove all per-entry resources and fire callbacks. Does not animate. */\n    const finalizeRemoval = (id: string) => {\n      const entry = getEntry(id);\n\n      // Clean up timer and swipe control before removing from signal.\n      if (entry?.timer) clearTimeout(entry.timer.timeoutId);\n\n      swipeControls.delete(id);\n      entries.value = entries.value.filter((e) => e.id !== id);\n      entry?.onDismiss?.();\n      emit('dismiss', { id });\n    };\n\n    const addToast = (item: ToastItem): string => {\n      const id = item.id || uuid();\n      const maxToasts = props.max?.value ?? 5;\n\n      // Evict oldest non-exiting toasts to stay within max — animated, with callbacks.\n      const active = entries.value.filter((e) => e.phase !== 'exiting');\n      const overflow = active.length - (maxToasts - 1);\n\n      if (overflow > 0) {\n        for (const evicted of active.slice(0, overflow)) removeToast(evicted.id);\n      }\n\n      const entry: ToastEntry = {\n        dismissible: true,\n        duration: 5000,\n        ...item,\n        id,\n        phase: 'entering',\n        timer: null,\n      };\n\n      swipeControls.set(id, createToastSwipe(id));\n      entries.value = [...entries.value, entry];\n      emit('add', { id });\n\n      requestAnimationFrame(() => {\n        // Guard: if the toast was dismissed before this rAF fired (e.g. evicted\n        // by max), do not overwrite its exiting phase back to active.\n        if (getEntry(id)?.phase === 'entering') updateEntry(id, { phase: 'active' });\n      });\n\n      if (entry.duration > 0) scheduleTimer(id, entry.duration);\n\n      return id;\n    };\n\n    const removeToast = (id: string) => {\n      const entry = getEntry(id);\n\n      // Already animating out or not found — ignore.\n      if (!entry || entry.phase === 'exiting') return;\n\n      // Clear the auto-dismiss timer: the user (or max-eviction) is dismissing now.\n      updateEntry(id, { ...clearEntryTimer(entry), phase: 'exiting' });\n\n      // Force a layout flush on the current inner element (if in DOM now) so the\n      // browser snapshots the current opacity as the animation start value.\n      const innerEl = containerRef.value?.querySelector<HTMLElement>(`[data-toast-id=\"${id}\"] .toast-inner`);\n\n      void innerEl?.offsetHeight;\n\n      let done = false;\n      const onDone = () => {\n        if (done) return;\n\n        done = true;\n        finalizeRemoval(id);\n      };\n\n      // TOAST_EXIT_MS is the built-in default, matching the CSS opacity transition's own\n      // default. Read the *actual* computed duration so a consumer-customized\n      // `--toast-exit-duration` doesn't get cut off by a shorter hardcoded fallback.\n      // Fallback fires if transitionend never arrives (jsdom, reduced-motion, etc.).\n      const computedExitMs = innerEl ? parseFloat(getComputedStyle(innerEl).transitionDuration) * 1000 : NaN;\n      const exitMs = Number.isFinite(computedExitMs) && computedExitMs > 0 ? computedExitMs : TOAST_EXIT_MS;\n      const fallback = setTimeout(onDone, exitMs + 50);\n\n      // Listen on the container with event delegation so we are immune to\n      // ore re-rendering the entries list (e.g. rAF phase transitions that\n      // rebuild DOM after our listener would have been set up).\n      // transitionend bubbles, so it reaches the container regardless of which\n      // generation of .toast-inner element fires it.\n      const onTransitionEnd = (e: TransitionEvent) => {\n        const wrapper = (e.target as HTMLElement | null)?.closest?.(`[data-toast-id=\"${id}\"]`);\n\n        if (!wrapper) return;\n\n        containerRef.value?.removeEventListener('transitionend', onTransitionEnd);\n        clearTimeout(fallback);\n        onDone();\n      };\n\n      containerRef.value?.addEventListener('transitionend', onTransitionEnd);\n    };\n\n    const updateToast = (id: string, updates: Partial<ToastItem>) => {\n      const entry = getEntry(id);\n\n      if (!entry) return;\n\n      const cleared = updates.duration !== undefined ? clearEntryTimer(entry) : entry;\n\n      updateEntry(id, { ...cleared, ...updates, id });\n\n      if (updates.duration !== undefined && updates.duration > 0) scheduleTimer(id, updates.duration);\n    };\n\n    const clearAll = () => {\n      // Fire all removals concurrently — parallel fades are visually correct.\n      for (const e of entries.value) {\n        if (e.phase !== 'exiting') removeToast(e.id);\n      }\n    };\n\n    // ── Derived lists for live regions ─────────────────────────────────────\n\n    const urgencyOf = (e: ToastEntry) => e.urgency ?? (e.color === 'error' ? 'assertive' : 'polite');\n    const politeEntries = computed(() => entries.value.filter((e) => urgencyOf(e) === 'polite'));\n    const assertiveEntries = computed(() => entries.value.filter((e) => urgencyOf(e) === 'assertive'));\n\n    // ── Cleanup on disconnect ──────────────────────────────────────────────\n\n    onCleanup(() => {\n      for (const e of entries.value) {\n        if (e.timer) clearTimeout(e.timer.timeoutId);\n      }\n\n      swipeControls.clear();\n    });\n\n    // ── Template ───────────────────────────────────────────────────────────\n\n    const renderEntry = (entry: ToastEntry) => {\n      const dismiss = () => removeToast(entry.id);\n\n      return html`\n        <div\n          class=\"toast-wrapper\"\n          data-toast-id=${entry.id}\n          part=\"toast-wrapper\"\n          @pointerdown=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerDown(e)}\n          @pointermove=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerMove(e)}\n          @pointerup=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerUp(e)}\n          @pointercancel=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerCancel(e)}>\n          <div class=\"${() => `toast-inner${entry.phase !== 'active' ? ` ${entry.phase}` : ''}`}\" part=\"toast-inner\">\n            <ore-alert\n              color=${entry.color || (entry.urgency === 'assertive' ? 'error' : 'primary')}\n              variant=${entry.variant || 'solid'}\n              size=${entry.size || 'md'}\n              rounded=${entry.rounded || 'md'}\n              ?horizontal=${entry.horizontal}\n              heading=${entry.heading || ''}\n              ?dismissible=${entry.dismissible !== false}\n              @dismiss=${dismiss}>\n              ${entry.meta ? html`<span slot=\"meta\">${entry.meta}</span>` : ''} ${entry.message}\n              ${renderToastActions(entry, dismiss)}\n            </ore-alert>\n          </div>\n        </div>\n      `;\n    };\n\n    // Expose imperative API directly on mount — calls made before mount are\n    // safe because ore mounts synchronously on connectedCallback.\n    onMounted(() => {\n      const toastEl = el as ToastElement;\n\n      toastEl.add = addToast;\n      toastEl.clear = clearAll;\n      toastEl.dismiss = removeToast;\n      toastEl.update = updateToast;\n    });\n\n    return html`\n      <div\n        class=\"toast-container\"\n        ref=${containerRef}\n        @pointerenter=${() => {\n          hoverPaused.value = true;\n          el.classList.add('hovered');\n        }}\n        @pointerleave=${() => {\n          hoverPaused.value = false;\n          el.classList.remove('hovered');\n        }}\n        @focusin=${() => {\n          focusPaused.value = true;\n        }}\n        @focusout=${() => {\n          focusPaused.value = false;\n        }}\n        part=\"container\">\n        <!-- Polite live region: normal informational toasts -->\n        <div\n          role=\"region\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Notifications\"\n          class=\"toast-live-region\">\n          ${() => politeEntries.value.map(renderEntry)}\n        </div>\n        <!-- Assertive live region: critical errors that interrupt immediately -->\n        <div\n          role=\"region\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Critical notifications\"\n          class=\"toast-live-region\">\n          ${() => assertiveEntries.value.map(renderEntry)}\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n\n// ─── Toast service ────────────────────────────────────────────────────────────\n\nexport type ToastServiceConfig = OreToastProps;\n\nexport interface ToastService {\n  /** Add a toast and return its id */\n  add(item: ToastItem): string;\n  /** Dismiss all toasts (animated, in parallel) */\n  clear(): void;\n  /**\n   * Configure the auto-created container.\n   * Has no effect if called after the first `add()` — logs a dev warning in that case.\n   */\n  configure(config: ToastServiceConfig): void;\n  /** Dismiss a toast by id (animated) */\n  dismiss(id: string): void;\n  /** Shortcut: error toast with red color (assertive live region) */\n  error(message: string, opts?: Partial<ToastItem>): string;\n  /** Shortcut: info toast */\n  info(message: string, opts?: Partial<ToastItem>): string;\n  /**\n   * Shows a loading toast tied to a promise.\n   * Updates to success/error when the promise settles.\n   */\n  promise<T>(\n    promise: Promise<T>,\n    messages: {\n      error: string | ((err: unknown) => string);\n      loading: string;\n      success: string | ((data: T) => string);\n    },\n  ): Promise<T>;\n  /** Shortcut: success toast with green color */\n  success(message: string, opts?: Partial<ToastItem>): string;\n  /** Update an existing toast in-place */\n  update(id: string, updates: Partial<ToastItem>): void;\n  /** Shortcut: warning toast */\n  warning(message: string, opts?: Partial<ToastItem>): string;\n}\n\n/**\n * Creates a scoped toast service backed by an `ore-toast` element.\n *\n * The service lazily creates an `<ore-toast>` element inside `root` on first\n * use. Pass a custom root to scope notifications to a sub-tree (e.g. a drawer),\n * or use the pre-built `toast` singleton which targets `document.body`.\n *\n * @example\n * ```ts\n * // Scoped instance\n * const drawerToast = createToastService(drawerEl);\n * drawerToast.success('Saved inside drawer');\n *\n * // The default singleton\n * import { toast } from '@vielzeug/refine';\n * toast.success('Saved!');\n * ```\n */\nexport function createToastService(root: ParentNode = document.body): ToastService {\n  let host: ToastElement | null = null;\n  let configured = false;\n  let pendingConfig: ToastServiceConfig | null = null;\n\n  const getHost = (): ToastElement => {\n    if (host?.isConnected) return host;\n\n    // Re-use an existing element in the root (supports declarative placement).\n    host = (root instanceof Element ? root : (root as Document | ShadowRoot)).querySelector<ToastElement>('ore-toast');\n\n    if (!host) {\n      host = document.createElement('ore-toast') as ToastElement;\n\n      if (pendingConfig) {\n        if (pendingConfig.position) host.setAttribute('position', pendingConfig.position);\n\n        if (pendingConfig.max != null) host.setAttribute('max', String(pendingConfig.max));\n\n        pendingConfig = null;\n      }\n\n      (root as Element | Document).appendChild(host);\n    }\n\n    configured = true;\n\n    return host;\n  };\n\n  const service: ToastService = {\n    add(item) {\n      return getHost().add(item);\n    },\n\n    clear() {\n      getHost().clear();\n    },\n\n    configure(config) {\n      if (configured) {\n        warn('toast.configure() called after the container was already created; options ignored.');\n\n        return;\n      }\n\n      pendingConfig = { ...pendingConfig, ...config };\n    },\n\n    dismiss(id) {\n      getHost().dismiss(id);\n    },\n\n    error(message, opts) {\n      return service.add({ color: 'error', ...opts, message });\n    },\n\n    info(message, opts) {\n      return service.add({ color: 'info', ...opts, message });\n    },\n\n    async promise(promise, messages) {\n      const id = service.add({ color: 'primary', dismissible: false, duration: 0, message: messages.loading });\n\n      try {\n        const data = await promise;\n\n        service.update(id, {\n          color: 'success',\n          dismissible: true,\n          duration: 5000,\n          message: typeof messages.success === 'function' ? messages.success(data) : messages.success,\n        });\n\n        return data;\n      } catch (err) {\n        service.update(id, {\n          color: 'error',\n          dismissible: true,\n          duration: 5000,\n          message: typeof messages.error === 'function' ? messages.error(err) : messages.error,\n        });\n        throw err;\n      }\n    },\n\n    success(message, opts) {\n      return service.add({ color: 'success', ...opts, message });\n    },\n\n    update(id, updates) {\n      getHost().update(id, updates);\n    },\n\n    warning(message, opts) {\n      return service.add({ color: 'warning', ...opts, message });\n    },\n  };\n\n  return service;\n}\n\n/**\n * Singleton toast service — finds or creates a single `<ore-toast>` on `document.body`.\n *\n * @example\n * ```ts\n * import { toast } from '@vielzeug/refine';\n *\n * toast.success('Changes saved!');\n * toast.error('Upload failed', { duration: 0 });\n *\n * const id = toast.add({ message: 'Uploading…', duration: 0, dismissible: false });\n * toast.update(id, { message: 'Done!', color: 'success', duration: 3000, dismissible: true });\n *\n * await toast.promise(uploadFile(), {\n *   loading: 'Uploading…',\n *   success: (url) => `Uploaded to ${url}`,\n *   error: 'Upload failed',\n * });\n * ```\n */\nexport const toast: ToastService = createToastService();\n"],"mappings":"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"}

package/dist/toast.js

@@ -1,16 +1,16 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
 import { warn as t } from "./_dev.js";
 import { createSwipeControl as n } from "./headless/swipe.js";
-import r from "./feedback/toast/toast.css?inline.js";
-import { define as i, html as a, prop as o, ref as s } from "@vielzeug/ore";
-import { computed as c, signal as l, watch as u } from "@vielzeug/ripple";
-import { uuid as d } from "@vielzeug/arsenal";
+import r from "./feedback/toast/toast.css.js";
+import { define as i, getHost as a, html as o, onCleanup as s, onMounted as c, prop as l, ref as u, useEmit as d } from "@vielzeug/ore";
+import { computed as f, signal as p, watch as m } from "@vielzeug/ripple";
+import { uuid as h } from "@vielzeug/arsenal";
 //#region src/feedback/toast/toast.ts
-var f = 300;
-function p(e, t) {
-	return e.actions?.length ? a`
+var g = 300;
+function _(e, t) {
+	return e.actions?.length ? o`
     <div slot="actions" class="toast-actions">
-      ${e.actions.map((n) => a`
+      ${e.actions.map((n) => o`
           <ore-button
             size="sm"
             color=${n.color || e.color || "primary"}
@@ -24,11 +24,11 @@ function p(e, t) {
     </div>
   ` : "";
 }
-var m = "ore-toast";
-i(m, {
+var v = "ore-toast";
+i(v, {
 	props: {
-		max: o.number(5),
-		position: o.oneOf([
+		max: l.number(5),
+		position: l.oneOf([
 			"top-left",
 			"top-center",
 			"top-right",
@@ -37,59 +37,59 @@ i(m, {
 			"bottom-right"
 		], "bottom-right")
 	},
-	setup(e, { el: t, emit: r, onCleanup: i, onMounted: o }) {
-		let m = l([]), h = s(), g = /* @__PURE__ */ new Map(), _ = l(!1), v = l(!1), y = c(() => _.value || v.value), b = (e, t) => {
-			m.value = m.value.map((n) => n.id === e ? {
+	setup(e) {
+		let t = a(), r = d(), i = p([]), l = u(), v = /* @__PURE__ */ new Map(), y = p(!1), b = p(!1), x = f(() => y.value || b.value), S = (e, t) => {
+			i.value = i.value.map((n) => n.id === e ? {
 				...n,
 				...t
 			} : n);
-		}, x = (e) => m.value.find((t) => t.id === e), S = (e) => (e instanceof Event ? e.currentTarget : e).querySelector(".toast-inner"), C = (e) => (e.timer && clearTimeout(e.timer.timeoutId), {
+		}, C = (e) => i.value.find((t) => t.id === e), w = (e) => (e instanceof Event ? e.currentTarget : e).querySelector(".toast-inner"), T = (e) => (e.timer && clearTimeout(e.timer.timeoutId), {
 			...e,
 			timer: null
-		}), w = (e, t) => {
+		}), E = (e, t) => {
 			if (t <= 0) return;
-			let n = setTimeout(() => A(e), t);
-			b(e, { timer: {
+			let n = setTimeout(() => M(e), t);
+			S(e, { timer: {
 				remaining: t,
 				startedAt: Date.now(),
 				timeoutId: n
 			} });
-		}, T = () => {
-			m.value = m.value.map((e) => e.timer ? (clearTimeout(e.timer.timeoutId), {
+		}, D = () => {
+			i.value = i.value.map((e) => e.timer ? (clearTimeout(e.timer.timeoutId), {
 				...e,
 				timer: {
 					...e.timer,
 					remaining: Math.max(0, e.timer.remaining - (Date.now() - e.timer.startedAt))
 				}
 			}) : e);
-		}, E = () => {
-			for (let e of m.value) {
+		}, O = () => {
+			for (let e of i.value) {
 				if (!e.timer || e.timer.remaining <= 0) continue;
-				let t = setTimeout(() => A(e.id), e.timer.remaining);
-				b(e.id, { timer: {
+				let t = setTimeout(() => M(e.id), e.timer.remaining);
+				S(e.id, { timer: {
 					...e.timer,
 					startedAt: Date.now(),
 					timeoutId: t
 				} });
 			}
 		};
-		u(y, (e) => {
-			e ? T() : E();
+		m(x, (e) => {
+			e ? D() : O();
 		});
-		let D = (e) => {
+		let k = (e) => {
 			let t = ({ event: e }) => {
-				let t = S(e);
+				let t = w(e);
 				t && (t.style.transition = "", t.style.transform = "", t.style.opacity = "");
 			};
 			return n({
 				axis: () => "x",
 				captureTarget: () => null,
-				disabled: c(() => !(x(e)?.dismissible ?? !0)),
+				disabled: f(() => !(C(e)?.dismissible ?? !0)),
 				onCancel: t,
 				onCommit: ({ distance: t, event: n }) => {
-					let r = S(n);
+					let r = w(n);
 					if (!r) return;
-					let i = t >= 0 ? 1 : -1, a = window.matchMedia("(prefers-reduced-motion: reduce)").matches, o = () => O(e);
+					let i = t >= 0 ? 1 : -1, a = window.matchMedia("(prefers-reduced-motion: reduce)").matches, o = () => A(e);
 					if (a) {
 						r.style.opacity = "0", o();
 						return;
@@ -103,18 +103,18 @@ i(m, {
 					r.addEventListener("transitionend", s);
 				},
 				onMove: ({ distance: e, event: t }) => {
-					let n = S(t);
+					let n = w(t);
 					n && (n.style.transition = "none", n.style.transform = `translateX(${e}px)`, n.style.opacity = String(Math.max(0, 1 - Math.abs(e) / 200)));
 				},
 				onRelease: t
 			});
-		}, O = (e) => {
-			let t = x(e);
-			t?.timer && clearTimeout(t.timer.timeoutId), g.delete(e), m.value = m.value.filter((t) => t.id !== e), t?.onDismiss?.(), r("dismiss", { id: e });
-		}, k = (t) => {
-			let n = t.id || d(), i = e.max?.value ?? 5, a = m.value.filter((e) => e.phase !== "exiting"), o = a.length - (i - 1);
-			if (o > 0) for (let e of a.slice(0, o)) A(e.id);
-			let s = {
+		}, A = (e) => {
+			let t = C(e);
+			t?.timer && clearTimeout(t.timer.timeoutId), v.delete(e), i.value = i.value.filter((t) => t.id !== e), t?.onDismiss?.(), r("dismiss", { id: e });
+		}, j = (t) => {
+			let n = t.id || h(), a = e.max?.value ?? 5, o = i.value.filter((e) => e.phase !== "exiting"), s = o.length - (a - 1);
+			if (s > 0) for (let e of o.slice(0, s)) M(e.id);
+			let c = {
 				dismissible: !0,
 				duration: 5e3,
 				...t,
@@ -122,51 +122,51 @@ i(m, {
 				phase: "entering",
 				timer: null
 			};
-			return g.set(n, D(n)), m.value = [...m.value, s], r("add", { id: n }), requestAnimationFrame(() => {
-				x(n)?.phase === "entering" && b(n, { phase: "active" });
-			}), s.duration > 0 && w(n, s.duration), n;
-		}, A = (e) => {
-			let t = x(e);
+			return v.set(n, k(n)), i.value = [...i.value, c], r("add", { id: n }), requestAnimationFrame(() => {
+				C(n)?.phase === "entering" && S(n, { phase: "active" });
+			}), c.duration > 0 && E(n, c.duration), n;
+		}, M = (e) => {
+			let t = C(e);
 			if (!t || t.phase === "exiting") return;
-			b(e, {
-				...C(t),
+			S(e, {
+				...T(t),
 				phase: "exiting"
 			});
-			let n = h.value?.querySelector(`[data-toast-id="${e}"] .toast-inner`);
+			let n = l.value?.querySelector(`[data-toast-id="${e}"] .toast-inner`);
 			n?.offsetHeight;
 			let r = !1, i = () => {
-				r || (r = !0, O(e));
-			}, a = n ? parseFloat(getComputedStyle(n).transitionDuration) * 1e3 : NaN, o = setTimeout(i, (Number.isFinite(a) && a > 0 ? a : f) + 50), s = (t) => {
-				t.target?.closest?.(`[data-toast-id="${e}"]`) && (h.value?.removeEventListener("transitionend", s), clearTimeout(o), i());
+				r || (r = !0, A(e));
+			}, a = n ? parseFloat(getComputedStyle(n).transitionDuration) * 1e3 : NaN, o = setTimeout(i, (Number.isFinite(a) && a > 0 ? a : g) + 50), s = (t) => {
+				t.target?.closest?.(`[data-toast-id="${e}"]`) && (l.value?.removeEventListener("transitionend", s), clearTimeout(o), i());
 			};
-			h.value?.addEventListener("transitionend", s);
-		}, j = (e, t) => {
-			let n = x(e);
+			l.value?.addEventListener("transitionend", s);
+		}, N = (e, t) => {
+			let n = C(e);
 			if (!n) return;
-			let r = t.duration === void 0 ? n : C(n);
-			b(e, {
+			let r = t.duration === void 0 ? n : T(n);
+			S(e, {
 				...r,
 				...t,
 				id: e
-			}), t.duration !== void 0 && t.duration > 0 && w(e, t.duration);
-		}, M = () => {
-			for (let e of m.value) e.phase !== "exiting" && A(e.id);
-		}, N = (e) => e.urgency ?? (e.color === "error" ? "assertive" : "polite"), P = c(() => m.value.filter((e) => N(e) === "polite")), F = c(() => m.value.filter((e) => N(e) === "assertive"));
-		i(() => {
-			for (let e of m.value) e.timer && clearTimeout(e.timer.timeoutId);
-			g.clear();
+			}), t.duration !== void 0 && t.duration > 0 && E(e, t.duration);
+		}, P = () => {
+			for (let e of i.value) e.phase !== "exiting" && M(e.id);
+		}, F = (e) => e.urgency ?? (e.color === "error" ? "assertive" : "polite"), I = f(() => i.value.filter((e) => F(e) === "polite")), L = f(() => i.value.filter((e) => F(e) === "assertive"));
+		s(() => {
+			for (let e of i.value) e.timer && clearTimeout(e.timer.timeoutId);
+			v.clear();
 		});
-		let I = (e) => {
-			let t = () => A(e.id);
-			return a`
+		let R = (e) => {
+			let t = () => M(e.id);
+			return o`
         <div
           class="toast-wrapper"
           data-toast-id=${e.id}
           part="toast-wrapper"
-          @pointerdown=${(t) => g.get(e.id)?.handlePointerDown(t)}
-          @pointermove=${(t) => g.get(e.id)?.handlePointerMove(t)}
-          @pointerup=${(t) => g.get(e.id)?.handlePointerUp(t)}
-          @pointercancel=${(t) => g.get(e.id)?.handlePointerCancel(t)}>
+          @pointerdown=${(t) => v.get(e.id)?.handlePointerDown(t)}
+          @pointermove=${(t) => v.get(e.id)?.handlePointerMove(t)}
+          @pointerup=${(t) => v.get(e.id)?.handlePointerUp(t)}
+          @pointercancel=${(t) => v.get(e.id)?.handlePointerCancel(t)}>
           <div class="${() => `toast-inner${e.phase === "active" ? "" : ` ${e.phase}`}`}" part="toast-inner">
             <ore-alert
               color=${e.color || (e.urgency === "assertive" ? "error" : "primary")}
@@ -177,31 +177,31 @@ i(m, {
               heading=${e.heading || ""}
               ?dismissible=${e.dismissible !== !1}
               @dismiss=${t}>
-              ${e.meta ? a`<span slot="meta">${e.meta}</span>` : ""} ${e.message}
-              ${p(e, t)}
+              ${e.meta ? o`<span slot="meta">${e.meta}</span>` : ""} ${e.message}
+              ${_(e, t)}
             </ore-alert>
           </div>
         </div>
       `;
 		};
-		return o(() => {
+		return c(() => {
 			let e = t;
-			e.add = k, e.clear = M, e.dismiss = A, e.update = j;
-		}), a`
+			e.add = j, e.clear = P, e.dismiss = M, e.update = N;
+		}), o`
       <div
         class="toast-container"
-        ref=${h}
+        ref=${l}
         @pointerenter=${() => {
-			_.value = !0, t.classList.add("hovered");
+			y.value = !0, t.classList.add("hovered");
 		}}
         @pointerleave=${() => {
-			_.value = !1, t.classList.remove("hovered");
+			y.value = !1, t.classList.remove("hovered");
 		}}
         @focusin=${() => {
-			v.value = !0;
+			b.value = !0;
 		}}
         @focusout=${() => {
-			v.value = !1;
+			b.value = !1;
 		}}
         part="container">
         <!-- Polite live region: normal informational toasts -->
@@ -212,7 +212,7 @@ i(m, {
           aria-atomic="false"
           aria-label="Notifications"
           class="toast-live-region">
-          ${() => P.value.map(I)}
+          ${() => I.value.map(R)}
         </div>
         <!-- Assertive live region: critical errors that interrupt immediately -->
         <div
@@ -222,7 +222,7 @@ i(m, {
           aria-atomic="false"
           aria-label="Critical notifications"
           class="toast-live-region">
-          ${() => F.value.map(I)}
+          ${() => L.value.map(R)}
         </div>
         <slot></slot>
       </div>
@@ -230,7 +230,7 @@ i(m, {
 	},
 	styles: [e, r]
 });
-function h(e = document.body) {
+function y(e = document.body) {
 	let n = null, r = !1, i = null, a = () => n?.isConnected ? n : (n = (e instanceof Element, e).querySelector("ore-toast"), n || (n = document.createElement("ore-toast"), i &&= (i.position && n.setAttribute("position", i.position), i.max != null && n.setAttribute("max", String(i.max)), null), e.appendChild(n)), r = !0, n), o = {
 		add(e) {
 			return a().add(e);
@@ -309,8 +309,8 @@ function h(e = document.body) {
 	};
 	return o;
 }
-var g = h();
+var b = y();
 //#endregion
-export { m as TOAST_TAG, h as createToastService, g as toast };
+export { v as TOAST_TAG, y as createToastService, b as toast };
 
 //# sourceMappingURL=toast.js.map