vue-toastflow 0.0.1

package/dist/vue-toastflow.css

@@ -0,0 +1 @@
+:root{--tf-toast-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--tf-toast-radius: .75rem;--tf-toast-padding: 1rem;--normal-bg: #fff;--normal-border: #e6e8eb;--normal-text: #11181c;--loading-bg: hsl(48, 100%, 96%);--loading-border: hsl(46, 100%, 88%);--loading-text: hsl(40, 100%, 32%);--tf-toast-bg: var(--normal-bg);--tf-toast-color: var(--normal-text);--tf-toast-border-color: var(--normal-border);--success-bg: hsl(143, 85%, 96%);--success-border: hsl(145, 92%, 87%);--success-text: hsl(140, 100%, 27%);--info-bg: hsl(208, 100%, 97%);--info-border: hsl(221, 91%, 93%);--info-text: hsl(210, 92%, 45%);--warning-bg: hsl(49, 100%, 97%);--warning-border: hsl(49, 91%, 84%);--warning-text: hsl(31, 92%, 45%);--error-bg: hsl(359, 100%, 97%);--error-border: hsl(359, 100%, 94%);--error-text: hsl(360, 100%, 45%);--tf-toast-title-font-size: .85rem;--tf-toast-title-font-weight: 600;--tf-toast-description-font-size: .8rem;--tf-toast-description-color: var(--tf-toast-color);--tf-toast-created-at-font-size: .7rem;--tf-toast-gap: .8rem;--tf-toast-accent-loading: var(--loading-text);--tf-toast-accent-default: var(--normal-text);--tf-toast-accent-success: var(--success-text);--tf-toast-accent-error: var(--error-text);--tf-toast-accent-warning: var(--warning-text);--tf-toast-accent-info: var(--info-text);--tf-toast-icon-size: 24px;--tf-toast-icon-loading: var(--loading-text);--tf-toast-icon-default: var(--normal-text);--tf-toast-icon-success: var(--success-text);--tf-toast-icon-error: var(--error-text);--tf-toast-icon-warning: var(--warning-text);--tf-toast-icon-info: var(--info-text);--tf-toast-close-size: 18px;--tf-toast-close-border-color: var(--tf-toast-border-color);--tf-toast-close-color: var(--tf-toast-color);--tf-toast-close-bg: var(--tf-toast-bg);--tf-toast-close-ring-color: var(--tf-toast-border-color);--tf-toast-progress-height: 4px;--tf-toast-progress-bg: transparent;--tf-toast-progress-bar-bg: var(--tf-toast-accent-success);--tf-toast-progress-duration: 5s;--tf-toast-motion-offset: 10px}.tf-toast--paused .tf-toast-progress-bar{animation-play-state:paused}.tf-toast-item[data-position^=top-]{--tf-toast-motion-offset: -10px}.tf-toast-item[data-position^=bottom-]{--tf-toast-motion-offset: 10px}.Toastflow__animation-enter-active{animation:Toastflow__enter-kf .26s cubic-bezier(.5,1,.25,1);animation-fill-mode:both}.Toastflow__animation-leave-active{animation:Toastflow__leave-kf .22s ease;animation-fill-mode:both}.Toastflow__animation-clearAll{animation:Toastflow__clearAll-kf .26s cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.Toastflow__animation-move{transition:transform .26s cubic-bezier(.5,1,.25,1);will-change:transform}.Toastflow__animation-bump{animation:Toastflow__bump-kf .14s ease-out;animation-fill-mode:both}.Toastflow__animation-update{animation:Toastflow__update-kf .32s cubic-bezier(.33,1,.68,1);animation-fill-mode:both}@keyframes Toastflow__enter-kf{0%{transform:translate3d(0,var(--tf-toast-motion-offset),0) scale(.9);opacity:0}to{transform:translateZ(0) scale(1);opacity:1}}@keyframes Toastflow__leave-kf{0%{transform:translateZ(0) scale(1);opacity:1}to{transform:translate3d(0,var(--tf-toast-motion-offset),0) scale(.9);opacity:0}}@keyframes Toastflow__clearAll-kf{0%{opacity:1}to{opacity:0}}@keyframes Toastflow__bump-kf{0%{transform:scale(1)}40%{transform:scale(1.01)}to{transform:scale(1)}}@keyframes Toastflow__update-kf{0%{opacity:.4;transform:scale(.985)}40%{opacity:1;transform:scale(1.01)}to{opacity:1;transform:scale(1)}}.tf-toast-progress[data-v-ca0da064]{height:var(--tf-toast-progress-height);width:100%;border-radius:0 0 var(--tf-toast-radius) var(--tf-toast-radius);background:var(--tf-toast-progress-bg)}.tf-toast-progress-bar[data-v-ca0da064]{height:100%;animation-name:tf-toast-progress-ca0da064;animation-duration:var(--tf-toast-progress-duration, 5s);animation-timing-function:linear;animation-fill-mode:forwards}.tf-toast-progress-bar--default[data-v-ca0da064]{background:var(--tf-toast-accent-default)}.tf-toast-progress-bar--success[data-v-ca0da064]{background:var(--tf-toast-accent-success)}.tf-toast-progress-bar--error[data-v-ca0da064]{background:var(--tf-toast-accent-error)}.tf-toast-progress-bar--warning[data-v-ca0da064]{background:var(--tf-toast-accent-warning)}.tf-toast-progress-bar--info[data-v-ca0da064]{background:var(--tf-toast-accent-info)}@keyframes tf-toast-progress-ca0da064{0%{width:100%}to{width:0}}.tf-toast-wrapper[data-v-edee5727]{pointer-events:auto;width:100%}.tf-toast[data-v-edee5727]{cursor:pointer;position:relative;width:100%;--tf-toast-close-bg: var(--tf-toast-bg);--tf-toast-close-color: var(--tf-toast-color);--tf-toast-close-border-color: var(--tf-toast-border-color)}.tf-toast-accent--loading[data-v-edee5727]{--tf-toast-bg: var(--loading-bg);--tf-toast-border-color: var(--loading-border);--tf-toast-color: var(--loading-text);--tf-toast-description-color: var(--loading-text);--tf-toast-progress-bg: color-mix( in srgb, var(--loading-text) 20%, transparent )}.tf-toast-accent--default[data-v-edee5727]{--tf-toast-bg: var(--normal-bg);--tf-toast-border-color: var(--normal-border);--tf-toast-color: var(--normal-text);--tf-toast-description-color: var(--normal-text);--tf-toast-progress-bg: color-mix( in srgb, var(--normal-text) 20%, transparent )}.tf-toast-accent--success[data-v-edee5727]{--tf-toast-bg: var(--success-bg);--tf-toast-border-color: var(--success-border);--tf-toast-color: var(--success-text);--tf-toast-description-color: var(--success-text);--tf-toast-progress-bg: color-mix( in srgb, var(--success-text) 20%, transparent )}.tf-toast-accent--error[data-v-edee5727]{--tf-toast-bg: var(--error-bg);--tf-toast-border-color: var(--error-border);--tf-toast-color: var(--error-text);--tf-toast-description-color: var(--error-text);--tf-toast-progress-bg: color-mix( in srgb, var(--error-text) 20%, transparent )}.tf-toast-accent--warning[data-v-edee5727]{--tf-toast-bg: var(--warning-bg);--tf-toast-border-color: var(--warning-border);--tf-toast-color: var(--warning-text);--tf-toast-description-color: var(--warning-text);--tf-toast-progress-bg: color-mix( in srgb, var(--warning-text) 20%, transparent )}.tf-toast-accent--info[data-v-edee5727]{--tf-toast-bg: var(--info-bg);--tf-toast-border-color: var(--info-border);--tf-toast-color: var(--info-text);--tf-toast-description-color: var(--info-text);--tf-toast-progress-bg: color-mix(in srgb, var(--info-text) 20%, transparent)}.tf-toast-surface[data-v-edee5727]{position:relative;display:block;min-width:0;padding:var(--tf-toast-padding);border-radius:var(--tf-toast-radius);background-color:var(--tf-toast-bg);color:var(--tf-toast-color);border:1px solid var(--tf-toast-border-color);font-family:var(--tf-toast-font-family);overflow:hidden}.tf-toast-main[data-v-edee5727]{display:flex;align-items:center;gap:var(--tf-toast-gap)}.tf-toast-icon-spin[data-v-edee5727]{display:inline-block;animation:tf-toast-spin-edee5727 .8s linear infinite;transform-origin:center}@keyframes tf-toast-spin-edee5727{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tf-toast-icon-svg[data-v-edee5727]{width:var(--tf-toast-icon-size);height:var(--tf-toast-icon-size)}.tf-toast-icon--loading .tf-toast-icon-svg[data-v-edee5727]{color:var(--tf-toast-icon-loading)}.tf-toast-icon--default .tf-toast-icon-svg[data-v-edee5727]{color:var(--tf-toast-icon-default)}.tf-toast-icon--success .tf-toast-icon-svg[data-v-edee5727]{color:var(--tf-toast-icon-success)}.tf-toast-icon--error .tf-toast-icon-svg[data-v-edee5727]{color:var(--tf-toast-icon-error)}.tf-toast-icon--warning .tf-toast-icon-svg[data-v-edee5727]{color:var(--tf-toast-icon-warning)}.tf-toast-icon--info .tf-toast-icon-svg[data-v-edee5727]{color:var(--tf-toast-icon-info)}.tf-toast-body[data-v-edee5727]{position:relative;z-index:1;min-width:0;flex:1 1 auto;display:flex;flex-direction:column}.tf-toast-created-at[data-v-edee5727]{position:absolute;bottom:0;right:0;color:var(--tf-toast-description-color);font-size:var(--tf-toast-created-at-font-size);font-style:italic}.tf-toast-title[data-v-edee5727]{margin:0;font-size:var(--tf-toast-title-font-size);font-weight:var(--tf-toast-title-font-weight);line-height:1.25;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tf-toast-description[data-v-edee5727]{margin:0;font-size:var(--tf-toast-description-font-size);color:var(--tf-toast-description-color)}.tf-toast-close[data-v-edee5727]{position:absolute;top:0;right:0;transform:translate(40%,-40%);height:var(--tf-toast-close-size);width:var(--tf-toast-close-size);border-radius:999px;border:1px solid var(--tf-toast-close-border-color);background:var(--tf-toast-close-bg);color:var(--tf-toast-close-color);font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:2}.tf-toast-close-icon[data-v-edee5727]{width:12px;height:12px}.tf-toast-close[data-v-edee5727]:focus-visible{outline:2px solid var(--tf-toast-close-ring-color);outline-offset:2px}.tf-toast-progress-wrapper[data-v-edee5727]{position:absolute;left:0;right:0;bottom:0;margin:0}.tf-toast-root[data-v-b00384d2]{pointer-events:none;position:fixed;inset:0}.tf-toast-stack[data-v-b00384d2]{position:absolute;height:100%;display:flex;align-items:flex-start}.tf-toast-stack-inner[data-v-b00384d2]{display:flex;flex-direction:column;position:relative;width:100%}.tf-toast-stack-inner--bottom[data-v-b00384d2]{min-height:100%;justify-content:flex-end}.tf-toast-stack--left[data-v-b00384d2]{justify-content:flex-start}.tf-toast-stack--center[data-v-b00384d2]{justify-content:center}.tf-toast-stack--right[data-v-b00384d2]{justify-content:flex-end}.tf-toast-item[data-v-b00384d2]{pointer-events:auto;width:100%}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "vue-toastflow",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "toastflow-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.13",
+    "vue": "^3.5.24"
+  }
+}

package/src/components/Toast.vue

@@ -0,0 +1,660 @@
+<script setup lang="ts">
+import { computed, type CSSProperties, inject, ref, watch } from "vue";
+import ToastProgress from "./ToastProgress.vue";
+import type {
+  ToastContext,
+  ToastId,
+  ToastInstance,
+  ToastStore,
+  ToastType,
+} from "toastflow-core";
+import { toastStoreKey } from "../symbols";
+import CheckCircle from "./icons/CheckCircle.vue";
+import XCircle from "./icons/XCircle.vue";
+import Bell from "./icons/Bell.vue";
+import InfoCircle from "./icons/InfoCircle.vue";
+import QuestionMarkCircle from "./icons/QuestionMarkCircle.vue";
+import ArrowPath from "./icons/ArrowPath.vue";
+import XMark from "./icons/XMark.vue";
+
+const {
+  toast,
+  progressResetKey,
+  duplicateKey,
+  updateKey,
+  bumpAnimationClass,
+  clearAllAnimationClass,
+  updateAnimationClass,
+} = defineProps<{
+  toast: ToastInstance;
+  progressResetKey?: number;
+  duplicateKey?: number;
+  updateKey?: number;
+  bumpAnimationClass?: string;
+  clearAllAnimationClass?: string;
+  updateAnimationClass?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "dismiss", id: ToastId): void;
+}>();
+
+const injectedStore = inject<ToastStore | null>(toastStoreKey, null);
+if (!injectedStore) {
+  throw new Error("[vue-toastflow] Plugin not installed");
+}
+const store: ToastStore = injectedStore;
+
+const isHovered = ref(false);
+const isBumped = ref(false);
+const isUpdated = ref(false);
+
+const typeMeta: Record<
+  ToastType,
+  {
+    accent: string;
+    icon: string;
+    close: string;
+    component: any;
+  }
+> = {
+  success: {
+    accent: "tf-toast-accent--success",
+    icon: "tf-toast-icon--success",
+    close: "tf-toast-close--success",
+    component: CheckCircle,
+  },
+  error: {
+    accent: "tf-toast-accent--error",
+    icon: "tf-toast-icon--error",
+    close: "tf-toast-close--error",
+    component: XCircle,
+  },
+  warning: {
+    accent: "tf-toast-accent--warning",
+    icon: "tf-toast-icon--warning",
+    close: "tf-toast-close--warning",
+    component: Bell,
+  },
+  info: {
+    accent: "tf-toast-accent--info",
+    icon: "tf-toast-icon--info",
+    close: "tf-toast-close--info",
+    component: InfoCircle,
+  },
+  default: {
+    accent: "tf-toast-accent--default",
+    icon: "tf-toast-icon--default",
+    close: "tf-toast-close--default",
+    component: QuestionMarkCircle,
+  },
+  loading: {
+    accent: "tf-toast-accent--loading",
+    icon: "tf-toast-icon--loading",
+    close: "tf-toast-close--loading",
+    component: ArrowPath,
+  },
+};
+
+const role = computed(function () {
+  return assertiveTypes.has(toast.type) ? "alert" : "status";
+});
+
+const ariaLive = computed(function () {
+  return assertiveTypes.has(toast.type) ? "assertive" : "polite";
+});
+
+const accentClass = computed(function () {
+  return typeMeta[toast.type].accent;
+});
+
+const iconWrapperClass = computed(function () {
+  return typeMeta[toast.type].icon;
+});
+
+const closeWrapperClass = computed(function () {
+  return typeMeta[toast.type].close;
+});
+
+const defaultIconComponent = computed(function () {
+  return typeMeta[toast.type].component;
+});
+
+const assertiveTypes = new Set<ToastType>(["error", "warning"]);
+
+const progressStyle = computed(function (): CSSProperties {
+  return {
+    "--tf-toast-progress-duration": `${toast.duration}ms`,
+  };
+});
+
+const defaultCreatedAtFormatter = function (createdAt: number): string {
+  return new Date(createdAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+const hasCreatedAt = computed(function () {
+  return Boolean(toast.showCreatedAt && Number.isFinite(toast.createdAt));
+});
+
+const createdAtText = computed(function () {
+  if (!hasCreatedAt.value) {
+    return "";
+  }
+
+  const formatter =
+    typeof toast.createdAtFormatter === "function"
+      ? toast.createdAtFormatter
+      : defaultCreatedAtFormatter;
+
+  try {
+    return formatter(toast.createdAt);
+  } catch (error) {
+    return defaultCreatedAtFormatter(toast.createdAt);
+  }
+});
+
+const createdAtAriaLabel = computed(function () {
+  if (!createdAtText.value) {
+    return "";
+  }
+  return `Sent at ${createdAtText.value}`;
+});
+
+const titleAriaLabel = computed(function () {
+  return toAriaText(toast.title);
+});
+
+const descriptionAriaLabel = computed(function () {
+  return toAriaText(toast.description);
+});
+
+const toastAriaLabel = computed(function () {
+  const parts = [];
+
+  if (titleAriaLabel.value) {
+    parts.push(titleAriaLabel.value);
+  }
+
+  if (descriptionAriaLabel.value) {
+    parts.push(descriptionAriaLabel.value);
+  }
+
+  if (hasCreatedAt.value && createdAtAriaLabel.value) {
+    parts.push(createdAtAriaLabel.value);
+  }
+
+  if (!parts.length) {
+    parts.push(`${toast.type} notification`);
+  }
+
+  return parts.join(". ");
+});
+
+function toAriaText(value: string): string {
+  if (!value) {
+    return "";
+  }
+  return stripHtmlToText(value);
+}
+
+function stripHtmlToText(value: string): string {
+  const fallback = normalizeWhitespace(value.replace(/<[^>]*>/g, " "));
+
+  if (typeof window === "undefined" || !window.document) {
+    return fallback;
+  }
+
+  try {
+    const container = window.document.createElement("div");
+    container.innerHTML = value;
+    return normalizeWhitespace(container.textContent ?? "");
+  } catch (error) {
+    return fallback;
+  }
+}
+
+function normalizeWhitespace(value: string): string {
+  return value.replace(/\s+/g, " ").trim();
+}
+
+function createContext(): ToastContext {
+  return {
+    id: toast.id,
+    position: toast.position,
+    type: toast.type,
+    title: toast.title,
+    description: toast.description,
+    createdAt: toast.createdAt,
+  };
+}
+
+function handleClick(event: MouseEvent) {
+  const context = createContext();
+
+  if (toast.onClick) {
+    toast.onClick(context, event);
+  }
+
+  if (toast.closeOnClick) {
+    emit("dismiss", toast.id);
+  }
+}
+
+function handleCloseClick() {
+  emit("dismiss", toast.id);
+}
+
+function handleMouseEnter() {
+  if (!toast.pauseOnHover) {
+    return;
+  }
+  isHovered.value = true;
+  store.pause(toast.id);
+}
+
+function handleMouseLeave() {
+  if (!toast.pauseOnHover) {
+    return;
+  }
+  isHovered.value = false;
+  store.resume(toast.id);
+}
+
+const progressKeyLocal = ref(0);
+
+watch(
+  () => progressResetKey,
+  function () {
+    if (progressResetKey == null) {
+      return;
+    }
+    progressKeyLocal.value += 1;
+  },
+);
+
+watch(
+  () => duplicateKey,
+  function () {
+    if (duplicateKey == null) {
+      return;
+    }
+
+    progressKeyLocal.value += 1;
+
+    triggerBump();
+  },
+);
+
+watch(
+  () => updateKey,
+  function () {
+    if (updateKey == null) {
+      return;
+    }
+
+    triggerUpdate();
+  },
+);
+
+function triggerBump() {
+  isBumped.value = false;
+  requestAnimationFrame(function () {
+    isBumped.value = true;
+  });
+}
+
+function triggerUpdate() {
+  isUpdated.value = false;
+  requestAnimationFrame(function () {
+    isUpdated.value = true;
+  });
+}
+</script>
+
+<template>
+  <div :role="role" :aria-live="ariaLive" class="tf-toast-wrapper">
+    <div
+      class="tf-toast"
+      :aria-label="toastAriaLabel || undefined"
+      :class="[
+        accentClass,
+        isBumped &&
+          toast.phase !== 'leaving' &&
+          toast.phase !== 'clear-all' &&
+          bumpAnimationClass,
+        isUpdated &&
+          toast.phase !== 'leaving' &&
+          toast.phase !== 'clear-all' &&
+          updateAnimationClass,
+        toast.phase === 'clear-all' && clearAllAnimationClass,
+        isHovered && 'tf-toast--paused',
+      ]"
+      @click="handleClick"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+    >
+      <div class="tf-toast-surface">
+        <!-- main row -->
+        <div class="tf-toast-main">
+          <!-- icon (slot + lucide defaults) -->
+          <div
+            class="tf-toast-icon"
+            :class="iconWrapperClass"
+            aria-hidden="true"
+          >
+            <slot name="icon" :toast="toast">
+              <component
+                :is="defaultIconComponent"
+                class="tf-toast-icon-svg"
+                :class="[toast.type === 'loading' && 'tf-toast-icon-spin']"
+                aria-hidden="true"
+              />
+            </slot>
+          </div>
+
+          <!-- content -->
+          <div class="tf-toast-body">
+            <div class="tf-toast-text">
+              <p
+                v-if="toast.title && !toast.supportHtml"
+                :aria-label="titleAriaLabel || undefined"
+                class="tf-toast-title"
+              >
+                {{ toast.title }}
+              </p>
+              <p
+                v-else-if="toast.title && toast.supportHtml"
+                class="tf-toast-title"
+                :aria-label="titleAriaLabel || undefined"
+                v-html="toast.title"
+              ></p>
+
+              <p
+                v-if="toast.description && !toast.supportHtml"
+                :aria-label="descriptionAriaLabel || undefined"
+                class="tf-toast-description"
+              >
+                {{ toast.description }}
+              </p>
+              <p
+                v-else-if="toast.description && toast.supportHtml"
+                class="tf-toast-description"
+                :aria-label="descriptionAriaLabel || undefined"
+                v-html="toast.description"
+              ></p>
+            </div>
+
+            <slot :toast="toast" />
+
+            <div v-if="hasCreatedAt" class="tf-toast-created-at">
+              <slot name="created-at" :toast="toast" :formatted="createdAtText">
+                <span :aria-label="createdAtAriaLabel || undefined">
+                  {{ createdAtText }}
+                </span>
+              </slot>
+            </div>
+          </div>
+        </div>
+
+        <!-- bottom progress -->
+        <div
+          v-if="toast.progressBar"
+          class="tf-toast-progress-wrapper"
+          :style="progressStyle"
+        >
+          <slot name="progress" :toast="toast">
+            <ToastProgress :key="progressKeyLocal" :type="toast.type" />
+          </slot>
+        </div>
+      </div>
+
+      <!-- close button floating top-right -->
+      <button
+        v-if="toast.closeButton"
+        type="button"
+        class="tf-toast-close"
+        :class="closeWrapperClass"
+        aria-label="Close notification"
+        @click.stop="handleCloseClick"
+      >
+        <slot name="close-icon" :toast="toast">
+          <XMark class="tf-toast-close-icon" aria-hidden="true" />
+        </slot>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tf-toast-wrapper {
+  pointer-events: auto;
+  width: 100%;
+}
+
+.tf-toast {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  --tf-toast-close-bg: var(--tf-toast-bg);
+  --tf-toast-close-color: var(--tf-toast-color);
+  --tf-toast-close-border-color: var(--tf-toast-border-color);
+}
+
+.tf-toast-accent--loading {
+  --tf-toast-bg: var(--loading-bg);
+  --tf-toast-border-color: var(--loading-border);
+  --tf-toast-color: var(--loading-text);
+  --tf-toast-description-color: var(--loading-text);
+  --tf-toast-progress-bg: color-mix(
+    in srgb,
+    var(--loading-text) 20%,
+    transparent
+  );
+}
+
+.tf-toast-accent--default {
+  --tf-toast-bg: var(--normal-bg);
+  --tf-toast-border-color: var(--normal-border);
+  --tf-toast-color: var(--normal-text);
+  --tf-toast-description-color: var(--normal-text);
+  --tf-toast-progress-bg: color-mix(
+    in srgb,
+    var(--normal-text) 20%,
+    transparent
+  );
+}
+
+.tf-toast-accent--success {
+  --tf-toast-bg: var(--success-bg);
+  --tf-toast-border-color: var(--success-border);
+  --tf-toast-color: var(--success-text);
+  --tf-toast-description-color: var(--success-text);
+  --tf-toast-progress-bg: color-mix(
+    in srgb,
+    var(--success-text) 20%,
+    transparent
+  );
+}
+
+.tf-toast-accent--error {
+  --tf-toast-bg: var(--error-bg);
+  --tf-toast-border-color: var(--error-border);
+  --tf-toast-color: var(--error-text);
+  --tf-toast-description-color: var(--error-text);
+  --tf-toast-progress-bg: color-mix(
+    in srgb,
+    var(--error-text) 20%,
+    transparent
+  );
+}
+
+.tf-toast-accent--warning {
+  --tf-toast-bg: var(--warning-bg);
+  --tf-toast-border-color: var(--warning-border);
+  --tf-toast-color: var(--warning-text);
+  --tf-toast-description-color: var(--warning-text);
+  --tf-toast-progress-bg: color-mix(
+    in srgb,
+    var(--warning-text) 20%,
+    transparent
+  );
+}
+
+.tf-toast-accent--info {
+  --tf-toast-bg: var(--info-bg);
+  --tf-toast-border-color: var(--info-border);
+  --tf-toast-color: var(--info-text);
+  --tf-toast-description-color: var(--info-text);
+  --tf-toast-progress-bg: color-mix(in srgb, var(--info-text) 20%, transparent);
+}
+
+/* card */
+
+.tf-toast-surface {
+  position: relative;
+  display: block;
+  min-width: 0;
+  padding: var(--tf-toast-padding);
+  border-radius: var(--tf-toast-radius);
+  background-color: var(--tf-toast-bg);
+  color: var(--tf-toast-color);
+  border: 1px solid var(--tf-toast-border-color);
+  font-family: var(--tf-toast-font-family);
+  overflow: hidden;
+}
+
+.tf-toast-main {
+  display: flex;
+  align-items: center;
+  gap: var(--tf-toast-gap);
+}
+
+/* icon */
+
+.tf-toast-icon-spin {
+  display: inline-block;
+  animation: tf-toast-spin 0.8s linear infinite;
+  transform-origin: center;
+}
+
+@keyframes tf-toast-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.tf-toast-icon-svg {
+  width: var(--tf-toast-icon-size);
+  height: var(--tf-toast-icon-size);
+}
+
+/* per-type icon color */
+
+.tf-toast-icon--loading .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-loading);
+}
+
+.tf-toast-icon--default .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-default);
+}
+
+.tf-toast-icon--success .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-success);
+}
+
+.tf-toast-icon--error .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-error);
+}
+
+.tf-toast-icon--warning .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-warning);
+}
+
+.tf-toast-icon--info .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-info);
+}
+
+/* body */
+
+.tf-toast-body {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.tf-toast-created-at {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  color: var(--tf-toast-description-color);
+  font-size: var(--tf-toast-created-at-font-size);
+  font-style: italic;
+}
+
+.tf-toast-title {
+  margin: 0;
+  font-size: var(--tf-toast-title-font-size);
+  font-weight: var(--tf-toast-title-font-weight);
+  line-height: 1.25;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.tf-toast-description {
+  margin: 0;
+  font-size: var(--tf-toast-description-font-size);
+  color: var(--tf-toast-description-color);
+}
+
+/* floating close button */
+
+.tf-toast-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(40%, -40%);
+  height: var(--tf-toast-close-size);
+  width: var(--tf-toast-close-size);
+  border-radius: 999px;
+  border: 1px solid var(--tf-toast-close-border-color);
+  background: var(--tf-toast-close-bg);
+  color: var(--tf-toast-close-color);
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.tf-toast-close-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.tf-toast-close:focus-visible {
+  outline: 2px solid var(--tf-toast-close-ring-color);
+  outline-offset: 2px;
+}
+
+/* bottom progress wrapper */
+
+.tf-toast-progress-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+}
+</style>