@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/styles/theme.css

@@ -201,6 +201,7 @@
   --duration-fast: 150ms;
   --duration-base: 200ms;
   --duration-slow: 300ms;
+  --duration-loop: 1000ms;
   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
   --z-overlay: 70;
@@ -218,16 +219,21 @@
   --warning-text: var(--scale-yellow-11);
   --info-text: var(--scale-blue-11);
   --ring-opacity: 1;
-  --focus-ring: var(--ring);
+  --focus-ring: oklch(from var(--ring) l c h / calc(alpha * 0.7));
   --focus-ring-width: 2px;
   --focus-ring-style: solid;
   --focus-ring-offset: 2px;
 
   --control-rim: var(--border);
   --control-rim-width: 1px;
+  --control-boundary: oklch(from var(--foreground) l c h / 0.6);
   --control-fill: oklch(from var(--card) l c h / 0.72);
   --hover-fill: oklch(from var(--foreground) l c h / 0.06);
   --active-fill: oklch(from var(--foreground) l c h / 0.08);
+  --image-outline: oklch(0 0 0 / 0.1);
+  --disabled-opacity: 0.45;
+  --touch-target: 44px;
+  --target-min: 24px;
 
   --text-micro: 0.625rem;
   --text-caption: 0.6875rem;
@@ -250,6 +256,7 @@
   --text-display--line-height: 1.1;
   --text-display--font-weight: 600;
   --text-display--letter-spacing: -0.026em;
+  --text-input-min: 16px;
 
   --corner-shape: round;
   --corner-radius-fit: 0.5;
@@ -320,7 +327,7 @@
   --sidebar-accent: var(--hover-fill);
   --sidebar-accent-foreground: var(--foreground);
   --sidebar-border: var(--border);
-  --sidebar-ring: var(--ring);
+  --sidebar-ring: var(--focus-ring);
 }
 
 :where(.dark:root, .dark[data-skin], .dark [data-skin]) {
@@ -355,7 +362,6 @@
   --destructive: oklch(0.551 0.1799 32);
   --destructive-foreground: oklch(0.9645 0.008 84);
   --ring: oklch(0.66 0 0);
-  --focus-ring: oklch(0.66 0 0);
   --shadow-color: oklch(0 0 0);
   --destructive-text: oklch(from var(--destructive) 0.78 c h);
   --shadow-highlight: oklch(1 0 0 / 0.055);
@@ -365,6 +371,7 @@
   --badge-fill-alpha: 0.2;
   --badge-border-alpha: 0.24;
   --badge-hover-alpha: 0.28;
+  --image-outline: oklch(1 0 0 / 0.1);
 }
 
 @custom-variant dark (&:is(.dark *));
@@ -379,7 +386,9 @@
     --duration-slow: 0ms !important;
   }
 
-  :where(:root, :root *, [data-skin], [data-skin] *, [data-skin]::before, [data-skin]::after, [data-skin] *::before, [data-skin] *::after) {
+  :where(:root, :root *, [data-skin], [data-skin] *):where(:not([data-motion-essential], [data-motion-essential] *)),
+  :where(:root, :root *, [data-skin], [data-skin] *):where(:not([data-motion-essential], [data-motion-essential] *))::before,
+  :where(:root, :root *, [data-skin], [data-skin] *):where(:not([data-motion-essential], [data-motion-essential] *))::after {
     scroll-behavior: auto !important;
     transition-delay: 0ms !important;
     transition-duration: 0ms !important;
@@ -397,14 +406,9 @@
   --duration-slow: 0ms !important;
 }
 
-:where(
-  [data-motion="reduced"],
-  [data-motion="reduced"] *,
-  [data-motion="reduced"]::before,
-  [data-motion="reduced"]::after,
-  [data-motion="reduced"] *::before,
-  [data-motion="reduced"] *::after
-) {
+:where([data-motion="reduced"], [data-motion="reduced"] *):where(:not([data-motion-essential], [data-motion-essential] *)),
+:where([data-motion="reduced"], [data-motion="reduced"] *):where(:not([data-motion-essential], [data-motion-essential] *))::before,
+:where([data-motion="reduced"], [data-motion="reduced"] *):where(:not([data-motion-essential], [data-motion-essential] *))::after {
   scroll-behavior: auto !important;
   transition-delay: 0ms !important;
   transition-duration: 0ms !important;
@@ -414,6 +418,10 @@
 }
 /* biome-ignore-end lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
 
+@theme static {
+  --breakpoint-lg: 64rem;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-canvas: var(--canvas);
@@ -656,22 +664,35 @@
 
 @layer components {
   :where([data-control-family]):focus-visible,
-  :where([data-control-family][data-control="true"]):has(:focus-visible) {
+  :where([data-control-family][data-control="true"]):has(:focus-visible),
+  :where([data-control-family][data-focus-ring="within"]):has(:focus-visible) {
     outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
     outline-offset: var(--focus-ring-offset);
   }
 
-  :where([data-control-family][data-control="true"] [data-control-family]):focus-visible {
+  :where(
+    [data-control-family][data-control="true"] [data-control-family],
+    [data-control-family][data-focus-ring="within"] [data-control-family]
+  ):focus-visible {
     outline-width: 0;
   }
 
+  :where([data-control-family][data-highlighted]):focus-visible {
+    outline-offset: calc(var(--focus-ring-width) * -1);
+  }
+
   @media (forced-colors: active) {
     :where([data-control-family]):focus-visible,
-    :where([data-control-family][data-control="true"]):has(:focus-visible) {
-      outline-color: transparent;
+    :where([data-control-family][data-control="true"]):has(:focus-visible),
+    :where([data-control-family][data-focus-ring="within"]):has(:focus-visible) {
+      outline-color: Highlight;
     }
   }
 
+  :where([data-icon-dir="inline"]:dir(rtl)) {
+    scale: -1 1;
+  }
+
   :where([data-control-ui="chat-message"][data-slot="root"], [data-control-ui="chat-composer"][data-slot="root"]) {
     opacity: 1;
     filter: none;

package/dist/task-list.d.ts

@@ -3,13 +3,16 @@ import { TaskListKnobStyle } from "./knob-contracts/task-list-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/task-list.d.ts
 export type TaskStatus = "pending" | "active" | "completed";
+export type TaskStatusLabels = Record<TaskStatus, string>;
+export declare const taskStatusLabels: TaskStatusLabels;
 export type TaskListProps = Omit<CollapsibleProps, "style"> & {
+  statusLabels?: Partial<TaskStatusLabels>;
   style?: CSSProperties & TaskListKnobStyle;
 };
 type TaskListStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-export declare function TaskList({ className, children, ...props }: TaskListProps): import("react").JSX.Element;
+export declare function TaskList({ statusLabels, className, children, ...props }: TaskListProps): import("react").JSX.Element;
 export type TaskListTriggerProps = TaskListStyleProps<ComponentProps<"button">, TaskListKnobStyle>;
 export declare function TaskListTrigger({ className, children, ...props }: TaskListTriggerProps): import("react").JSX.Element;
 export type TaskListProgressProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle>;

package/dist/task-list.js

@@ -1,10 +1,16 @@
 "use client";
 import { cn } from "./lib/cn.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { createContext, useContext, useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, CircleCheck, CircleDashed, Loader2 } from "lucide-react";
 //#region src/task-list.tsx
+const taskStatusLabels = {
+	pending: "Pending",
+	active: "In progress",
+	completed: "Done"
+};
 const TaskListContext = createContext(null);
 const TaskListRegistrationContext = createContext(null);
 function useTaskListContext() {
@@ -31,7 +37,7 @@ function currentTaskIndex(tasks) {
 	if (pending !== -1) return pending;
 	return tasks.length - 1;
 }
-function TaskList({ className, children, ...props }) {
+function TaskList({ statusLabels, className, children, ...props }) {
 	const [tasks, setTasks] = useState([]);
 	const [registration] = useState(() => ({
 		registerTask(entry) {
@@ -45,6 +51,11 @@ function TaskList({ className, children, ...props }) {
 	const currentIndex = currentTaskIndex(tasks);
 	const current = tasks[currentIndex];
 	const allCompleted = total > 0 && tasks.every((task) => task.status === "completed");
+	const labels = {
+		...taskStatusLabels,
+		...statusLabels
+	};
+	const progressStatus = current?.status === "active" ? `${current.label}: ${labels.active}` : "";
 	return /* @__PURE__ */ jsx(TaskListRegistrationContext.Provider, {
 		value: registration,
 		children: /* @__PURE__ */ jsx(TaskListContext.Provider, {
@@ -52,16 +63,17 @@ function TaskList({ className, children, ...props }) {
 				total,
 				current,
 				currentNumber: total === 0 ? 0 : currentIndex + 1,
-				allCompleted
+				allCompleted,
+				statusLabels: labels
 			},
-			children: /* @__PURE__ */ jsx(Collapsible, {
+			children: /* @__PURE__ */ jsxs(Collapsible, {
 				"data-control-ui": "task-list",
 				"data-control-family": "task-list",
 				"data-slot": "root",
 				"data-surface": "panel",
 				className: cn("w-full overflow-hidden", className),
 				...props,
-				children
+				children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: progressStatus })]
 			})
 		})
 	});
@@ -101,13 +113,15 @@ function TaskListProgress({ className, children, ...props }) {
 }
 function TaskListLabel({ className, children, ...props }) {
 	const { current } = useTaskListContext();
+	const text = children ?? current?.label;
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "task-list",
 		"data-control-family": "task-list",
 		"data-slot": "label",
+		title: typeof text === "string" ? text : void 0,
 		className: cn("min-w-0 flex-1 truncate", className),
 		...props,
-		children: children ?? current?.label
+		children: text
 	});
 }
 function TaskListContent({ className, children, ...props }) {
@@ -145,7 +159,7 @@ function TaskListItem({ label, status = "pending", className, children, ...props
 		className: cn("flex items-center", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(TaskListIndicator, { status }), /* @__PURE__ */ jsx("span", {
-			className: "min-w-0 flex-1 truncate",
+			className: "min-w-0 flex-1 text-pretty",
 			children: children ?? label
 		})]
 	});
@@ -157,6 +171,7 @@ const indicatorIcons = {
 };
 function TaskListIndicator({ status = "pending", className, ...props }) {
 	const Icon = indicatorIcons[status];
+	const statusLabels = useContext(TaskListContext)?.statusLabels ?? taskStatusLabels;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-control-ui": "task-list",
 		"data-control-family": "task-list",
@@ -166,12 +181,13 @@ function TaskListIndicator({ status = "pending", className, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": "true",
+			"data-motion-essential": status === "active" ? "" : void 0,
 			className: "size-3.5"
 		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: status
+			children: statusLabels[status]
 		})]
 	});
 }
 //#endregion
-export { TaskList, TaskListContent, TaskListIndicator, TaskListItem, TaskListLabel, TaskListProgress, TaskListTrigger };
+export { TaskList, TaskListContent, TaskListIndicator, TaskListItem, TaskListLabel, TaskListProgress, TaskListTrigger, taskStatusLabels };

package/dist/thread-rail.d.ts

@@ -18,7 +18,7 @@ export declare function ThreadRailItem({ from, inView, active, index, className,
 export type ThreadRailLineProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-export declare function ThreadRailLine({ className, ...props }: ThreadRailLineProps): import("react").JSX.Element;
+export declare function ThreadRailLine({ className, onKeyDown, "aria-label": ariaLabel, ...props }: ThreadRailLineProps): import("react").JSX.Element;
 export type ThreadRailPopoverProps = Omit<ComponentProps<"div">, "style"> & {
   children?: ReactNode;
   style?: CSSProperties & ThreadRailKnobStyle;

package/dist/thread-rail.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/thread-rail.tsx
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -16,11 +16,14 @@ function useItem() {
 	if (!context) throw new Error("ThreadRail compound parts must be rendered inside <ThreadRailItem>.");
 	return context;
 }
+const LayerContext = createContext(null);
 function ThreadRail({ className, children, style, ...props }) {
 	const [hovered, setHovered] = useState(0);
 	const cardRef = useRef(null);
 	const activeLayerRef = useRef(null);
 	const [cardHeight, setCardHeight] = useState();
+	const baseId = useId();
+	const lines = useRef([]);
 	const items = Children.toArray(children).filter((child) => isValidElement(child));
 	const popovers = items.map((item) => {
 		const popover = Children.toArray(item.props.children).find((child) => isValidElement(child) && child.type === ThreadRailPopover);
@@ -40,7 +43,10 @@ function ThreadRail({ className, children, style, ...props }) {
 	return /* @__PURE__ */ jsx(RailContext.Provider, {
 		value: {
 			current: hovered,
-			activate: setHovered
+			count: items.length,
+			activate: setHovered,
+			layerId: (index, part) => `${baseId}-${index}-${part}`,
+			lines
 		},
 		children: /* @__PURE__ */ jsxs("nav", {
 			"data-control-ui": "thread-rail",
@@ -52,6 +58,7 @@ function ThreadRail({ className, children, style, ...props }) {
 			...props,
 			children: [items.map((item, index) => cloneElement(item, { index })), /* @__PURE__ */ jsx("div", {
 				ref: cardRef,
+				"aria-hidden": "true",
 				"data-control-ui": "thread-rail",
 				"data-control-family": "thread-rail",
 				"data-slot": "popover",
@@ -61,14 +68,16 @@ function ThreadRail({ className, children, style, ...props }) {
 					height: cardHeight
 				},
 				className: cn("pointer-events-none z-20 w-72 overflow-hidden", activePopover?.className),
-				children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
-					"data-control-ui": "thread-rail",
-					"data-control-family": "thread-rail",
-					"data-slot": "popover-layer",
-					ref: index === hovered ? activeLayerRef : void 0,
-					"data-active": index === hovered ? "true" : void 0,
-					className: "",
-					children: popovers[index]?.children ?? null
+				children: items.map((item, index) => /* @__PURE__ */ jsx(LayerContext.Provider, {
+					value: index,
+					children: /* @__PURE__ */ jsx("div", {
+						"data-control-ui": "thread-rail",
+						"data-control-family": "thread-rail",
+						"data-slot": "popover-layer",
+						ref: index === hovered ? activeLayerRef : void 0,
+						"data-active": index === hovered ? "true" : void 0,
+						children: popovers[index]?.children ?? null
+					})
 				}, item.key ?? index))
 			})]
 		})
@@ -81,7 +90,7 @@ function ThreadRailItem({ from = "user", inView = false, active = false, index =
 		value: {
 			index,
 			inView: isInView,
-			activate: rail.activate
+			active
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			"data-control-ui": "thread-rail",
@@ -97,38 +106,71 @@ function ThreadRailItem({ from = "user", inView = false, active = false, index =
 		})
 	});
 }
-function ThreadRailLine({ className, ...props }) {
-	const { index, inView, activate } = useItem();
+function rovingTarget(key, index, count) {
+	const last = count - 1;
+	return {
+		ArrowDown: Math.min(index + 1, last),
+		ArrowUp: Math.max(index - 1, 0),
+		Home: 0,
+		End: last
+	}[key];
+}
+function ThreadRailLine({ className, onKeyDown, "aria-label": ariaLabel, ...props }) {
+	const { index, active } = useItem();
+	const rail = useRail();
 	return /* @__PURE__ */ jsx("button", {
+		ref: (node) => {
+			rail.lines.current[index] = node;
+		},
 		"data-control-ui": "thread-rail",
 		"data-control-family": "thread-rail",
 		"data-slot": "line",
 		type: "button",
-		"aria-current": inView ? "location" : void 0,
-		onMouseEnter: () => activate(index),
-		onFocus: () => activate(index),
-		className: cn("relative block cursor-pointer before:absolute before:-inset-y-1 before:inset-x-0 before:content-['']", className),
+		tabIndex: index === rail.current ? 0 : -1,
+		"aria-current": active ? "location" : void 0,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel === void 0 ? rail.layerId(index, "title") : void 0,
+		"aria-describedby": rail.layerId(index, "summary"),
+		onMouseEnter: () => rail.activate(index),
+		onFocus: () => rail.activate(index),
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			const target = event.defaultPrevented ? void 0 : rovingTarget(event.key, index, rail.count);
+			if (target === void 0) return;
+			event.preventDefault();
+			rail.lines.current[target]?.focus();
+		},
+		className: cn("relative block cursor-pointer", className),
 		...props
 	});
 }
 function ThreadRailPopover(_props) {
 	return null;
 }
+function useLayerId(part) {
+	const rail = useRail();
+	const layer = useContext(LayerContext);
+	return layer === null ? void 0 : rail.layerId(layer, part);
+}
 function ThreadRailTitle({ className, ...props }) {
+	const id = useLayerId("title");
 	return /* @__PURE__ */ jsx("div", {
+		id,
 		"data-control-ui": "thread-rail",
 		"data-control-family": "thread-rail",
 		"data-slot": "title",
-		className: cn("truncate", className),
+		className: cn("line-clamp-2 text-pretty", className),
 		...props
 	});
 }
 function ThreadRailSummary({ className, ...props }) {
+	const id = useLayerId("summary");
 	return /* @__PURE__ */ jsx("p", {
+		id,
 		"data-control-ui": "thread-rail",
 		"data-control-family": "thread-rail",
 		"data-slot": "summary",
-		className: cn("line-clamp-3", className),
+		className: cn("line-clamp-3 text-pretty", className),
 		...props
 	});
 }

package/dist/transcript-divider.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/transcript-divider.tsx
 function TranscriptDivider({ tone = "neutral", className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
+		role: children == null ? "separator" : void 0,
 		"data-control-ui": "transcript-divider",
 		"data-control-family": "transcript-divider",
 		"data-slot": "root",
@@ -17,7 +18,7 @@ function TranscriptDividerLabel({ className, ...props }) {
 		"data-control-ui": "transcript-divider",
 		"data-control-family": "transcript-divider",
 		"data-slot": "label",
-		className: cn("min-w-0 truncate", className),
+		className: cn("min-w-0 text-center text-pretty", className),
 		...props
 	});
 }

package/dist/ui/alert.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { AlertKnobStyle } from "../knob-contracts/alert-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/alert.d.ts
@@ -9,12 +10,13 @@ export type AlertProps = Omit<ComponentProps<"div">, "style"> & {
   variant?: AlertVariant;
 };
 export type AlertTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & AlertKnobStyle;
 };
 export type AlertDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & AlertKnobStyle;
 };
 export declare function Alert({ variant, className, ...props }: AlertProps): import("react").JSX.Element;
-export declare function AlertTitle({ className, ...props }: AlertTitleProps): import("react").JSX.Element;
+export declare function AlertTitle({ render, className, ...props }: AlertTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function AlertDescription({ className, ...props }: AlertDescriptionProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/alert.js

@@ -1,10 +1,12 @@
+"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/alert.tsx
 const alertVariants = ["default", "destructive"];
 function Alert({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		role: "alert",
+		role: variant === "destructive" ? "alert" : "status",
 		"data-control-ui": "alert",
 		"data-control-family": "alert",
 		"data-slot": "root",
@@ -14,13 +16,17 @@ function Alert({ variant = "default", className, ...props }) {
 		...props
 	});
 }
-function AlertTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "alert",
-		"data-control-family": "alert",
-		"data-slot": "title",
-		className: cn("col-start-2 min-w-0", className),
-		...props
+function AlertTitle({ render, className, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "alert",
+			"data-control-family": "alert",
+			"data-slot": "title",
+			className: cn("col-start-2 min-w-0", className)
+		}
 	});
 }
 function AlertDescription({ className, ...props }) {

package/dist/ui/autocomplete.js

@@ -53,7 +53,7 @@ function AutocompleteInput({ size = "md", className, ...props }) {
 			"data-size": size,
 			className: cn("w-full min-w-0 disabled:cursor-not-allowed", className),
 			...props
-		}), /* @__PURE__ */ jsx(AutocompleteClear, { className: "absolute right-1.5 top-1/2 -translate-y-1/2" })]
+		}), /* @__PURE__ */ jsx(AutocompleteClear, { className: "absolute end-1.5 top-1/2 -translate-y-1/2" })]
 	});
 }
 function AutocompleteContent({ className, children, sideOffset = 6, ...props }) {
@@ -85,7 +85,9 @@ function AutocompleteContent({ className, children, sideOffset = 6, ...props })
 function AutocompleteList({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		className: "w-full",
+		viewportClassName: "overscroll-contain",
 		maxHeight: "min(18rem, var(--available-height))",
+		lockAxis: "x",
 		children: /* @__PURE__ */ jsx(Autocomplete$1.List, {
 			"data-control-ui": "autocomplete",
 			"data-popup-kind": "autocomplete",

package/dist/ui/avatar.d.ts

@@ -16,8 +16,16 @@ export type AvatarFallbackProps = Omit<ComponentProps<"span">, "style"> & {
   delay?: number;
   style?: CSSProperties & AvatarKnobStyle;
 };
+export declare const avatarBadgeStatuses: readonly ["online", "away", "busy", "offline"];
+export type AvatarBadgeStatus = (typeof avatarBadgeStatuses)[number];
+export type AvatarBadgeProps = Omit<ComponentProps<"span">, "style"> & {
+  status?: AvatarBadgeStatus;
+  label?: string;
+  style?: CSSProperties & AvatarKnobStyle;
+};
 export declare function Avatar({ className, ...props }: AvatarProps): import("react").JSX.Element;
 export declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").JSX.Element;
 export declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react").JSX.Element;
 export declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react").JSX.Element;
+export declare function AvatarBadge({ className, status, label, children, ...props }: AvatarBadgeProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/avatar.js

@@ -1,14 +1,20 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 //#region src/ui/avatar.tsx
+const avatarBadgeStatuses = [
+	"online",
+	"away",
+	"busy",
+	"offline"
+];
 function Avatar({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		"data-control-ui": "avatar",
 		"data-control-family": "avatar",
 		"data-slot": "root",
-		className: cn("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden align-middle", className),
+		className: cn("relative inline-flex shrink-0 select-none items-center justify-center align-middle", className),
 		...props
 	});
 }
@@ -40,5 +46,19 @@ function AvatarFallback({ className, ...props }) {
 		...props
 	});
 }
+function AvatarBadge({ className, status, label, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "avatar",
+		"data-control-family": "avatar",
+		"data-slot": "badge",
+		"data-status": status,
+		className: cn("absolute inline-flex items-center justify-center", className),
+		...props,
+		children: [children, label ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}) : null]
+	});
+}
 //#endregion
-export { Avatar, AvatarFallback, AvatarGroup, AvatarImage };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, avatarBadgeStatuses };

package/dist/ui/badge.js

@@ -27,7 +27,7 @@ function Badge({ variant = "default", size = "md", color, render, className, chi
 			"data-variant": variant,
 			"data-size": size,
 			"data-color": resolvedColor,
-			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3", size === "sm" ? "text-micro" : "text-caption", className),
+			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3", className),
 			children
 		}
 	});

package/dist/ui/breadcrumb.d.ts

@@ -0,0 +1,27 @@
+import { RenderProp } from "../control-props.js";
+import { BreadcrumbKnobStyle } from "../knob-contracts/breadcrumb-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/breadcrumb.d.ts
+export declare function Breadcrumb({ className, ...props }: ComponentProps<"nav"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbList({ className, ...props }: Omit<ComponentProps<"ol">, "style"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbItem({ className, ...props }: ComponentProps<"li"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbLink({ render, className, children, ...props }: ComponentProps<"a"> & {
+  render?: RenderProp<ComponentProps<"a">>;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function BreadcrumbPage({ className, ...props }: Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<"li"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbEllipsis({ label, className, ...props }: Omit<ComponentProps<"span">, "children"> & {
+  label?: string;
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+//#endregion