@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/lib/env-file.js

@@ -1,6 +1,6 @@
 //#region src/lib/env-file.ts
 const ENV_FILE_MAX_SIZE = 65536;
-const DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE = "Environment variable keys must be unique";
+const DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE = "Rename or remove the duplicate key.";
 var DuplicateEnvironmentVariableKeyError = class extends Error {
 	key;
 	constructor(key) {
@@ -175,7 +175,7 @@ async function readEnvFile(file, options = {}) {
 	const maxSize = options.maxSize ?? 65536;
 	if (file.size > maxSize) return {
 		ok: false,
-		error: `File is too large (max ${Math.ceil(maxSize / 1024)} KB).`
+		error: `That file is over ${Math.ceil(maxSize / 1024)} KB. Choose a smaller .env file.`
 	};
 	let text;
 	try {
@@ -183,17 +183,17 @@ async function readEnvFile(file, options = {}) {
 	} catch {
 		return {
 			ok: false,
-			error: "Could not read the selected file. Please try again."
+			error: "Couldn't read that file. Try selecting it again."
 		};
 	}
 	if (text.includes("\0")) return {
 		ok: false,
-		error: "File appears to be binary. Please import a plain-text .env file."
+		error: "That file isn't plain text. Choose a .env text file."
 	};
 	const entries = parseEnvFileText(text);
 	if (entries.length === 0) return {
 		ok: false,
-		error: "No valid environment variables found in the file."
+		error: "No variables found. Use one KEY=value per line."
 	};
 	return {
 		ok: true,

package/dist/lib/motion.d.ts

@@ -0,0 +1,4 @@
+//#region src/lib/motion.d.ts
+export declare function prefersReducedMotion(node?: Element | null): boolean;
+export declare function readDurationMs(element: Element, token: string): number;
+//#endregion

package/dist/lib/motion.js

@@ -0,0 +1,15 @@
+//#region src/lib/motion.ts
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion(node) {
+	return globalThis.matchMedia?.(REDUCED_MOTION_QUERY).matches === true || node?.closest("[data-motion=\"reduced\"]") != null;
+}
+function readDurationMs(element, token) {
+	const value = getComputedStyle(element).getPropertyValue(token).trim();
+	const amount = Number.parseFloat(value);
+	if (!Number.isFinite(amount)) return 0;
+	if (value.endsWith("ms")) return amount;
+	if (value.endsWith("s")) return amount * 1e3;
+	return amount;
+}
+//#endregion
+export { prefersReducedMotion, readDurationMs };

package/dist/lib/trigger-detect.js

@@ -1,19 +1,14 @@
 //#region src/lib/trigger-detect.ts
-const WHITESPACE = /* @__PURE__ */ new Set([
-	" ",
-	"\n",
-	"	",
-	"\xA0"
-]);
+const WHITESPACE = /\s/u;
 function detectTrigger(textBeforeCaret, triggerChars) {
 	const triggerSet = new Set(triggerChars);
 	for (let i = textBeforeCaret.length - 1; i >= 0; i -= 1) {
 		const char = textBeforeCaret.at(i);
 		if (char === void 0) return null;
-		if (WHITESPACE.has(char)) return null;
+		if (WHITESPACE.test(char)) return null;
 		if (triggerSet.has(char)) {
 			const preceding = i === 0 ? "" : textBeforeCaret.at(i - 1) ?? "";
-			if (preceding === "" || WHITESPACE.has(preceding)) return {
+			if (preceding === "" || WHITESPACE.test(preceding)) return {
 				char,
 				query: textBeforeCaret.slice(i + 1),
 				start: i,
@@ -25,6 +20,8 @@ function detectTrigger(textBeforeCaret, triggerChars) {
 	return null;
 }
 const MIRROR_PROPERTIES = [
+	"direction",
+	"writing-mode",
 	"box-sizing",
 	"width",
 	"font-family",
@@ -33,6 +30,7 @@ const MIRROR_PROPERTIES = [
 	"font-style",
 	"font-variant",
 	"letter-spacing",
+	"word-spacing",
 	"text-transform",
 	"text-indent",
 	"line-height",

package/dist/markdown-block.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "./lib/cn.js";
+import { ScrollArea } from "./ui/scroll-area.js";
 import { CodeCopy } from "./ui/code.js";
 import { Markdown } from "./ui/markdown.js";
 import { createContext, useContext } from "react";
@@ -30,7 +31,7 @@ function MarkdownBlockHeader({ className, ...props }) {
 		"data-control-ui": "markdown-block",
 		"data-control-family": "markdown-block",
 		"data-slot": "header",
-		className: cn("sticky top-0 z-10 flex items-center justify-between", className),
+		className: cn("flex items-center justify-between", className),
 		...props
 	});
 }
@@ -50,6 +51,7 @@ function MarkdownBlockTitle({ children = "Markdown", className, ...props }) {
 			children: "MD"
 		}), /* @__PURE__ */ jsx("span", {
 			className: "truncate",
+			title: typeof children === "string" ? children : void 0,
 			children
 		})]
 	});
@@ -64,13 +66,16 @@ function MarkdownBlockCopy({ "aria-label": ariaLabel = "Copy markdown", ...props
 }
 function MarkdownBlockContent({ children, className, ...props }) {
 	const code = useMarkdownBlockContext();
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "markdown-block",
-		"data-control-family": "markdown-block",
-		"data-slot": "content",
-		className: cn("max-h-[420px] overflow-auto mask-b-from-[calc(100%_-_var(--scroll-fade-size))]", className),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(Markdown, { content: code })
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		maxHeight: "420px",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "markdown-block",
+			"data-control-family": "markdown-block",
+			"data-slot": "content",
+			className,
+			...props,
+			children: children ?? /* @__PURE__ */ jsx(Markdown, { content: code })
+		})
 	});
 }
 //#endregion

package/dist/popup-parts.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from "./ui/button.js";
+//#region src/popup-parts.d.ts
+export type PopupCloseButtonProps = Omit<ButtonProps, "children" | "iconOnly"> & {
+  label: string;
+};
+export declare function PopupCloseButton({ label, variant, size, ...props }: PopupCloseButtonProps): import("react").JSX.Element;
+export declare function PopupArrowShape(): import("react").JSX.Element;
+//#endregion

package/dist/popup-parts.js

@@ -0,0 +1,43 @@
+"use client";
+import { Button } from "./ui/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/popup-parts.tsx
+function PopupCloseButton({ label, variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-popup-part": "close",
+		variant,
+		size,
+		iconOnly: true,
+		...props,
+		children: [/* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			"aria-hidden": "true",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 4 12 12M12 4 4 12",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+function PopupArrowShape() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		width: "12",
+		height: "8",
+		viewBox: "0 0 12 8",
+		overflow: "visible",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z",
+			fill: "currentColor"
+		})
+	});
+}
+//#endregion
+export { PopupArrowShape, PopupCloseButton };

package/dist/scripts/contrast-eval.js

@@ -169,13 +169,13 @@ function splitTopLevel(text) {
 }
 const unresolved = (reason) => ({ unresolved: reason });
 const isUnresolved = (result) => Boolean(result?.unresolved);
-function evaluateCalc(expression, base, tokens, seen, depth) {
+function evaluateCalc(expression, keyword, base, tokens, seen, depth) {
 	const inner = expression.slice(5, -1).trim();
 	const match = /^(\S+)\s*([+\-*])\s*(\S+)$/.exec(inner);
 	if (!match) return null;
 	const [, leftText, operator, rightText] = match;
 	const operand = (text) => {
-		if (text === "l" || text === "alpha") return base;
+		if (text === keyword) return base;
 		const number = scalar(text);
 		if (number !== null) return number;
 		const nested = resolveScalar(text, tokens, seen, depth + 1);
@@ -204,10 +204,11 @@ function resolveScalar(value, tokens, seen, depth) {
 const literalChannel = (text, allowPercent) => allowPercent || !text.endsWith("%") ? scalar(text) : null;
 const channelValue = (text, keyword, base, tokens, seen, depth) => {
 	if (text === keyword) return base;
-	if (text.startsWith("calc(")) return evaluateCalc(text, base, tokens, seen, depth);
+	if (text.startsWith("calc(")) return evaluateCalc(text, keyword, base, tokens, seen, depth);
+	if (text.startsWith("var(")) return resolveScalar(text, tokens, seen, depth);
 	return literalChannel(text, keyword === "l");
 };
-const alphaValue = (text, base, tokens, seen, depth) => text.startsWith("calc(") ? evaluateCalc(text, base, tokens, seen, depth) : resolveScalar(text, tokens, seen, depth);
+const alphaValue = (text, base, tokens, seen, depth) => text.startsWith("calc(") ? evaluateCalc(text, "alpha", base, tokens, seen, depth) : resolveScalar(text, tokens, seen, depth);
 const CHANNEL_KEYWORDS = [
 	"l",
 	"c",

package/dist/source-badge.js

@@ -45,6 +45,7 @@ function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className,
 }
 function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }) {
 	const hostname = sourceHostname(href);
+	const label = children ?? hostname;
 	return /* @__PURE__ */ jsxs(Badge, {
 		variant: "outline",
 		render: /* @__PURE__ */ jsx("a", {
@@ -63,8 +64,9 @@ function SourceBadge({ faviconSrc, href, children, className, rel, target, ...pr
 		}), /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "source-badge",
 			"data-slot": "label",
+			title: typeof label === "string" ? label : void 0,
 			className: "truncate",
-			children: children ?? hostname
+			children: label
 		})]
 	});
 }

package/dist/styles/code.css

@@ -26,7 +26,6 @@
   --diff-del-emphasis: oklch(0.87 0.12 22 / 0.8);
   --diff-del-gutter: oklch(0.92 0.07 22);
   --diff-del-fg: oklch(0.53 0.16 22);
-  --diff-context-fg: var(--muted-foreground);
   --diff-gutter-bg: oklch(from var(--muted) l c h / 0.5);
 }
 
@@ -52,6 +51,5 @@
   --diff-del-emphasis: oklch(0.62 0.18 22 / 0.36);
   --diff-del-gutter: oklch(0.55 0.14 22 / 0.3);
   --diff-del-fg: oklch(0.78 0.15 22);
-  --diff-context-fg: var(--muted-foreground);
   --diff-gutter-bg: oklch(from var(--muted) l c h / 0.4);
 }

package/dist/styles/effects.css

@@ -5,14 +5,6 @@
   background-image: linear-gradient(100deg, var(--muted) 30%, oklch(from var(--muted-foreground) l c h / 0.25) 50%, var(--muted) 70%);
   background-size: 220% 100%;
   animation: shimmer calc(var(--duration-slow) * 5) var(--ease-standard) infinite;
-
-  /* Reduced motion: hold resting gradient (infinite animation ignores 0ms collapse, must still explicitly) under OS pref + motion kill-switch attribute. */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  :where([data-motion="reduced"]) & {
-    animation: none;
-  }
 }
 
 /* shimmer-text — same sweep clipped to text ("AI is generating" treatment); subtle --muted-foreground↔--foreground stops keep it readable. */
@@ -24,14 +16,6 @@
   -webkit-text-fill-color: transparent;
   color: transparent;
   animation: shimmer calc(var(--duration-slow) * 6) var(--ease-standard) infinite;
-
-  /* Reduced motion: static muted-foreground text, no sweep — stilled under OS pref + motion kill-switch (infinite animation ignores 0ms tempo). */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  :where([data-motion="reduced"]) & {
-    animation: none;
-  }
 }
 
 @keyframes shimmer {
@@ -69,14 +53,6 @@
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   animation: aui-halftone calc(var(--duration-slow) * 6) var(--ease-standard) infinite;
-
-  /* Reduced motion: dots hold at their resting radius — still a legible placeholder, just no breathing. */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  :where([data-motion="reduced"]) & {
-    animation: none;
-  }
 }
 
 @keyframes aui-halftone {
@@ -106,14 +82,6 @@
   color: transparent;
   text-shadow: none;
   animation: aui-progress-sweep calc(var(--duration-slow) * 12) linear infinite;
-
-  /* Reduced motion: static blocks, no march — stilled under OS pref + motion kill-switch (infinite animation ignores 0ms tempo). */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  :where([data-motion="reduced"]) & {
-    animation: none;
-  }
 }
 
 @keyframes aui-progress-sweep {
@@ -124,3 +92,9 @@
     background-position: -200% 0;
   }
 }
+
+@keyframes cui-spin {
+  to {
+    rotate: 360deg;
+  }
+}

package/dist/styles/index.css

@@ -1,8 +1,10 @@
 @import "./theme.css";
 @import "./recipes/accordion.css";
 @import "./recipes/button.css";
+@import "./recipes/button-states.css";
 @import "./recipes/action-bar.css";
 @import "./recipes/collapsible.css";
+@import "./effects.css";
 @import "./recipes/progressive-blur.css";
 @import "./recipes/scroll-area.css";
 @import "./recipes/activity.css";
@@ -17,16 +19,17 @@
 @import "./recipes/field-parts.css";
 @import "./recipes/avatar.css";
 @import "./recipes/badge.css";
+@import "./recipes/breadcrumb.css";
 @import "./recipes/track-highlight.css";
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
-@import "./recipes/chat-layout.css";
-@import "./effects.css";
 @import "./recipes/chat-message.css";
+@import "./recipes/chat-message-social.css";
+@import "./recipes/chat-layout.css";
+@import "./recipes/spinner.css";
 @import "./recipes/chat-composer.css";
 @import "./chat-composer-editor.css";
-@import "./recipes/spinner.css";
 @import "./recipes/chat-composer-attachment.css";
 @import "./recipes/choice.css";
 @import "./code.css";
@@ -34,27 +37,31 @@
 @import "./recipes/code-diff.css";
 @import "./recipes/sidebar.css";
 @import "./recipes/sidebar-menu.css";
+@import "./recipes/sidebar-parts.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
 @import "./recipes/empty.css";
 @import "./recipes/context.css";
 @import "./recipes/popup-drawer.css";
-@import "./recipes/dockable-panel.css";
+@import "./recipes/infinite-canvas.css";
+@import "./recipes/resizable.css";
 @import "./recipes/separator.css";
+@import "./recipes/toolbar.css";
+@import "./recipes/kbd.css";
+@import "./recipes/dockable-panel.css";
 @import "./recipes/item.css";
 @import "./recipes/dropzone.css";
 @import "./recipes/dynamic-notification.css";
 @import "./recipes/dynamic-notification-input.css";
 @import "./recipes/dynamic-notification-motion.css";
+@import "./recipes/emoji-picker.css";
 @import "./recipes/environment-variables.css";
-@import "./recipes/resizable.css";
+@import "./recipes/filter-bar.css";
 @import "./recipes/gradient-editor.css";
-@import "./recipes/infinite-canvas.css";
 @import "./recipes/inline-attachment.css";
 @import "./recipes/source-badge.css";
 @import "./recipes/inline-citation.css";
-@import "./recipes/kbd.css";
 @import "./recipes/markdown.css";
 @import "./recipes/markdown-block.css";
 @import "./recipes/range.css";
@@ -73,7 +80,6 @@
 @import "./recipes/thread-rail.css";
 @import "./recipes/timeline.css";
 @import "./recipes/popup-toast.css";
-@import "./recipes/toolbar.css";
 @import "./recipes/transcript-divider.css";
 @import "./recipes/tree.css";
 @import "./type-scale.css";

package/dist/styles/recipes/accordion.css

@@ -1,7 +1,7 @@
 @layer components {
   :where([data-control-family="accordion"][data-slot="root"]) {
     --cui-accordion-item-border-color: var(--border);
-    --cui-accordion-item-border-width: 1px;
+    --cui-accordion-item-border-width: var(--control-rim-width);
     --cui-accordion-trigger-foreground: var(--foreground);
     --cui-accordion-trigger-hover-foreground: oklch(from var(--foreground) l c h / 0.8);
     --cui-accordion-icon-foreground: var(--muted-foreground);
@@ -19,18 +19,20 @@
     padding-block: calc(var(--spacing) * 3);
     color: var(--cui-accordion-trigger-foreground);
     font-size: var(--text-body);
-    outline: none;
-    text-align: left;
+    text-align: start;
+    text-wrap: balance;
     font-weight: var(--font-weight-medium);
   }
 
-  :where([data-control-family="accordion"][data-slot="trigger"]:hover) {
-    color: var(--cui-accordion-trigger-hover-foreground);
+  @media (hover: hover) {
+    :where([data-control-family="accordion"][data-slot="trigger"]:not([data-disabled]):hover) {
+      color: var(--cui-accordion-trigger-hover-foreground);
+    }
   }
 
   :where([data-control-family="accordion"][data-slot="trigger"][data-disabled]) {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="accordion"][data-slot="icon"]) {
@@ -51,6 +53,7 @@
   :where([data-control-family="accordion"][data-slot="panel"]) {
     color: var(--muted-foreground);
     font-size: var(--text-body);
+    text-wrap: pretty;
     height: var(--accordion-panel-height);
     overflow: hidden;
     transition: height var(--duration-base) var(--ease-emphasized);

package/dist/styles/recipes/action-bar.css

@@ -24,21 +24,6 @@
   :where([data-control-family="chat-layout"][data-slot="turn"]:focus-within [data-control-family="action-bar"][data-slot="root"]) {
     opacity: var(--cui-action-bar-visible-opacity);
   }
-
-  @media (pointer: coarse) {
-    :where([data-control-family="action-bar"][data-slot="root"] [data-control-family="button"]) {
-      position: relative;
-    }
-
-    :where([data-control-family="action-bar"][data-slot="root"] [data-control-family="button"])::after {
-      content: "";
-      position: absolute;
-      inset: 50% 50%;
-      translate: -50% -50%;
-      inline-size: 100%;
-      block-size: max(100%, 44px);
-    }
-  }
 }
 
 @property --cui-action-bar-hidden-opacity {

package/dist/styles/recipes/activity.css

@@ -65,7 +65,7 @@
   }
 
   :where([data-control-family="activity"][data-slot="root"][data-activity-state="running"] [data-slot="icon"][data-status-icon] svg) {
-    animation: activity-spin calc(var(--duration-slow) * 2) linear infinite;
+    animation: cui-spin var(--duration-loop) linear infinite;
   }
 
   :where([data-control-family="activity"][data-slot="root"][data-activity-state="error"] [data-slot="icon"]) {
@@ -117,20 +117,14 @@
     :where([data-control-family="activity"][data-slot="trigger"])::after {
       content: "";
       position: absolute;
-      inset: 50% 50%;
-      translate: -50% -50%;
-      inline-size: 100%;
-      block-size: max(100%, 44px);
+      inset-inline: 0;
+      inset-block-start: 50%;
+      translate: 0 -50%;
+      block-size: max(100%, var(--touch-target));
     }
   }
 }
 
-@keyframes activity-spin {
-  to {
-    rotate: 360deg;
-  }
-}
-
 @property --cui-activity-row-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/alert.css

@@ -6,13 +6,13 @@
     --cui-alert-shadow: none;
     --cui-alert-foreground: var(--card-foreground);
     --cui-alert-description-foreground: var(--muted-foreground);
-    --cui-alert-border-width: 1px;
+    --cui-alert-border-width: var(--control-rim-width);
     --cui-alert-padding: calc(var(--spacing) * 3);
     --cui-alert-padding-inline: calc(var(--spacing) * 4);
     --cui-alert-gap: calc(var(--spacing) * 0.5);
     --cui-alert-icon-gap: calc(var(--spacing) * 3);
     --cui-alert-icon-size: calc(var(--spacing) * 4);
-    --cui-alert-font-size: var(--text-sm);
+    --cui-alert-font-size: var(--text-body);
     --cui-alert-title-font-weight: var(--font-weight-medium);
     --cui-alert-description-gap: var(--spacing);
     grid-template-columns: 0 minmax(0, 1fr);
@@ -24,7 +24,7 @@
     box-shadow: var(--cui-alert-shadow);
     color: var(--cui-alert-foreground);
     font-size: var(--cui-alert-font-size);
-    line-height: var(--text-sm--line-height);
+    line-height: var(--leading-normal);
     overflow-wrap: anywhere;
   }
 
@@ -43,7 +43,7 @@
     gap: var(--cui-alert-description-gap);
     color: var(--cui-alert-description-foreground);
     font-size: var(--cui-alert-font-size);
-    line-height: var(--text-sm--line-height);
+    line-height: var(--leading-normal);
     text-wrap: pretty;
   }
 

package/dist/styles/recipes/audio-recorder.css

@@ -4,6 +4,7 @@
     --cui-audio-recorder-foreground: var(--muted-foreground);
     --cui-audio-recorder-recording-ring-color: oklch(from var(--destructive) l c h / 0.25);
     --cui-audio-recorder-error-foreground: var(--destructive-text);
+    --cui-audio-recorder-meta-foreground: var(--muted-foreground);
     min-block-size: calc(var(--spacing) * 8);
     gap: calc(var(--spacing) * 2);
     padding-inline-end: calc(var(--spacing) * 1);
@@ -36,7 +37,8 @@
     --_audio-recorder-content-visible-scale: 100%;
     opacity: 0;
     filter: blur(var(--blur-xs));
-    translate: calc(var(--spacing) * 1) 0;
+    --_audio-recorder-inline-sign: 1;
+    translate: calc(var(--spacing) * var(--_audio-recorder-inline-sign)) 0;
     scale: var(--_audio-recorder-content-hidden-scale);
     visibility: hidden;
     transition-property: opacity, filter, translate, scale, visibility;
@@ -45,6 +47,10 @@
     transition-behavior: allow-discrete;
   }
 
+  :where([data-control-ui="audio-recorder"]:dir(rtl)) {
+    --_audio-recorder-inline-sign: -1;
+  }
+
   :where([data-control-ui="audio-recorder"]:is([data-slot="cancel"], [data-slot="submit"])) {
     --_audio-recorder-content-hidden-scale: 95%;
   }
@@ -62,7 +68,7 @@
   }
 
   :where([data-control-ui="audio-recorder"]:is([data-slot="status"], [data-slot="duration"])) {
-    color: var(--muted-foreground);
+    color: var(--cui-audio-recorder-meta-foreground);
     font-size: var(--text-caption);
   }
 
@@ -72,7 +78,7 @@
 
   :where([data-control-ui="audio-recorder"][data-slot="duration"]) {
     inline-size: calc(var(--spacing) * 10);
-    text-align: right;
+    text-align: end;
     font-variant-numeric: tabular-nums;
   }
 }
@@ -100,3 +106,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-audio-recorder-meta-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/audio-visualizer.css

@@ -5,6 +5,11 @@
     --cui-audio-visualizer-bar-radius: var(--radius-control);
     --cui-audio-visualizer-line-fill: oklch(from var(--primary) l c h / 0.18);
     --cui-audio-visualizer-line-stroke: oklch(from var(--primary) l c h / 0.8);
+    --cui-audio-visualizer-baseline-stroke: oklch(from var(--border) l c h / 0.55);
+    --_audio-visualizer-inline-sign: 1;
+  }
+  :where([data-control-family="audio-visualizer"][data-variant]:dir(rtl)) {
+    --_audio-visualizer-inline-sign: -1;
   }
   :where([data-control-family="audio-visualizer"][data-slot="root"][data-variant]) {
     block-size: calc(var(--spacing) * 7);
@@ -42,7 +47,7 @@
       opacity: 0;
       --_audio-visualizer-bar-track-filter: blur(var(--blur-xs));
       filter: var(--_audio-visualizer-bar-track-filter);
-      translate: var(--spacing) 0;
+      translate: calc(var(--spacing) * var(--_audio-visualizer-inline-sign)) 0;
     }
   }
 
@@ -56,7 +61,7 @@
   }
 
   :where([data-control-family="audio-visualizer"][data-slot="baseline"]) {
-    stroke: oklch(from var(--border) l c h / 0.55);
+    stroke: var(--cui-audio-visualizer-baseline-stroke);
   }
 
   :where([data-control-family="audio-visualizer"][data-slot="waveform"]) {
@@ -95,3 +100,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-audio-visualizer-baseline-stroke {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}