niuma-ui 2.0.4 → 2.1.0

package/dist/components/terminal/src/terminal-utils.js

@@ -1,4 +1,3 @@
-import { readDocumentTheme } from "../../code-editor/src/code-editor-utils.js";
 //#region src/components/terminal/src/terminal-utils.ts
 var TERMINAL_CSS_KEYS = [
 	["background", "--rs-terminal-bg"],
@@ -112,10 +111,24 @@ function themeSourceElement(mode) {
 	if (document.documentElement.dataset.rsTheme === mode) return document.documentElement;
 	return themeProbeElement(mode);
 }
-/** 从全局 `--rs-terminal-*` token 构建 xterm 调色板（须已加载 styles.css） */
-function readTerminalThemeFromCss(mode) {
+/**
+* auto 看最近的 `data-rs-theme`，没有时看 documentElement。
+* 未写或不是 dark 时跟全库浅色。传入元素时深色岛不必改整页。
+*/
+function resolveTerminalTheme(mode = "auto", el) {
+	if (mode !== "auto") return mode;
+	if (typeof document === "undefined") return "light";
+	const node = el?.closest?.("[data-rs-theme]") ?? document.documentElement;
+	return (node instanceof HTMLElement ? node.dataset.rsTheme : null) === "dark" ? "dark" : "light";
+}
+function pickThemeSource(mode, el) {
+	if (el && resolveTerminalTheme("auto", el) === mode) return el;
+	return themeSourceElement(mode);
+}
+/** 从 `--rs-terminal-*` 构建 xterm 调色板。传入宿主时读继承到的 token。 */
+function readTerminalThemeFromCss(mode, el) {
 	if (typeof document === "undefined" || typeof getComputedStyle === "undefined") return {};
-	const source = themeSourceElement(mode);
+	const source = pickThemeSource(mode, el);
 	const theme = {};
 	for (const [key, cssVar] of TERMINAL_CSS_KEYS) {
 		const value = resolveCssColorForXterm(readResolvedCssColor(cssVar, source, BACKGROUND_THEME_KEYS.has(key)));
@@ -123,15 +136,12 @@ function readTerminalThemeFromCss(mode) {
 	}
 	return theme;
 }
-function resolveTerminalTheme(mode = "auto") {
-	return mode === "auto" ? readDocumentTheme() : mode;
-}
 function getTerminalThemePalette(mode) {
 	return readTerminalThemeFromCss(mode);
 }
-function mergeTerminalTheme(mode, overrides) {
+function mergeTerminalTheme(mode, overrides, el) {
 	return {
-		...readTerminalThemeFromCss(mode),
+		...readTerminalThemeFromCss(mode, el),
 		...overrides
 	};
 }
@@ -216,6 +226,99 @@ function isMacPlatform() {
 function terminalShortcutLabel(key) {
 	return isMacPlatform() ? `⌘${key}` : `Ctrl+${key}`;
 }
+var themeListeners = /* @__PURE__ */ new Set();
+var sharedThemeObserver = null;
+function ensureTerminalThemeObserver() {
+	if (sharedThemeObserver || typeof document === "undefined" || typeof MutationObserver === "undefined") return;
+	sharedThemeObserver = new MutationObserver(() => {
+		for (const listener of themeListeners) listener();
+	});
+	sharedThemeObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["data-rs-theme"],
+		subtree: true
+	});
+}
+/**
+* 多个终端共用一个 `data-rs-theme` 观察器（含主题岛）。
+* 最后一个退订时断开，避免卸载后仍监听整棵文档。
+*/
+function subscribeTerminalTheme(listener) {
+	if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => void 0;
+	themeListeners.add(listener);
+	ensureTerminalThemeObserver();
+	return () => {
+		themeListeners.delete(listener);
+		if (themeListeners.size === 0 && sharedThemeObserver) {
+			sharedThemeObserver.disconnect();
+			sharedThemeObserver = null;
+		}
+	};
+}
+var TERMINAL_LINK_TRAILING = /* @__PURE__ */ new Set([
+	".",
+	",",
+	";",
+	":",
+	"!",
+	"?",
+	")",
+	">",
+	"]"
+]);
+function trimTerminalLinkPunctuation(raw) {
+	let end = raw.length;
+	while (end > 0 && TERMINAL_LINK_TRAILING.has(raw.charAt(end - 1))) end -= 1;
+	return raw.slice(0, end);
+}
+/** 只放行 http(s) 与 mailto。javascript: / data: 一律拒绝。 */
+function isSafeTerminalLink(value) {
+	try {
+		const url = new URL(value);
+		return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "mailto:";
+	} catch {
+		return false;
+	}
+}
+/** 从一行可见文本里找出可点的 http(s) / mailto。end 为不含尾标点的字符串下标。 */
+function findTerminalHttpLinks(line) {
+	if (!line.includes("http") && !line.includes("mailto")) return [];
+	const re = /(?:https?:\/\/|mailto:)[^\s<>"']+/gi;
+	const out = [];
+	let match;
+	while (match = re.exec(line)) {
+		const text = trimTerminalLinkPunctuation(match[0]);
+		if (!text || !isSafeTerminalLink(text)) continue;
+		out.push({
+			start: match.index,
+			end: match.index + text.length,
+			text
+		});
+	}
+	return out;
+}
+/**
+* 把字符串下标换成 xterm 1-based 单元格列。
+* 宽字符占两格，后续 width 0 的格子跳过，避免链接框落在汉字上。
+*/
+function terminalCellIndexForString(cells, stringIndex) {
+	let seen = 0;
+	for (let i = 0; i < cells.length; i += 1) {
+		if ((cells[i]?.width ?? 1) < 1) continue;
+		if (seen >= stringIndex) return i + 1;
+		const chars = cells[i]?.chars ?? "";
+		seen += chars.length || 1;
+	}
+	return Math.max(1, cells.length);
+}
+function terminalLinkCellRange(cells, start, end) {
+	const startX = terminalCellIndexForString(cells, start);
+	const endX = terminalCellIndexForString(cells, Math.max(start, end - 1));
+	return {
+		startX,
+		endX: Math.max(startX, endX)
+	};
+}
 /** ANSI 16 色演示文本 */
 function buildAnsiColorDemo() {
 	const names = [
@@ -252,4 +355,4 @@ function buildAnsiColorDemo() {
 	].join("\r\n")}\r\n`;
 }
 //#endregion
-export { buildAnsiColorDemo, containsAltScreenEnter, containsEscapeSequence, containsFullScreenClear, containsTuiRefreshSequence, getTerminalThemePalette, isMacPlatform, mergeTerminalTheme, needsPtyWriteViewportPrep, normalizeTerminalHexColor, prepareTerminalForPtyWrite, proposeTerminalGeometry, readTerminalThemeFromCss, readXtermCssCellSize, resetLocalTerminalModes, resolveCssColorForXterm, resolveTerminalTheme, snapTerminalViewportToBottom, terminalShortcutLabel };
+export { buildAnsiColorDemo, containsAltScreenEnter, containsEscapeSequence, containsFullScreenClear, containsTuiRefreshSequence, findTerminalHttpLinks, getTerminalThemePalette, isMacPlatform, isSafeTerminalLink, mergeTerminalTheme, needsPtyWriteViewportPrep, normalizeTerminalHexColor, prepareTerminalForPtyWrite, proposeTerminalGeometry, readTerminalThemeFromCss, readXtermCssCellSize, resetLocalTerminalModes, resolveCssColorForXterm, resolveTerminalTheme, snapTerminalViewportToBottom, subscribeTerminalTheme, terminalCellIndexForString, terminalLinkCellRange, terminalShortcutLabel };

package/dist/components/textarea/src/RsTextarea.d.ts

@@ -91,11 +91,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsTex
     resize: RsTextareaResize;
     disabled: boolean;
     readonly: boolean;
+    rows: number;
     validateTrigger: RsInputValidateTrigger;
     clearable: boolean;
     showCount: boolean;
     showValidateMessage: boolean;
-    rows: number;
     autosize: RsTextareaAutosize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/time-picker/src/RsTimePicker.d.ts

@@ -59,16 +59,16 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, RsT
     focus: () => any;
     clear: () => any;
     "update:modelValue": (value: RsTimePickerModelValue) => any;
-    "update:open": (value: boolean) => any;
     openChange: (open: boolean) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onChange?: ((value: RsTimePickerModelValue) => any) | undefined;
     onBlur?: (() => any) | undefined;
     onFocus?: (() => any) | undefined;
     onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: RsTimePickerModelValue) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onOpenChange?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     required: boolean;
     disabled: boolean;

package/dist/components/toaster/src/RsToaster.css

@@ -1,141 +1,150 @@
 
-[data-sonner-toaster].rs-toaster {
-  --rs-toast-radius: 1rem;
-  --rs-toast-bg: color-mix(in srgb, var(--rs-surface-elevated) 86%, transparent);
-  --rs-toast-border: color-mix(in srgb, var(--rs-border) 72%, rgb(255 255 255 / 0.08));
-  --rs-toast-shadow:
-    0 16px 40px -20px rgb(0 0 0 / 0.3),
-    0 8px 18px -14px rgb(0 0 0 / 0.18),
-    0 0 0 0.5px rgb(255 255 255 / 0.08);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 7%, transparent);
-  --rs-toast-highlight: rgb(255 255 255 / 0.08);
+.rs-toaster {
+  --rs-toaster-offset: var(--rs-space-lg);
+  --rs-toaster-gap: var(--rs-space-xs);
+  --rs-toast-radius: var(--rs-radius-lg, 1rem);
+  --rs-toast-bg: color-mix(in srgb, var(--rs-surface-elevated) 88%, transparent);
+  --rs-toast-border: color-mix(in srgb, var(--rs-border) 72%, transparent);
+  --rs-toast-shadow: var(--rs-shadow-lg);
+  position: fixed;
   z-index: var(--rs-z-toast);
+  pointer-events: none;
   font-family: inherit;
+  color: var(--rs-text);
 }
-[data-rs-theme='light'] [data-sonner-toaster].rs-toaster {
-  --rs-toast-bg: color-mix(in srgb, var(--rs-surface-elevated) 94%, rgb(255 255 255 / 0.8));
-  --rs-toast-border: color-mix(in srgb, var(--rs-border) 84%, rgb(255 255 255 / 0.9));
-  --rs-toast-shadow:
-    0 18px 42px -24px rgb(15 23 42 / 0.2),
-    0 8px 18px -14px rgb(15 23 42 / 0.12),
-    0 0 0 0.5px rgb(255 255 255 / 0.86);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 4%, #ffffff);
-  --rs-toast-highlight: rgb(255 255 255 / 0.72);
-}
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast {
-  position: absolute;
+.rs-toaster__viewport {
+  position: fixed;
+  z-index: var(--rs-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-toaster-gap);
+  width: max-content;
+  max-width: calc(100vw - 1.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  pointer-events: none;
+}
+.rs-toaster__viewport--top-left {
+  top: max(var(--rs-toaster-offset), env(safe-area-inset-top));
+  left: max(var(--rs-toaster-offset), env(safe-area-inset-left));
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-y-position='top'] {
-  top: 0;
+.rs-toaster__viewport--top-right {
+  top: max(var(--rs-toaster-offset), env(safe-area-inset-top));
+  right: max(var(--rs-toaster-offset), env(safe-area-inset-right));
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-y-position='bottom'] {
-  top: auto;
-  bottom: 0;
+.rs-toaster__viewport--top-center {
+  top: max(var(--rs-toaster-offset), env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.rs-toaster__viewport--bottom-left {
+  bottom: max(var(--rs-toaster-offset), env(safe-area-inset-bottom));
+  left: max(var(--rs-toaster-offset), env(safe-area-inset-left));
+  flex-direction: column-reverse;
+}
+.rs-toaster__viewport--bottom-right {
+  bottom: max(var(--rs-toaster-offset), env(safe-area-inset-bottom));
+  right: max(var(--rs-toaster-offset), env(safe-area-inset-right));
+  flex-direction: column-reverse;
+}
+.rs-toaster__viewport--bottom-center {
+  bottom: max(var(--rs-toaster-offset), env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+  align-items: center;
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='left'] {
-  left: 0;
+.rs-toaster__viewport--collapsed {
+  display: grid;
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='right'] {
-  right: 0;
+.rs-toaster__viewport--collapsed .rs-toast {
+  grid-area: 1 / 1;
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='center'] {
-  inset-inline: 0;
+.rs-toaster__viewport--collapsed .rs-toast:not(.rs-toast--front) {
+  pointer-events: none;
+  transform: translateY(calc(var(--rs-toast-index) * 0.45rem)) scale(calc(1 - var(--rs-toast-index) * 0.04));
+}
+.rs-toaster__viewport--bottom-left.rs-toaster__viewport--collapsed .rs-toast:not(.rs-toast--front),
+.rs-toaster__viewport--bottom-right.rs-toaster__viewport--collapsed .rs-toast:not(.rs-toast--front),
+.rs-toaster__viewport--bottom-center.rs-toaster__viewport--collapsed .rs-toast:not(.rs-toast--front) {
+  transform: translateY(calc(var(--rs-toast-index) * -0.45rem)) scale(calc(1 - var(--rs-toast-index) * 0.04));
 }
 .rs-toast {
   --rs-toast-accent: color-mix(in srgb, var(--rs-info) 68%, transparent);
-  overflow: hidden;
+  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 7%, transparent);
+  position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  column-gap: 0.625rem;
-  row-gap: 0.5rem;
-  width: var(--width, auto);
-  min-width: 19rem;
+  column-gap: var(--rs-space-sm);
+  row-gap: var(--rs-space-xs);
+  width: max-content;
+  min-width: min(19rem, calc(100vw - 1.5rem));
   max-width: min(29rem, calc(100vw - 1.5rem));
-  padding: 0.8125rem 2.25rem 0.8125rem 0.875rem;
+  margin: 0;
+  padding-block: var(--rs-space-md);
+  padding-inline: var(--rs-space-md) 2.25rem;
   border: 1px solid var(--rs-toast-border);
   border-radius: var(--rs-toast-radius);
   background:
-    linear-gradient(
-      180deg,
-      transparent 0.5rem,
-      var(--rs-toast-accent) 0.5rem calc(100% - 0.5rem),
-      transparent calc(100% - 0.5rem)
-    )
-    0.5rem 0 / 2px 100% no-repeat,
-    linear-gradient(180deg, var(--rs-toast-highlight), transparent 38%),
+    linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 38%),
     linear-gradient(135deg, var(--rs-toast-tint), transparent 34%),
     var(--rs-toast-bg);
   color: var(--rs-text);
-  box-shadow:
-    var(--rs-toast-shadow),
-    inset 0 1px 0 rgb(255 255 255 / 0.08);
+  box-shadow: var(--rs-toast-shadow);
   backdrop-filter: blur(20px) saturate(150%);
   -webkit-backdrop-filter: blur(20px) saturate(150%);
+  pointer-events: auto;
+  list-style: none;
   transition:
-    box-shadow var(--rs-transition-normal),
-    border-color var(--rs-transition-fast),
-    background var(--rs-transition-fast);
+    opacity var(--rs-transition-fast),
+    transform var(--rs-transition-fast),
+    box-shadow var(--rs-transition-normal);
+}
+.rs-toast::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: var(--rs-space-sm);
+  inset-block: var(--rs-space-sm);
+  width: 2px;
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-toast-accent);
+  pointer-events: none;
 }
-
-/* 带描述时顶对齐，图标与标题第一行光学对齐 */
 .rs-toast:has([data-description]) {
   align-items: start;
-  padding-top: 0.875rem;
-  padding-bottom: 0.875rem;
-}
-.rs-toast:hover {
-  box-shadow:
-    0 18px 42px -20px rgb(0 0 0 / 0.34),
-    0 10px 24px -16px rgb(0 0 0 / 0.22),
-    0 0 0 0.5px rgb(255 255 255 / 0.1),
-    inset 0 1px 0 rgb(255 255 255 / 0.08);
 }
-.rs-toast[data-styled='true'] {
-  gap: 0;
+.rs-toast--leaving {
+  opacity: 0;
 }
-.rs-toast [data-icon] {
-  position: relative;
-  z-index: 1;
+.rs-toast__icon {
   grid-column: 1;
   grid-row: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  align-self: center;
   width: 1.25rem;
   height: 1.25rem;
-  margin: 0;
-  border-radius: 999px;
-  background: transparent;
   color: var(--rs-info);
-  box-shadow: none;
 }
-.rs-toast [data-icon] svg {
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
-}
-
-/* 多行内容时，图标略下移以对齐标题字面中线 */
-.rs-toast:has([data-description]) [data-icon] {
+.rs-toast:has([data-description]) .rs-toast__icon {
   align-self: start;
   margin-top: 0.125rem;
 }
-.rs-toast [data-content] {
-  position: relative;
-  z-index: 1;
+.rs-toast__body {
   grid-column: 2;
   grid-row: 1;
   display: grid;
   gap: 0.1875rem;
   min-width: 0;
 }
-.rs-toast [data-button] {
-  position: relative;
-  z-index: 1;
+.rs-toast__actions {
   grid-column: 2;
-  margin-top: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rs-space-xs);
 }
 .rs-toast__title {
   margin: 0;
@@ -143,21 +152,17 @@
   font-size: var(--rs-font-size-sm);
   font-weight: var(--rs-font-weight-semibold);
   line-height: var(--rs-line-height-tight);
-  letter-spacing: -0.012em;
 }
 .rs-toast__description {
   margin: 0;
-  color: color-mix(in srgb, var(--rs-muted) 94%, var(--rs-text) 6%);
+  color: var(--rs-text-secondary, var(--rs-muted));
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-normal);
 }
-.rs-toast [data-close-button].rs-toast__close {
+.rs-toast__close {
   position: absolute;
   top: 50%;
-  inset-inline-end: 0.625rem;
-  inset-inline-start: auto;
-  bottom: auto;
-  z-index: 2;
+  inset-inline-end: var(--rs-space-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -165,165 +170,113 @@
   height: 1.25rem;
   padding: 0;
   border: 1px solid transparent;
-  border-radius: 999px;
+  border-radius: var(--rs-radius-full);
   background: transparent;
   color: var(--rs-muted);
-  box-shadow: none;
   cursor: pointer;
   transform: translateY(-50%);
-  opacity: 0.72;
-  transition:
-    opacity var(--rs-transition-fast),
-    color var(--rs-transition-fast),
-    border-color var(--rs-transition-fast),
-    background var(--rs-transition-fast),
-    box-shadow var(--rs-transition-fast);
 }
-.rs-toast:has([data-description]) [data-close-button].rs-toast__close {
-  top: 0.75rem;
+.rs-toast:has([data-description]) .rs-toast__close {
+  top: var(--rs-space-sm);
   transform: none;
 }
-.rs-toast [data-close-button].rs-toast__close svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  flex-shrink: 0;
-}
-.rs-toast [data-close-button].rs-toast__close:hover {
-  opacity: 0.96;
+.rs-toast__close:hover {
   color: var(--rs-text);
   border-color: color-mix(in srgb, var(--rs-border) 68%, transparent);
-  background: color-mix(in srgb, var(--rs-surface-hover) 70%, transparent);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.08),
-    0 1px 4px rgb(0 0 0 / 0.08);
+  background: color-mix(in srgb, var(--rs-surface-hover, var(--rs-item-hover)) 70%, transparent);
 }
-.rs-toast [data-close-button].rs-toast__close:focus-visible {
+.rs-toast__close:focus-visible,
+.rs-toast__action:focus-visible,
+.rs-toaster:focus-visible {
   outline: none;
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.08),
-    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
 .rs-toast__action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 4.5rem;
-  min-height: 2rem;
-  padding: 0 0.75rem;
+  min-height: var(--rs-control-height-sm);
+  padding-inline: var(--rs-space-sm);
   border: 1px solid transparent;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--rs-primary) 92%, white 8%);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-primary);
   color: var(--rs-primary-foreground);
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-semibold);
   line-height: 1;
-  letter-spacing: 0.01em;
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.16),
-    0 1px 2px rgb(0 0 0 / 0.08);
   cursor: pointer;
-  transition:
-    transform var(--rs-transition-fast),
-    background var(--rs-transition-fast),
-    border-color var(--rs-transition-fast),
-    box-shadow var(--rs-transition-fast),
-    color var(--rs-transition-fast);
-}
-.rs-toast__action:hover {
-  transform: translateY(-0.5px);
-  background: color-mix(in srgb, var(--rs-primary-hover) 94%, white 6%);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.18),
-    0 4px 10px rgb(0 0 0 / 0.12);
-}
-.rs-toast__action:active {
-  transform: translateY(0);
-  box-shadow:
-    inset 0 1px 1px rgb(0 0 0 / 0.08),
-    0 1px 3px rgb(0 0 0 / 0.08);
-}
-.rs-toast__action:focus-visible {
-  outline: none;
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.18),
-    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
 .rs-toast__action--secondary {
   border-color: color-mix(in srgb, var(--rs-border) 72%, transparent);
   background: color-mix(in srgb, var(--rs-surface) 82%, transparent);
   color: var(--rs-text);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.08),
-    0 1px 2px rgb(0 0 0 / 0.04);
-}
-.rs-toast__action--secondary:hover {
-  background: color-mix(in srgb, var(--rs-surface-hover) 82%, transparent);
-  border-color: color-mix(in srgb, var(--rs-border) 88%, transparent);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.1),
-    0 3px 8px rgb(0 0 0 / 0.08);
-}
-.rs-toast[data-type='success'] {
+}
+.rs-toast--success {
   --rs-toast-accent: color-mix(in srgb, var(--rs-success) 68%, transparent);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-success) 7%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-success) 8%, transparent);
 }
-.rs-toast[data-type='success'] [data-icon] {
+.rs-toast--success .rs-toast__icon {
   color: var(--rs-success);
 }
-.rs-toast[data-type='error'] {
+.rs-toast--error {
   --rs-toast-accent: color-mix(in srgb, var(--rs-danger) 68%, transparent);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-danger) 7%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-danger) 8%, transparent);
 }
-.rs-toast[data-type='error'] [data-icon] {
+.rs-toast--error .rs-toast__icon {
   color: var(--rs-danger);
 }
-.rs-toast[data-type='warning'] {
+.rs-toast--warning {
   --rs-toast-accent: color-mix(in srgb, var(--rs-warning) 72%, transparent);
   --rs-toast-tint: color-mix(in srgb, var(--rs-warning) 8%, transparent);
 }
-.rs-toast[data-type='warning'] [data-icon] {
+.rs-toast--warning .rs-toast__icon {
   color: var(--rs-warning);
 }
-.rs-toast[data-type='info'],
-.rs-toast[data-type='default'] {
-  --rs-toast-accent: color-mix(in srgb, var(--rs-info) 68%, transparent);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 7%, transparent);
-}
-.rs-toast[data-type='loading'] {
+.rs-toast--loading {
   --rs-toast-accent: color-mix(in srgb, var(--rs-primary) 68%, transparent);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-primary) 7%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-primary) 8%, transparent);
 }
-.rs-toast[data-type='loading'] [data-icon] {
+.rs-toast--loading .rs-toast__icon {
   color: var(--rs-primary);
 }
-@media (max-width: 640px) {
-.rs-toast {
-    min-width: min(100%, 18.5rem);
-    max-width: calc(100vw - 1rem);
-    padding-block: 0.75rem;
-    padding-inline: 0.8125rem 2.125rem;
-    border-radius: 0.9375rem;
+.rs-toast--rich.rs-toast--success {
+  background: color-mix(in srgb, var(--rs-success) 16%, var(--rs-surface-elevated));
+  border-color: color-mix(in srgb, var(--rs-success) 42%, var(--rs-border));
 }
-.rs-toast:has([data-description]) {
-    padding-top: 0.8125rem;
-    padding-bottom: 0.8125rem;
+.rs-toast--rich.rs-toast--error {
+  background: color-mix(in srgb, var(--rs-danger) 16%, var(--rs-surface-elevated));
+  border-color: color-mix(in srgb, var(--rs-danger) 42%, var(--rs-border));
 }
-.rs-toast [data-close-button].rs-toast__close {
-    inset-inline-end: 0.5rem;
-    width: 1.25rem;
-    height: 1.25rem;
+.rs-toast--rich.rs-toast--warning {
+  background: color-mix(in srgb, var(--rs-warning) 18%, var(--rs-surface-elevated));
+  border-color: color-mix(in srgb, var(--rs-warning) 46%, var(--rs-border));
 }
-.rs-toast:has([data-description]) [data-close-button].rs-toast__close {
-    top: 0.625rem;
+.rs-toast--rich.rs-toast--info,
+.rs-toast--rich.rs-toast--default {
+  background: color-mix(in srgb, var(--rs-info) 14%, var(--rs-surface-elevated));
+  border-color: color-mix(in srgb, var(--rs-info) 40%, var(--rs-border));
 }
-.rs-toast__action {
-    min-height: 1.875rem;
-    padding: 0 0.6875rem;
+@media (max-width: 640px) {
+.rs-toast {
+    min-width: min(100%, 18.5rem);
+    max-width: calc(100vw - 1rem);
 }
 }
 @media (prefers-reduced-motion: reduce) {
 .rs-toast,
-  .rs-toast__action {
+  .rs-toast__action,
+  .rs-toast__close {
     transition: none;
 }
+.rs-toast {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+.rs-toast {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--rs-surface-elevated);
+}
 }