@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/ui/breadcrumb.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/ui/breadcrumb.tsx
+function Breadcrumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "root",
+		className,
+		...props
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "list",
+		className: cn("flex flex-wrap items-center break-words", className),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "item",
+		className: cn("inline-flex items-center", className),
+		...props
+	});
+}
+function BreadcrumbLink({ render, className, children, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "breadcrumb",
+			"data-control-family": "breadcrumb",
+			"data-slot": "link",
+			className,
+			children
+		}
+	});
+}
+function BreadcrumbPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "page",
+		"aria-current": "page",
+		className,
+		...props
+	});
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("[&>svg]:size-3.5", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRight, { "data-icon-dir": "inline" })
+	});
+}
+function BreadcrumbEllipsis({ label = "Show hidden breadcrumbs", className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "ellipsis",
+		className: cn("flex items-center justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, {
+			"aria-hidden": "true",
+			className: "size-4"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/ui/button.d.ts

@@ -23,12 +23,13 @@ export type ButtonProps = ComponentProps<"button"> & ButtonAppearanceProps & {
     disabled: boolean;
   }>;
   nativeButton?: boolean;
+  focusableWhenDisabled?: boolean;
 };
 export type ButtonLinkProps = ComponentProps<"a"> & ButtonAppearanceProps & {
   render?: RenderProp<ComponentProps<"a">>;
 };
 export type ButtonLabelProps = ComponentProps<"label"> & ButtonAppearanceProps;
-export declare const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+export declare const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 export declare const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 export declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
 export declare function Button({ variant, size, tone, active, iconOnly, shape, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/ui/button.js

@@ -9,7 +9,7 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/button.tsx
 const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];
-const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
 function wrapButtonText(children) {

package/dist/ui/calendar.js

@@ -4,8 +4,8 @@ import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { CaptionLabel, Day, DayPicker, Month, MonthCaption, MonthGrid, Months, Nav, Weekday } from "react-day-picker";
 //#region src/ui/calendar.tsx
-const dayButtonClasses = "flex w-full items-center justify-center disabled:pointer-events-none";
-const navButtonClasses = "inline-flex items-center justify-center disabled:pointer-events-none";
+const dayButtonClasses = "flex w-full items-center justify-center disabled:pointer-events-none aria-disabled:pointer-events-none";
+const navButtonClasses = "inline-flex items-center justify-center disabled:pointer-events-none aria-disabled:pointer-events-none";
 const chevronPathByOrientation = {
 	left: "M10 3 5.5 8 10 13",
 	right: "M6 3 10.5 8 6 13",

package/dist/ui/card.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { CardKnobStyle } from "../knob-contracts/card-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/card.d.ts
@@ -11,6 +12,7 @@ export type CardHeaderProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
 export type CardTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & CardKnobStyle;
 };
 export type CardDescriptionProps = ComponentProps<"div"> & {
@@ -27,7 +29,7 @@ export type CardFooterProps = ComponentProps<"div"> & {
 };
 export declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
 export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
-export declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardTitle({ render, ...props }: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
 export declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
 export declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;

package/dist/ui/card.js

@@ -1,5 +1,7 @@
+"use client";
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/card.tsx
 function Card({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -21,13 +23,16 @@ function CardHeader({ className, ...props }) {
 		...props
 	});
 }
-function CardTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "card",
-		"data-control-family": "card",
-		"data-slot": "title",
-		className,
-		...props
+function CardTitle({ render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "card",
+			"data-control-family": "card",
+			"data-slot": "title"
+		}
 	});
 }
 function CardDescription({ className, ...props }) {

package/dist/ui/checkbox.d.ts

@@ -15,6 +15,8 @@ export type CheckboxProps = Omit<{
   className?: string;
   "aria-label"?: string;
   "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false";
 }, "style"> & {
   style?: CSSProperties & ChoiceKnobStyle;
 };

package/dist/ui/code-diff.d.ts

@@ -3,7 +3,7 @@ import { CodeCopyProps, CodeOverflow } from "./code.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/code-diff.d.ts
 export type DiffStyle = "unified" | "split";
-export type DiffIndicators = "classic" | "bars" | "none";
+export type DiffIndicators = "classic" | "bars";
 export type DiffLineKind = "word" | "char" | "none";
 export type CodeDiffProps = Omit<ComponentProps<"figure">, "children" | "style"> & {
   patch?: string;

package/dist/ui/code-diff.js

@@ -7,6 +7,7 @@ import { buildDiffFromFiles, buildDiffFromPatch, diffRunEnd } from "../lib/diff.
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { flushSync } from "react-dom";
 //#region src/ui/code-diff.tsx
 const ESTIMATED_ROW_HEIGHT = 20;
 const VIRTUALIZE_THRESHOLD = 150;
@@ -116,9 +117,12 @@ function expandedContext(file, gapIndex) {
 	}
 	return lines;
 }
+function expandedRowId(gapIndex, line) {
+	return `exp-${gapIndex}-${line.oldNo ?? line.newNo ?? 0}`;
+}
 function gapRows(file, hunk, gapIndex, diffStyle, expanded) {
 	if (!(gapIndex > 0 || hunk.collapsedBefore > 0)) return [];
-	if (expanded.has(gapIndex) && !file.isPartial) return expandedContext(file, gapIndex).map((line) => rowForLine(diffStyle, line, `exp-${gapIndex}-${line.oldNo ?? line.newNo ?? 0}`));
+	if (expanded.has(gapIndex) && !file.isPartial) return expandedContext(file, gapIndex).map((line) => rowForLine(diffStyle, line, expandedRowId(gapIndex, line)));
 	const label = hunk.header ?? `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@`;
 	return [{
 		kind: "separator",
@@ -217,8 +221,7 @@ function Gutter({ children, type }) {
 		children
 	});
 }
-function Marker({ type, indicators }) {
-	if (indicators !== "classic") return null;
+function Marker({ type }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "code-diff",
 		"data-control-family": "code-diff",
@@ -247,10 +250,7 @@ function UnifiedRow({ line, tokens, indicators, overflow }) {
 				type: line.type,
 				children: line.newNo ?? ""
 			}),
-			/* @__PURE__ */ jsx(Marker, {
-				type: line.type,
-				indicators
-			}),
+			/* @__PURE__ */ jsx(Marker, { type: line.type }),
 			/* @__PURE__ */ jsx(DiffCode, {
 				line,
 				tokens,
@@ -282,10 +282,7 @@ function SplitHalf({ line, tokens, indicators, overflow, side }) {
 				type: line.type,
 				children: side === "left" ? line.oldNo ?? "" : line.newNo ?? ""
 			}),
-			/* @__PURE__ */ jsx(Marker, {
-				type: line.type,
-				indicators
-			}),
+			/* @__PURE__ */ jsx(Marker, { type: line.type }),
 			/* @__PURE__ */ jsx(DiffCode, {
 				line,
 				tokens,
@@ -303,17 +300,34 @@ function DiffStats({ additions, deletions }) {
 		"data-control-family": "code-diff",
 		"data-slot": "stat",
 		className: "flex items-center",
-		children: [/* @__PURE__ */ jsxs("span", {
-			"data-control-ui": "code-diff",
-			"data-control-family": "code-diff",
-			"data-slot": "stat-additions",
-			children: ["+", additions]
-		}), /* @__PURE__ */ jsxs("span", {
-			"data-control-ui": "code-diff",
-			"data-control-family": "code-diff",
-			"data-slot": "stat-deletions",
-			children: ["−", deletions]
-		})]
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				"data-control-ui": "code-diff",
+				"data-control-family": "code-diff",
+				"data-slot": "stat-additions",
+				"aria-hidden": "true",
+				children: ["+", additions]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-control-ui": "code-diff",
+				"data-control-family": "code-diff",
+				"data-slot": "stat-deletions",
+				"aria-hidden": "true",
+				children: ["−", deletions]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [
+					additions,
+					" ",
+					additions === 1 ? "addition" : "additions",
+					", ",
+					deletions,
+					" ",
+					deletions === 1 ? "deletion" : "deletions"
+				]
+			})
+		]
 	});
 }
 function lineDescription(label, line, number) {
@@ -345,6 +359,7 @@ function fileIdentity(file) {
 }
 function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow, maxHeight, showFileHeader }) {
 	const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+	const [revealedRowId, setRevealedRowId] = useState(null);
 	const texts = useMemo(() => sideTexts(file), [file]);
 	const tokens = useSideTokens(texts.old, texts.new, lang, Boolean(lang));
 	const rows = useMemo(() => buildRows(file, diffStyle, expanded), [
@@ -353,6 +368,7 @@ function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow,
 		expanded
 	]);
 	const scrollRef = useRef(null);
+	const revealedRowRef = useRef(null);
 	const shouldVirtualize = rows.length > VIRTUALIZE_THRESHOLD;
 	const virtualizer = useVirtualizer({
 		count: rows.length,
@@ -362,7 +378,25 @@ function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow,
 		enabled: shouldVirtualize
 	});
 	function expandGap(gapIndex) {
-		setExpanded((current) => new Set(current).add(gapIndex));
+		const firstLine = expandedContext(file, gapIndex)[0];
+		flushSync(() => {
+			setExpanded((current) => new Set(current).add(gapIndex));
+			setRevealedRowId(firstLine ? expandedRowId(gapIndex, firstLine) : null);
+		});
+		revealedRowRef.current?.focus();
+	}
+	function rowFrameProps(id) {
+		if (id !== revealedRowId) return {};
+		return {
+			tabIndex: -1,
+			"data-control-ui": "code-diff",
+			"data-control-family": "code-diff",
+			"data-slot": "revealed-row"
+		};
+	}
+	function measureRevealedRow(node) {
+		revealedRowRef.current = node;
+		virtualizer.measureElement(node);
 	}
 	const gridClassName = overflow === "scroll" ? "w-max min-w-full" : "w-full";
 	function renderRow(row) {
@@ -388,6 +422,7 @@ function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow,
 				"data-control-ui": "code-diff",
 				"data-control-family": "code-diff",
 				"data-slot": "expander-label",
+				title: row.label,
 				className: "truncate",
 				children: row.label
 			})]
@@ -433,6 +468,7 @@ function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow,
 					"data-control-ui": "code-diff",
 					"data-control-family": "code-diff",
 					"data-slot": "file-title",
+					title: fileTitle(file),
 					className: "min-w-0 truncate",
 					children: fileTitle(file)
 				}), /* @__PURE__ */ jsx(DiffStats, {
@@ -449,7 +485,7 @@ function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow,
 			}),
 			/* @__PURE__ */ jsx(ScrollArea, {
 				maxHeight,
-				viewportClassName: void 0,
+				"aria-label": fileTitle(file),
 				viewportProps: {
 					"data-control-ui": "code-diff",
 					"data-control-family": "code-diff",
@@ -466,8 +502,9 @@ function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow,
 						const row = rows[item.index];
 						if (!row) return null;
 						return /* @__PURE__ */ jsx("div", {
-							ref: virtualizer.measureElement,
+							ref: row.id === revealedRowId ? measureRevealedRow : virtualizer.measureElement,
 							"data-index": item.index,
+							...rowFrameProps(row.id),
 							style: {
 								position: "absolute",
 								top: 0,
@@ -480,7 +517,11 @@ function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow,
 					})
 				}) : /* @__PURE__ */ jsx("div", {
 					className: gridClassName,
-					children: rows.map((row) => /* @__PURE__ */ jsx("div", { children: renderRow(row) }, row.id))
+					children: rows.map((row) => /* @__PURE__ */ jsx("div", {
+						ref: row.id === revealedRowId ? revealedRowRef : void 0,
+						...rowFrameProps(row.id),
+						children: renderRow(row)
+					}, row.id))
 				})
 			})
 		]
@@ -499,11 +540,13 @@ function CodeDiff({ patch, oldText, newText, lang, name, diffStyle = "unified",
 	const deletions = files.reduce((total, file) => total + file.deletions, 0);
 	const copyValue = patch ?? newText ?? "";
 	const firstFile = files[0];
+	const title = files.length === 1 && firstFile ? fileTitle(firstFile) : `${files.length} files`;
 	return /* @__PURE__ */ jsxs("figure", {
 		"data-control-ui": "code-diff",
 		"data-control-family": "code-diff",
 		"data-slot": "root",
 		"data-surface": "panel",
+		dir: "ltr",
 		"data-diff-style": diffStyle,
 		"data-file-count": files.length,
 		"data-header": header ? "true" : void 0,
@@ -519,8 +562,9 @@ function CodeDiff({ patch, oldText, newText, lang, name, diffStyle = "unified",
 				"data-control-ui": "code-diff",
 				"data-control-family": "code-diff",
 				"data-slot": "title",
+				title,
 				className: "min-w-0 truncate",
-				children: files.length === 1 && firstFile ? fileTitle(firstFile) : `${files.length} files`
+				children: title
 			}), /* @__PURE__ */ jsxs("div", {
 				"data-control-ui": "code-diff",
 				"data-control-family": "code-diff",

package/dist/ui/code.d.ts

@@ -23,7 +23,7 @@ export declare function CodeHeader({ className, ...props }: CodeHeaderProps): im
 export type CodeTitleProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & CodeKnobStyle;
 };
-export declare function CodeTitle({ className, ...props }: CodeTitleProps): import("react").JSX.Element;
+export declare function CodeTitle({ className, children, ...props }: CodeTitleProps): import("react").JSX.Element;
 export type CodeActionsProps = ComponentProps<"div"> & {
   style?: CSSProperties & CodeKnobStyle;
 };
@@ -33,8 +33,9 @@ export type CodeCopyProps = Omit<ComponentProps<typeof Button>, "children" | "on
   children?: ReactNode;
   copiedLabel?: ReactNode;
   copiedAriaLabel?: string;
+  copyFailedLabel?: string;
 };
-export declare function CodeCopy({ value, copiedLabel, copiedAriaLabel, children, className, "aria-label": ariaLabel, ...props }: CodeCopyProps): import("react").JSX.Element;
+export declare function CodeCopy({ value, copiedLabel, copiedAriaLabel, copyFailedLabel, children, className, "aria-label": ariaLabel, ...props }: CodeCopyProps): import("react").JSX.Element;
 export type CodeFloatingCopyProps = Omit<CodeCopyProps, "children" | "copiedLabel">;
 export declare function CodeFloatingCopy({ className, ...props }: CodeFloatingCopyProps): import("react").JSX.Element;
 export declare function useCodeTokens({ code, lang, tokens, highlight }: {
@@ -50,6 +51,7 @@ export declare function CodeTokenLine({ tokens, plain }: {
 export type CodeContentProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   code: string;
   lang?: string;
+  fileName?: string;
   tokens?: CodeTokenLines | null;
   highlight?: CodeHighlight;
   showLineNumbers?: boolean;
@@ -59,7 +61,7 @@ export type CodeContentProps = Omit<ComponentProps<"div">, "children" | "style">
   virtualize?: boolean;
   style?: CSSProperties & CodeKnobStyle;
 };
-export declare function CodeContent({ code, lang, tokens, highlight, showLineNumbers, startLine, highlightLines, maxHeight, virtualize, className, ref, style, ...props }: CodeContentProps): import("react").JSX.Element;
+export declare function CodeContent({ code, lang, fileName, tokens, highlight, showLineNumbers, startLine, highlightLines, maxHeight, virtualize, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref, style, ...props }: CodeContentProps): import("react").JSX.Element;
 export type CodeEditableProps = Omit<ComponentProps<"textarea">, "defaultValue" | "value" | "style"> & {
   value?: string;
   defaultValue?: string;

package/dist/ui/code.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { LiveStatus } from "./live-status.js";
 import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { highlightToTokens } from "../lib/code-tokens.js";
 import { ScrollArea } from "./scroll-area.js";
@@ -36,6 +37,7 @@ function Code({ overflow = "scroll", chrome = "standalone", density = "default",
 			"data-control-family": "code",
 			"data-slot": "root",
 			"data-surface": "panel",
+			dir: "ltr",
 			"data-chrome": chrome,
 			"data-density": density,
 			"data-header": hasHeader ? "true" : void 0,
@@ -54,13 +56,15 @@ function CodeHeader({ className, ...props }) {
 		...props
 	});
 }
-function CodeTitle({ className, ...props }) {
+function CodeTitle({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "code",
 		"data-control-family": "code",
 		"data-slot": "title",
+		title: typeof children === "string" ? children : void 0,
 		className: cn("block min-w-0 truncate", className),
-		...props
+		...props,
+		children
 	});
 }
 function CodeActions({ className, ...props }) {
@@ -72,34 +76,39 @@ function CodeActions({ className, ...props }) {
 		...props
 	});
 }
-function CodeCopy({ value, copiedLabel, copiedAriaLabel = "Copied", children, className, "aria-label": ariaLabel, ...props }) {
-	const { isCopied, handleCopy } = useCopyToClipboard({ text: value });
+function copyStatusMessage(status, copiedMessage, failedMessage) {
+	if (status === "copied") return copiedMessage;
+	if (status === "failed") return failedMessage;
+	return "";
+}
+function CodeCopy({ value, copiedLabel, copiedAriaLabel = "Copied to clipboard", copyFailedLabel = "Couldn't copy. Select the text and copy it manually.", children, className, "aria-label": ariaLabel, ...props }) {
+	const { status, handleCopy } = useCopyToClipboard({ text: value });
 	const isIconOnly = children === void 0;
 	const label = ariaLabel ?? (isIconOnly ? "Copy code" : void 0);
 	const copied = copiedLabel ?? (isIconOnly ? /* @__PURE__ */ jsx(CheckIcon, {
 		"aria-hidden": "true",
 		className: "size-3.5"
 	}) : "Copied");
+	const liveStatus = /* @__PURE__ */ jsx(LiveStatus, { message: copyStatusMessage(status, copiedAriaLabel, copyFailedLabel) });
 	const button = /* @__PURE__ */ jsx(Button, {
 		type: "button",
 		variant: "quiet",
 		size: "xs",
-		"aria-live": "polite",
-		"aria-label": label && isCopied ? copiedAriaLabel : label,
+		"aria-label": label,
 		"data-code-copy": isIconOnly ? "true" : void 0,
 		className,
 		...props,
 		onClick: handleCopy,
-		children: isCopied ? copied : children ?? /* @__PURE__ */ jsx(CopyIcon, {
+		children: status === "copied" ? copied : children ?? /* @__PURE__ */ jsx(CopyIcon, {
 			"aria-hidden": "true",
 			className: "size-3.5"
 		})
 	});
-	if (!isIconOnly) return button;
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
-		side: "left",
-		children: label
-	})] });
+	if (!isIconOnly) return /* @__PURE__ */ jsxs(Fragment$1, { children: [button, liveStatus] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "inline-start",
+		children: status === "copied" ? copiedAriaLabel : label
+	})] }), liveStatus] });
 }
 function CodeFloatingCopy({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CodeCopy, {
@@ -175,8 +184,9 @@ function CodeRow({ index, number, tokens, plain, overflow, showLineNumbers, high
 		})]
 	});
 }
-function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers = false, startLine = 1, highlightLines, maxHeight = "32rem", virtualize, className, ref, style, ...props }) {
+function CodeContent({ code, lang, fileName, tokens, highlight = "auto", showLineNumbers = false, startLine = 1, highlightLines, maxHeight = "32rem", virtualize, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref, style, ...props }) {
 	const { density, overflow, hasHeader, copy } = useCodeContext();
+	const regionLabel = ariaLabelledby ? ariaLabel : ariaLabel ?? fileName ?? (lang ? `${lang} code` : "Code");
 	const resolvedTokens = useCodeTokens({
 		code,
 		lang,
@@ -193,7 +203,6 @@ function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers =
 		else if (ref) ref.current = node;
 	}
 	const shouldVirtualize = virtualize ?? plainLines.length > MAX_STATIC_CODE_LINES;
-	const useScrollArea = density !== "compact" || overflow !== "wrap";
 	const virtualizer = useVirtualizer({
 		count: plainLines.length,
 		getScrollElement: () => scrollRef.current,
@@ -254,8 +263,10 @@ function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers =
 			highlighted: highlightedLineNumbers.has(startLine + index)
 		}, index))
 	});
-	const content = useScrollArea ? /* @__PURE__ */ jsx(ScrollArea, {
+	const content = /* @__PURE__ */ jsx(ScrollArea, {
 		maxHeight,
+		"aria-label": regionLabel,
+		"aria-labelledby": ariaLabelledby,
 		viewportClassName: className,
 		viewportProps: {
 			...props,
@@ -266,18 +277,6 @@ function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers =
 		},
 		viewportRef: setScrollElement,
 		children: grid
-	}) : /* @__PURE__ */ jsx("div", {
-		ref: setScrollElement,
-		"data-control-ui": "code",
-		"data-control-family": "code",
-		"data-slot": "content",
-		className: cn("overflow-auto", className),
-		style: {
-			...style,
-			maxHeight
-		},
-		...props,
-		children: grid
 	});
 	if (hasHeader || !copy) return content;
 	return /* @__PURE__ */ jsxs("div", {

package/dist/ui/color-picker.d.ts

@@ -55,6 +55,7 @@ export type ColorPickerInputProps = Omit<Omit<ComponentProps<"input">, "value" |
   style?: CSSProperties & ColorPickerKnobStyle;
 } & {
   size?: ControlSize;
+  invalidLabel?: string;
 };
 export type ColorPickerFormatSelectProps = {
   formats?: ColorFormat[];
@@ -94,6 +95,8 @@ export type ColorPickerContrastProps = Omit<Omit<ComponentProps<"div">, "childre
   style?: CSSProperties & ColorPickerKnobStyle;
 } & {
   background?: string;
+  passLabel?: string;
+  failLabel?: string;
 };
 export type ColorPickerOutputProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
@@ -112,7 +115,7 @@ export declare function ColorPickerAreaThumb({ className, ...props }: ColorPicke
 export declare function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerHueProps): import("react").JSX.Element;
 export declare function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerAlphaProps): import("react").JSX.Element | null;
 export declare function ColorPickerWheel({ className, style, ...props }: ColorPickerWheelProps): import("react").JSX.Element;
-export declare function ColorPickerInput({ size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerInputProps): import("react").JSX.Element;
+export declare function ColorPickerInput({ size, className, invalidLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onFocus, onBlur, onKeyDown, ...props }: ColorPickerInputProps): import("react").JSX.Element;
 export declare function ColorPickerFormatSelect({ formats, size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style }: ColorPickerFormatSelectProps): import("react").JSX.Element;
 export declare function ColorPickerChannels({ className, children, ...props }: ColorPickerChannelsProps): import("react").JSX.Element;
 export declare function ColorPickerChannel({ channel, label, className, "aria-label": ariaLabel, ...props }: ColorPickerChannelProps): import("react").JSX.Element | null;
@@ -131,6 +134,6 @@ export declare function ColorPickerEyeDropper({ className, children, ...props }:
 export declare function ColorPickerSwatches({ colors, label, className, children, ...props }: ColorPickerSwatchesProps): import("react").JSX.Element;
 export declare function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props }: ColorPickerSwatchProps): import("react").JSX.Element;
 export declare function ColorPickerSwatchAdd({ onAdd, className, children, ...props }: ColorPickerSwatchAddProps): import("react").JSX.Element;
-export declare function ColorPickerContrast({ background, className, ...props }: ColorPickerContrastProps): import("react").JSX.Element | null;
+export declare function ColorPickerContrast({ background, passLabel, failLabel, className, ...props }: ColorPickerContrastProps): import("react").JSX.Element | null;
 export declare function ColorPickerOutput({ className, children, renderValue, ...props }: ColorPickerOutputProps): import("react").JSX.Element;
 //#endregion