import "./icon-CTW4Gr4z.js";
import "./progress-BNSMlrtH.js";
import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/toast-item/toast-item.d.ts
/**
 * <sigvelo-toast-item>
 *
 * @summary Notifications displayed by the toast component.
 * @tag sigvelo-toast-item
 * @documentation https://design-system.sigvelo.com/docs/components/toast-item
 * @status stable
 * @since 1.0
 *
 * @dependency sigvelo-icon
 * @dependency sigvelo-progress
 *
 * @slot - Content to show in the toast item.
 * @slot icon - Content to show as a visual. Usually an icon, image, avatar, etc.
 *
 * @event sigvelo-before-close - Emitted when the toast item is dismissed.
 * @event sigvelo-close - Emitted after the toast has been dismissed and the hide animation has completed.
 *
 * @csspart icon
 * @csspart content
 * @csspart close-button - The close button, a `<button>` element.
 * @csspart progress - The progress ring, a `<sigvelo-progress>` element.
 * @csspart progress__track - The progress ring's exported `track` part.
 * @csspart progress__indicator - The progress ring's exported `indicator` part.
 * @csspart progress__content - The progress ring's exported `content` part.
 * @csspart close-icon - The close icon, a `<sigvelo-icon>` element.
 * @csspart close-icon__svg - The close icons exported `svg` part.
 *
 * @cssproperty [--accent-line-width=0.33em] - The width of the notification's accent line.
 * @cssproperty --progress - A readonly value that goes from 100% to 0%, representing the progress remaining until the
 *  notification closes. Useful for creating custom content with visual indicators of the notification's progress.
 *
 * @example Default
 * You can create toast items on the fly using the toast element's `create()` method. Alternatively, you can create them declaratively by wrapping them in a `<template>` and calling `createFromTemplate()`.
 *
 * ```html
 * <sigvelo-toast-item color="primary" duration="0">
 *   <sigvelo-avatar slot="icon" label="Meowy McGee's avatar" image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
 *   <strong>Meowy McGee</strong><br>
 *   <small style="color: var(--sigvelo-color-text-muted);">has sent you a message</small>
 * </sigvelo-toast-item>
 * ```
 *
 * **Note:** For documentation purposes, this page omits the `<template>` tag, allowing the toast item to appear inline so you can see the result of each example.
 *
 * @example Variants
 * Set the `color` attribute to `default`, `primary`, `success`, or `destructive` to change the button's color.
 *
 * ```html
 * <sigvelo-toast-item color="neutral" duration="0">
 *   <sigvelo-icon slot="icon" name="settings"></sigvelo-icon>
 *   Your changes have been saved
 * </sigvelo-toast-item>
 *
 * <sigvelo-toast-item color="primary" duration="0">
 *   <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
 *   The cats have requested more food
 * </sigvelo-toast-item>
 *
 * <sigvelo-toast-item color="success" duration="0">
 *   <sigvelo-icon slot="icon" name="send"></sigvelo-icon>
 *   Your message has been sent
 * </sigvelo-toast-item>
 *
 * <sigvelo-toast-item color="destructive" duration="0">
 *   <sigvelo-icon slot="icon" name="alert-triangle"></sigvelo-icon>
 *   The litter box has been emptied
 * </sigvelo-toast-item>
 * ```
 *
 * @example Adding icons
 * Use the `icon` slot to add a visual to the toast item. Icons, images, and avatars work well here.
 *
 * ```html
 * <sigvelo-toast-item duration="0">
 *   <sigvelo-avatar slot="icon" label="Chill kitty" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
 *   <strong>Chill Kitty</strong><br>
 *   <small style="color: var(--sigvelo-color-text-muted);">has invited you to collaborate on a project</small>
 * </sigvelo-toast-item>
 * ```
 *
 * @example Changing the duration
 * By default, toast items dismiss themselves after five seconds. Set the `duration` property to the number of milliseconds the item should wait before dismissing, or `0` to wait for the user to dismiss it.
 *
 * ```html
 * <sigvelo-toast-item duration="10000">
 *   This notification will stay open for 10 seconds.
 * </sigvelo-toast-item>
 *
 * <sigvelo-toast-item duration="0">
 *   This notification will stay open until the user closes it
 * </sigvelo-toast-item>
 * ```
 *
 * @example Hiding the close button
 * Use the `without-close` attribute to hide the close button. This is only recommended when a duration is set or when you're using custom buttons to dismiss the notification.
 *
 * ```html
 * <sigvelo-toast-item without-close duration="0">
 *   This notification does not have a close button.
 * </sigvelo-toast-item>
 * ```
 *
 * **Warning:** Do not use this as a way to force the notification to stay open. You should provide a custom close button when you use this option. Remember that users can also press <sigvelo-hotkey keys="$escape"></sigvelo-hotkey> to close a notification.
 */
declare class SigveloToastItem extends SigveloElement {
  static observeSlots: boolean;
  static styles: CSSResultGroup;
  private animationFrame;
  private isPaused;
  private localize;
  private startTime;
  /**
   * @internal The amount of time left before the notification is removed. Moves from 100 (full time left) to zero (no
   *  time left).
   */
  timeLeft: number;
  /** The type of notification to render. */
  color: "primary" | "success" | "destructive" | "neutral";
  /**
   * The length of time to show the notification before removing it. Set this to `0` to show the notification until the
   * user dismisses it.
   */
  duration: number;
  /** When set, the close button will be omitted. */
  withoutClose: boolean;
  connectedCallback(): void;
  disconnectedCallback(): void;
  updated(changedProperties: PropertyValues<this>): void;
  /**
   * @internal Starts the auto-dismiss timer. If no duration is specified, this method has no effect.
   */
  startTimer(): void;
  /**
   * @internal Stops the auto-dismiss timer.
   */
  stopTimer(): void;
  private tick;
  /** Close it! */
  private handleCloseClick;
  /** Pause the timer on hover in */
  private handlePointerEnter;
  /** Resume the timer on hover out */
  private handlePointerLeave;
  /** Waits for the toast stack's transition group to finish transitioning and then resolves. */
  private waitForStackTransition;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-toast-item": SigveloToastItem;
  }
}
//#endregion
export { SigveloToastItem as t };