@rtzll/reflow 0.4.0 → 0.6.0

package/dist/highlight.d.ts

@@ -0,0 +1,36 @@
+/**
+ * `@rtzll/reflow/highlight`: Shiki behind one function, for CodeBlock.
+ *
+ * This entry is optional. It needs the `shiki` and `@shikijs/transformers`
+ * peer dependencies, and nothing else in Reflow imports it, so an app that
+ * never imports it never installs or loads Shiki.
+ */
+import { type BundledTheme, type ShikiTransformer, type ThemeRegistrationAny } from 'shiki';
+import type { HighlightedCode } from './code-block.tsx';
+export type { CodeLine, CodeToken, HighlightedCode } from './code-block.tsx';
+type Theme = BundledTheme | ThemeRegistrationAny;
+export interface HighlightOptions {
+    /** Any language Shiki bundles, or one of its aliases. Unknown languages render as plain text. Default text. */
+    lang?: string;
+    /** A Shiki theme, by name or definition. Defaults to Reflow's, which colours tokens with `--rf-code-token-*` variables. */
+    theme?: Theme;
+    /** A light and a dark theme; the block follows the page's color scheme between them. */
+    themes?: {
+        light: Theme;
+        dark: Theme;
+    };
+    /**
+     * Reads `// [!code highlight]`, `[!code ++]`, `[!code --]`, `[!code focus]`,
+     * `[!code error]`, `[!code warning]` and `[!code word:name]` comments into
+     * line and word marks, and removes them from the code. Default true.
+     */
+    notation?: boolean;
+    /** More Shiki transformers, run after the notation ones. */
+    transformers?: ShikiTransformer[];
+}
+/**
+ * Highlights code for CodeBlock. Call it where the code is known: in a route
+ * handler, so the page arrives highlighted and the browser loads nothing, or
+ * in the browser for code that arrives later, such as a streamed reply.
+ */
+export declare function highlight(code: string, options?: HighlightOptions): Promise<HighlightedCode>;

package/dist/highlight.js

@@ -0,0 +1,134 @@
+/**
+ * `@rtzll/reflow/highlight`: Shiki behind one function, for CodeBlock.
+ *
+ * This entry is optional. It needs the `shiki` and `@shikijs/transformers`
+ * peer dependencies, and nothing else in Reflow imports it, so an app that
+ * never imports it never installs or loads Shiki.
+ */
+import { bundledLanguages, bundledLanguagesAlias, createCssVariablesTheme, createHighlighter, createJavaScriptRegexEngine, } from 'shiki';
+import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, } from '@shikijs/transformers';
+// Reflow's theme: every colour is a CSS variable, set in code-block.css for
+// the light and dark themes, so highlighted code follows the page.
+const reflowTheme = createCssVariablesTheme({
+    name: 'reflow',
+    variablePrefix: '--rf-code-',
+    fontStyle: true,
+});
+let shared;
+// One highlighter for the process or page, with the JavaScript regex engine,
+// which needs no WebAssembly. Languages and themes load as they are first used.
+function highlighter() {
+    shared ??= createHighlighter({
+        themes: [reflowTheme],
+        langs: [],
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+    });
+    return shared;
+}
+function bundled(lang) {
+    return lang in bundledLanguages || lang in bundledLanguagesAlias;
+}
+function themeName(theme) {
+    return typeof theme === 'string' ? theme : (theme.name ?? 'custom');
+}
+function classes(node) {
+    const value = node.properties?.class ?? node.properties?.className;
+    return Array.isArray(value) ? value.join(' ') : typeof value === 'string' ? value : '';
+}
+// Flattens a line into runs of text, each with the innermost style and
+// every class around it, such as a token inside a highlighted word.
+function tokens(node, style = '', classList = []) {
+    if (node.type === 'text') {
+        if (!node.value)
+            return [];
+        const token = { content: node.value };
+        if (style)
+            token.style = style;
+        if (classList.length)
+            token.class = classList.join(' ');
+        return [token];
+    }
+    const own = typeof node.properties?.style === 'string' ? node.properties.style : '';
+    const name = classes(node);
+    const nested = name ? [...classList, name] : classList;
+    return (node.children ?? []).flatMap((child) => tokens(child, own || style, nested));
+}
+function trimEnd(list) {
+    while (list.length) {
+        const last = list[list.length - 1];
+        last.content = last.content.replace(/[ \t]+$/, '');
+        if (last.content)
+            return;
+        list.pop();
+    }
+}
+/**
+ * Highlights code for CodeBlock. Call it where the code is known: in a route
+ * handler, so the page arrives highlighted and the browser loads nothing, or
+ * in the browser for code that arrives later, such as a streamed reply.
+ */
+export async function highlight(code, options = {}) {
+    const instance = await highlighter();
+    const requested = options.lang ?? 'text';
+    const lang = bundled(requested) ? requested : 'text';
+    if (lang !== 'text' && !instance.getLoadedLanguages().includes(lang))
+        await instance.loadLanguage(lang);
+    const themes = options.themes ? [options.themes.light, options.themes.dark] : [options.theme];
+    for (const theme of themes)
+        if (theme && !instance.getLoadedThemes().includes(themeName(theme)))
+            await instance.loadTheme(theme);
+    const transformers = [
+        ...(options.notation === false
+            ? []
+            : [
+                transformerNotationHighlight(),
+                transformerNotationDiff(),
+                transformerNotationFocus(),
+                transformerNotationErrorLevel(),
+                transformerNotationWordHighlight(),
+            ]),
+        ...(options.transformers ?? []),
+    ];
+    const root = instance.codeToHast(code, options.themes
+        ? {
+            lang,
+            themes: {
+                light: themeName(options.themes.light),
+                dark: themeName(options.themes.dark),
+            },
+            defaultColor: false,
+            transformers,
+        }
+        : { lang, theme: options.theme ? themeName(options.theme) : 'reflow', transformers });
+    const pre = root.children?.find((node) => node.tagName === 'pre');
+    const body = pre?.children?.find((node) => node.tagName === 'code');
+    const lines = (body?.children ?? [])
+        .filter((node) => node.type === 'element')
+        .map((node) => {
+        const mark = classes(node)
+            .split(/\s+/)
+            .filter((name) => name && name !== 'line')
+            .join(' ');
+        const line = { tokens: tokens({ ...node, properties: {} }) };
+        // Removing a notation comment leaves the space before it.
+        if (options.notation !== false)
+            trimEnd(line.tokens);
+        if (mark)
+            line.class = mark;
+        return line;
+    });
+    const flags = classes(pre ?? { type: 'element' })
+        .split(/\s+/)
+        .filter((name) => name.startsWith('has-'));
+    const style = typeof pre?.properties?.style === 'string' ? pre.properties.style : undefined;
+    const result = {
+        lang: requested === 'text' || lang === 'text' ? 'text' : requested,
+        code: lines.map((line) => line.tokens.map((token) => token.content).join('')).join('\n'),
+        lines,
+        flags,
+    };
+    // Reflow's own theme takes its colours from CSS; others bring theirs inline.
+    if (style && (options.theme || options.themes))
+        result.style = style;
+    return result;
+}

package/dist/hover-card.d.ts

@@ -28,5 +28,9 @@ export interface HoverCardProps {
  * follows it, and the card never takes focus or locks scrolling. The pointer
  * can cross into the card and use its links; it closes once the pointer has
  * left both, or on Escape. It shares Popover's surface and motion.
+ *
+ * The card is a span, so a trigger can sit inside a paragraph. Keep its
+ * content to phrasing elements there, such as span and a, since a div or a
+ * list would end the paragraph when the browser parses server-rendered HTML.
  */
 export declare function HoverCard(handle: Handle<HoverCardProps>): () => import("remix/component").RemixElement;

package/dist/hover-card.js

@@ -8,6 +8,10 @@ import { anchor } from '@remix-run/ui/anchor';
  * follows it, and the card never takes focus or locks scrolling. The pointer
  * can cross into the card and use its links; it closes once the pointer has
  * left both, or on Escape. It shares Popover's surface and motion.
+ *
+ * The card is a span, so a trigger can sit inside a paragraph. Keep its
+ * content to phrasing elements there, such as span and a, since a div or a
+ * list would end the paragraph when the browser parses server-rendered HTML.
  */
 export function HoverCard(handle) {
     let trigger = null;
@@ -114,6 +118,6 @@ export function HoverCard(handle) {
     });
     return () => {
         handle.queueTask(sync);
-        return (_jsxs(_Fragment, { children: [handle.props.renderTrigger({ mix: triggerMix }), _jsx("div", { class: "rf-menu-surface rf-popover-surface rf-hover-card", popover: "manual", "data-density": handle.props.size, mix: cardMix, children: handle.props.children })] }));
+        return (_jsxs(_Fragment, { children: [handle.props.renderTrigger({ mix: triggerMix }), _jsx("span", { class: "rf-menu-surface rf-popover-surface rf-hover-card", popover: "manual", "data-density": handle.props.size, mix: cardMix, children: handle.props.children })] }));
     };
 }

package/dist/index.d.ts

@@ -13,6 +13,12 @@ export * from './breadcrumb.tsx';
 export * from './segmented-control.tsx';
 export * from './popover.tsx';
 export * from './hover-card.tsx';
+export * from './toaster.tsx';
+export * from './drawer.tsx';
+export * from './code-block.tsx';
+export * from './citation.tsx';
+export * from './avatar.tsx';
+export * from './chat-layout.tsx';
 export * from './systems.ts';
 export * from './queued-stack.tsx';
 export * from './scroll-area.tsx';

package/dist/index.js

@@ -13,6 +13,12 @@ export * from './breadcrumb.js';
 export * from './segmented-control.js';
 export * from './popover.js';
 export * from './hover-card.js';
+export * from './toaster.js';
+export * from './drawer.js';
+export * from './code-block.js';
+export * from './citation.js';
+export * from './avatar.js';
+export * from './chat-layout.js';
 export * from './systems.js';
 export * from './queued-stack.js';
 export * from './scroll-area.js';

package/dist/sidebar.css

@@ -926,68 +926,27 @@
   margin-inline-start: 8px;
 }
 
-/* Mobile drawer: below 768px the rail becomes a sheet that slides in from the left. */
+/* Mobile drawer: below 768px the rail moves into a left Drawer, which brings
+   the slide, the drag to close and the backdrop; it keeps the rail's width,
+   surface and shadow. */
 .rf-sidebar-drawer-trigger {
   display: none;
 }
-.rf-sidebar-drawer {
-  position: fixed;
-  inset-block: 0;
-  inset-inline-start: 0;
-  box-sizing: border-box;
-  width: min(288px, 100vw);
-  max-width: none;
-  height: 100dvh;
-  max-height: none;
-  margin: 0;
-  padding: 0;
+.rf-drawer.rf-sidebar-drawer[data-side] {
+  --rf-drawer-bg: var(--rf-surface-2);
+  inline-size: min(288px, 100vw);
   overflow: hidden;
-  border: 0;
-  background: var(--rf-surface-2);
-  box-shadow: var(--rf-sb-surface-shadow);
-  color: var(--rf-fg);
-  translate: -100% 0;
-  transition:
-    translate var(--rf-exit-moderate),
-    display var(--rf-exit-moderate) allow-discrete,
-    overlay var(--rf-exit-moderate) allow-discrete;
-}
-.rf-sidebar-drawer[open] {
-  translate: 0 0;
-  transition:
-    translate var(--rf-spring-moderate),
-    display var(--rf-spring-moderate) allow-discrete,
-    overlay var(--rf-spring-moderate) allow-discrete;
-}
-@starting-style {
-  .rf-sidebar-drawer[open] {
-    translate: -100% 0;
-  }
-}
-.rf-sidebar-drawer::backdrop {
-  background: light-dark(rgb(0 0 0 / 40%), rgb(0 0 0 / 80%));
-  opacity: 0;
-  transition:
-    opacity var(--rf-exit-moderate),
-    display var(--rf-exit-moderate) allow-discrete,
-    overlay var(--rf-exit-moderate) allow-discrete;
-}
-.rf-sidebar-drawer[open]::backdrop {
-  opacity: 1;
-  transition:
-    opacity 160ms ease,
-    display 160ms allow-discrete,
-    overlay 160ms allow-discrete;
+  box-shadow: var(--rf-drawer-tail), var(--rf-sb-surface-shadow);
 }
-@starting-style {
-  .rf-sidebar-drawer[open]::backdrop {
-    opacity: 0;
-  }
+.rf-sidebar-drawer .rf-drawer-body {
+  display: flex;
+  flex-direction: column;
 }
-.rf-sidebar-drawer-content {
-  height: 100%;
+.rf-sidebar-drawer .rf-sidebar-inner {
+  flex: 1;
+  min-block-size: 0;
 }
-.rf-sidebar-drawer-content > .rf-basic-sr-only:focus-visible {
+.rf-sidebar-drawer .rf-drawer-body > .rf-basic-sr-only:focus-visible {
   clip-path: none;
   width: auto;
   height: auto;
@@ -996,8 +955,6 @@
   position: static;
 }
 @media (prefers-reduced-motion: reduce) {
-  .rf-sidebar-drawer,
-  .rf-sidebar-drawer::backdrop,
   .rf-sidebar-layout,
   .rf-sidebar-card {
     transition-duration: 0s !important;

package/dist/sidebar.js

@@ -4,6 +4,7 @@ import { on, ref } from 'remix/component';
 import { Button, Card, CardGroup, CardHeader, CardTitle, CardDescription, CardMedia, CardImage, } from './basic.js';
 import { fluidHover } from './interactive.js';
 import { ScrollArea } from './scroll-area.js';
+import { Drawer } from './drawer.js';
 /** How far past the minimum width a drag has to travel before it previews the collapse. */
 const collapseSlop = 56;
 function SidebarNavigation(handle) {
@@ -113,13 +114,14 @@ export function Sidebar(handle) {
     let exitingPeek;
     let peekTimer;
     let drag;
-    let drawer;
+    let drawerOpen = false;
     const panelId = `${handle.id}-sidebar`;
-    const drawerId = `${panelId}-drawer`;
-    const captureDrawer = ref((node) => {
-        if (node instanceof HTMLDialogElement)
-            drawer = node;
-    });
+    const setDrawer = (open) => {
+        if (drawerOpen === open)
+            return;
+        drawerOpen = open;
+        void handle.update();
+    };
     function limits() {
         const minimum = handle.props.minWidth ?? 160;
         return { minimum, maximum: Math.max(minimum, handle.props.maxWidth ?? 360) };
@@ -375,13 +377,7 @@ export function Sidebar(handle) {
                                                     if (!peeking)
                                                         cancelPeekTimer();
                                                 }),
-                                            ], children: _jsx(Icon, { name: "panel-left" }) }), _jsx(Button, { class: "rf-sidebar-drawer-trigger", variant: "ghost", size: "compact", "aria-controls": drawerId, "aria-haspopup": "dialog", mix: on('click', () => drawer?.showModal()), children: "Open navigation" })] })), toolbar != null && _jsx("div", { class: "rf-sidebar-toolbar-content", children: toolbar })] })), children] }), _jsx("dialog", { id: drawerId, class: "rf-sidebar-drawer", "aria-label": label, mix: [
-                        captureDrawer,
-                        on('click', (event) => {
-                            if (event.target === drawer)
-                                drawer?.close();
-                        }),
-                    ], children: _jsxs("div", { class: "rf-sidebar-drawer-content", children: [_jsx("button", { type: "button", class: "rf-basic-sr-only", mix: on('click', () => drawer?.close()), children: "Close navigation" }), _jsx(SidebarNavigation, { ...navigation, variant: "default", onNavigate: () => drawer?.close() })] }) })] }));
+                                            ], children: _jsx(Icon, { name: "panel-left" }) }), _jsxs(Drawer, { side: "left", title: label, flush: true, class: "rf-sidebar-drawer", open: drawerOpen, onOpenChange: setDrawer, renderTrigger: (trigger) => (_jsx(Button, { class: "rf-sidebar-drawer-trigger", variant: "ghost", size: "compact", ...trigger, children: "Open navigation" })), children: [_jsx("button", { type: "button", class: "rf-basic-sr-only", mix: on('click', () => setDrawer(false)), children: "Close navigation" }), _jsx(SidebarNavigation, { ...navigation, variant: "default", onNavigate: () => setDrawer(false) })] })] })), toolbar != null && _jsx("div", { class: "rf-sidebar-toolbar-content", children: toolbar })] })), children] })] }));
     };
 }
 /** A measured, dismissible pile of real Cards. Keyboard focus opens the inline pile too. */

package/dist/status-icon.d.ts

@@ -0,0 +1,3 @@
+/** The status glyphs Banner and toasts share. Internal: not exported from the package. */
+export type StatusIconName = 'default' | 'info' | 'success' | 'warning' | 'error';
+export declare function statusIcon(status: StatusIconName): import("remix/component").RemixElement;

package/dist/status-icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+export function statusIcon(status) {
+    if (status === 'default') {
+        return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 16v-4m0-4h.01" })] }));
+    }
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", children: [status === 'warning' ? (_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })) : (_jsx("circle", { cx: "12", cy: "12", r: "10.5", fill: "currentColor" })), _jsx("g", { stroke: "var(--rf-bg)", "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round", children: status === 'success' ? (_jsx("path", { d: "m8.5 12.25 2.5 2.5 4.5-5" })) : status === 'warning' ? (_jsx("path", { d: "M12 9.5v3.5M12 17h.01" })) : status === 'error' ? (_jsx("path", { d: "M12 7.5v5M12 16.5h.01" })) : (_jsx("path", { d: "M12 16.5v-5M12 7.5h.01" })) })] }));
+}

package/dist/styles.css

@@ -12,4 +12,10 @@
 @import './breadcrumb.css';
 @import './segmented-control.css';
 @import './popover.css';
+@import './toaster.css';
+@import './drawer.css';
+@import './code-block.css';
+@import './citation.css';
+@import './avatar.css';
+@import './chat-layout.css';
 @import './systems.css';

package/dist/toaster.css

@@ -0,0 +1,268 @@
+/* Toaster: a pile of toasts fixed to one corner or edge of the viewport.
+   The newest toast sits in front; the ones behind peek out and narrow on
+   QueuedStack's stacking values. Pointed at or focused, the pile spreads
+   out a gap apart. The script writes each toast's depth, height and spread
+   offset; the lift turns offsets upward for the bottom positions. */
+.rf-toaster-region {
+  display: block;
+  outline: none;
+}
+
+.rf-toaster {
+  --rf-toaster-offset: 24px;
+  --rf-toast-width: 356px;
+  --rf-toast-lift: -1;
+  position: fixed;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  inline-size: var(--rf-toast-width);
+  max-inline-size: calc(100vw - 2 * var(--rf-toaster-offset));
+  block-size: var(--rf-toaster-piled-height, 0px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--rf-fg);
+  font: var(--rf-text-body) / var(--rf-leading-body) var(--rf-font);
+  -webkit-font-smoothing: antialiased;
+}
+.rf-toaster[data-expanded] {
+  block-size: var(--rf-toaster-spread-height, 0px);
+}
+.rf-toaster[data-position^='top'] {
+  --rf-toast-lift: 1;
+  top: var(--rf-toaster-offset);
+}
+.rf-toaster[data-position^='bottom'] {
+  bottom: var(--rf-toaster-offset);
+}
+.rf-toaster[data-position$='left'] {
+  left: var(--rf-toaster-offset);
+}
+.rf-toaster[data-position$='right'] {
+  right: var(--rf-toaster-offset);
+}
+.rf-toaster[data-position$='center'] {
+  left: 50%;
+  translate: -50% 0;
+}
+@media (max-width: 600px) {
+  .rf-toaster {
+    --rf-toaster-offset: 16px;
+    inset-inline: var(--rf-toaster-offset);
+    inline-size: auto;
+    translate: none;
+  }
+}
+
+.rf-toast {
+  --rf-status-color: var(--rf-fg);
+  --rf-toast-y: calc(var(--rf-toast-lift) * var(--rf-toast-depth, 0) * var(--rf-stack-peek));
+  position: absolute;
+  inset-inline: 0;
+  z-index: calc(100 - var(--rf-toast-depth, 0));
+  box-sizing: border-box;
+  block-size: var(--rf-toast-front-height, auto);
+  overflow: hidden;
+  border-radius: var(--rf-panel-radius);
+  outline: none;
+  background: var(--rf-surface-3, white);
+  box-shadow:
+    inset 0 1px light-dark(transparent, rgb(255 255 255 / 2%)),
+    inset 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 2%)),
+    0 0 0 1px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 12%)),
+    0 1px 1px -0.5px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 18%)),
+    0 3px 3px -1.5px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 18%)),
+    0 12px 28px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 24%));
+  translate: var(--rf-swipe-x, 0px) calc(var(--rf-toast-y) + var(--rf-swipe-y, 0px));
+  scale: calc(1 - var(--rf-toast-depth, 0) * var(--rf-stack-scale-step)) 1;
+  touch-action: none;
+  transition:
+    translate var(--rf-spring-moderate),
+    scale var(--rf-spring-moderate),
+    block-size var(--rf-spring-moderate),
+    opacity var(--rf-spring-moderate);
+}
+.rf-toaster[data-position^='top'] > .rf-toast {
+  top: 0;
+}
+.rf-toaster[data-position^='bottom'] > .rf-toast {
+  bottom: 0;
+}
+.rf-toast[data-front] {
+  block-size: var(--rf-toast-height, auto);
+}
+.rf-toast:focus-visible {
+  outline: 2px solid var(--rf-accent);
+  outline-offset: 2px;
+}
+/* A new toast slides in from the edge. */
+@starting-style {
+  .rf-toast {
+    --rf-toast-y: calc(var(--rf-toast-lift) * -100%);
+    opacity: 0;
+  }
+}
+
+.rf-toaster[data-expanded] > .rf-toast {
+  --rf-toast-y: calc(var(--rf-toast-lift) * var(--rf-toast-offset, 0px));
+  block-size: var(--rf-toast-height, auto);
+  scale: 1;
+}
+.rf-toast[data-hidden] {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+.rf-toast[data-swiping] {
+  cursor: grabbing;
+  user-select: none;
+  transition: none;
+}
+/* Leaving, the front toast drops back to its edge; a swiped one carries on
+   the way it was thrown; the others fade where they are. */
+.rf-toast[data-removed] {
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    translate var(--rf-exit-slow),
+    scale var(--rf-exit-slow),
+    opacity var(--rf-exit-moderate);
+}
+.rf-toast[data-removed][data-front]:not([data-swipe-out]) {
+  --rf-toast-y: calc(var(--rf-toast-lift) * -100%);
+}
+
+.rf-toast-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  transition: opacity var(--rf-spring-moderate);
+}
+/* Piled, only the front toast shows its content. */
+.rf-toaster:not([data-expanded]) > .rf-toast:not([data-front]) > .rf-toast-inner {
+  opacity: 0;
+}
+.rf-toast[data-status='info'] {
+  --rf-status-color: light-dark(#3b82f6, var(--rf-info));
+}
+.rf-toast[data-status='success'] {
+  --rf-status-color: light-dark(#22c55e, var(--rf-success));
+}
+.rf-toast[data-status='warning'] {
+  --rf-status-color: light-dark(#f59e0b, var(--rf-warning));
+}
+.rf-toast[data-status='error'] {
+  --rf-status-color: light-dark(#ef4444, var(--rf-danger));
+}
+.rf-toast[data-status='loading'] {
+  --rf-status-color: var(--rf-muted);
+}
+.rf-toast-icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: 20px;
+  block-size: var(--rf-leading-subtitle);
+  color: var(--rf-status-color);
+}
+.rf-toast-icon > svg {
+  inline-size: 20px;
+  block-size: 20px;
+}
+.rf-toast-spinner g {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: rf-button-spinner-turn 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+.rf-toast-spinner circle {
+  stroke-dasharray: 0.01 49.99;
+  stroke-dashoffset: -25;
+  animation: rf-button-spinner-breathe 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+.rf-toast-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-inline-size: 0;
+}
+.rf-toast-title {
+  font-size: var(--rf-text-subtitle);
+  line-height: var(--rf-leading-subtitle);
+  font-variation-settings: var(--rf-weight-strong);
+  overflow-wrap: anywhere;
+}
+.rf-toast-description {
+  color: var(--rf-muted);
+  overflow-wrap: anywhere;
+}
+.rf-toast-action {
+  flex: none;
+  margin-block: calc((var(--rf-leading-subtitle) - 28px) / 2);
+}
+.rf-toast-close {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: 28px;
+  block-size: 28px;
+  margin-block: calc((var(--rf-leading-subtitle) - 28px) / 2);
+  margin-inline: -4px -6px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rf-radius);
+  outline: none;
+  background: transparent;
+  color: var(--rf-muted);
+  cursor: pointer;
+  transition:
+    color var(--rf-fast),
+    background-color var(--rf-fast);
+}
+.rf-toast-close:focus-visible {
+  box-shadow: 0 0 0 1px var(--rf-accent);
+}
+@media (hover: hover) {
+  .rf-toast-close:hover {
+    background: var(--rf-hover);
+    color: var(--rf-fg);
+  }
+}
+.rf-toast-close > svg {
+  inline-size: 15px;
+  block-size: 15px;
+}
+
+[data-density='compact'] .rf-toast-inner {
+  gap: 10px;
+  padding: 12px;
+}
+[data-density='compact'] .rf-toast-icon,
+[data-density='compact'] .rf-toast-icon > svg {
+  inline-size: 16px;
+}
+[data-density='compact'] .rf-toast-icon > svg {
+  block-size: 16px;
+}
+[data-density='compact'] .rf-toast-close > svg {
+  inline-size: 13px;
+  block-size: 13px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rf-toast,
+  .rf-toast[data-removed] {
+    transition: opacity var(--rf-spring-moderate);
+  }
+  .rf-toast-spinner :is(g, circle) {
+    animation: none;
+  }
+}
+@media (forced-colors: active) {
+  .rf-toast {
+    border: 1px solid CanvasText;
+  }
+}