@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/ui/stepper.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { createContext, useContext, useId, useState } from "react";
+import { createContext, useContext, useEffect, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, CircleAlertIcon } from "lucide-react";
 //#region src/ui/stepper.tsx
@@ -16,25 +16,48 @@ function useStepperItem() {
 	if (!context) throw new Error("Stepper item parts must be used within <StepperItem>.");
 	return context;
 }
+function stepPartId(baseId, step, part) {
+	return `${baseId}-step-${step}-${part}`;
+}
+function useRegisteredId(id, rendered = true) {
+	const { registerId } = useStepper();
+	useEffect(() => rendered ? registerId(id) : void 0, [
+		id,
+		rendered,
+		registerId
+	]);
+}
+function renderedIdRefs(renderedIds, ids) {
+	const refs = ids.filter((id) => renderedIds.has(id));
+	return refs.length > 0 ? refs.join(" ") : void 0;
+}
 function stateForStep(value, step) {
 	if (value === null) return "neutral";
 	if (step < value) return "complete";
 	if (step === value) return "current";
 	return "upcoming";
 }
-function indicatorStateLabel(state, invalid) {
+function statusStateLabel(state, invalid) {
 	if (invalid) return "invalid";
 	if (state === "neutral") return null;
 	return state;
 }
+function defaultStatusLabel({ step, state, invalid, disabled }) {
+	const stateLabel = statusStateLabel(state, invalid);
+	return [
+		`Step ${step + 1}`,
+		stateLabel,
+		disabled ? "disabled" : null
+	].filter(Boolean).join(", ");
+}
 function defaultIndicatorContent(step, state, invalid) {
 	if (invalid) return /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4" });
 	if (state === "complete") return /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" });
 	return step + 1;
 }
 function itemLayout(orientation, responsive) {
-	if (orientation === "vertical") return "grid min-w-0 grid-cols-[2rem_minmax(0,1fr)]";
-	return cn("relative grid min-w-0 flex-1 grid-cols-1 justify-items-center", responsive && "@max-md/stepper:w-full @max-md/stepper:flex-none @max-md/stepper:grid-cols-[2rem_minmax(0,1fr)] @max-md/stepper:justify-items-stretch");
+	if (orientation === "vertical") return "grid min-w-0 grid-cols-[var(--cui-stepper-indicator-size)_minmax(0,1fr)]";
+	return cn("relative grid min-w-0 flex-1 grid-cols-1 justify-items-center", responsive && "@max-md/stepper:w-full @max-md/stepper:flex-none @max-md/stepper:grid-cols-[var(--cui-stepper-indicator-size)_minmax(0,1fr)] @max-md/stepper:justify-items-stretch");
 }
 function partLayout(orientation, responsive, part) {
 	const vertical = {
@@ -56,9 +79,19 @@ function partLayout(orientation, responsive, part) {
 	}[part];
 	return cn(horizontal, narrow);
 }
-function Stepper({ value, defaultValue = null, onValueChange, orientation = "horizontal", contentMode = "current", responsive = true, id, className, children, ...props }) {
+function Stepper({ value, defaultValue = null, onValueChange, orientation = "horizontal", contentMode = "current", responsive = true, getStatusLabel = defaultStatusLabel, id, className, children, ...props }) {
 	const generatedId = useId();
 	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [renderedIds, setRenderedIds] = useState(() => /* @__PURE__ */ new Set());
+	const [registerId] = useState(() => (renderedId) => {
+		setRenderedIds((current) => current.has(renderedId) ? current : new Set(current).add(renderedId));
+		return () => setRenderedIds((current) => {
+			if (!current.has(renderedId)) return current;
+			const next = new Set(current);
+			next.delete(renderedId);
+			return next;
+		});
+	});
 	const controlled = value !== void 0;
 	const currentValue = value !== void 0 ? value : internalValue;
 	const selectStep = (step) => {
@@ -72,7 +105,10 @@ function Stepper({ value, defaultValue = null, onValueChange, orientation = "hor
 			contentMode,
 			responsive,
 			baseId: id ?? generatedId,
-			selectStep
+			selectStep,
+			getStatusLabel,
+			renderedIds,
+			registerId
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			...props,
@@ -107,8 +143,10 @@ function StepperItem({ step, disabled = false, invalid = false, className, child
 		state,
 		disabled,
 		invalid,
-		titleId: `${baseId}-step-${step}-title`,
-		contentId: `${baseId}-step-${step}-content`
+		titleId: stepPartId(baseId, step, "title"),
+		descriptionId: stepPartId(baseId, step, "description"),
+		statusId: stepPartId(baseId, step, "status"),
+		contentId: stepPartId(baseId, step, "content")
 	};
 	return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
 		value: contextValue,
@@ -128,8 +166,8 @@ function StepperItem({ step, disabled = false, invalid = false, className, child
 	});
 }
 function StepperTrigger({ disabled: disabledProp, className, onClick, type = "button", ...props }) {
-	const { orientation, responsive, selectStep } = useStepper();
-	const { step, state, disabled, invalid, contentId } = useStepperItem();
+	const { orientation, responsive, selectStep, renderedIds } = useStepper();
+	const { step, state, disabled, invalid, titleId, descriptionId, statusId, contentId } = useStepperItem();
 	const isDisabled = disabled || Boolean(disabledProp);
 	return /* @__PURE__ */ jsx("button", {
 		...props,
@@ -140,8 +178,11 @@ function StepperTrigger({ disabled: disabledProp, className, onClick, type = "bu
 		"data-invalid": invalid ? "true" : void 0,
 		type,
 		disabled: isDisabled,
-		"aria-controls": contentId,
-		className: cn("group/stepper-trigger col-span-full row-span-3 row-start-1 grid w-full min-w-0 grid-cols-1 justify-items-center disabled:pointer-events-none disabled:cursor-not-allowed", orientation === "vertical" && "row-span-2 grid-cols-[2rem_minmax(0,1fr)] justify-items-stretch", orientation === "horizontal" && responsive && "@max-md/stepper:row-span-2 @max-md/stepper:grid-cols-[2rem_minmax(0,1fr)] @max-md/stepper:justify-items-stretch", className),
+		"aria-current": state === "current" ? "step" : void 0,
+		"aria-labelledby": renderedIdRefs(renderedIds, [titleId]),
+		"aria-describedby": renderedIdRefs(renderedIds, [statusId, descriptionId]),
+		"aria-controls": renderedIdRefs(renderedIds, [contentId]),
+		className: cn("group/stepper-trigger col-span-full row-span-3 row-start-1 grid w-full min-w-0 grid-cols-1 justify-items-center disabled:pointer-events-none disabled:cursor-not-allowed", orientation === "vertical" && "row-span-2 grid-cols-[var(--cui-stepper-indicator-size)_minmax(0,1fr)] justify-items-stretch", orientation === "horizontal" && responsive && "@max-md/stepper:row-span-2 @max-md/stepper:grid-cols-[var(--cui-stepper-indicator-size)_minmax(0,1fr)] @max-md/stepper:justify-items-stretch", className),
 		onClick: (event) => {
 			onClick?.(event);
 			if (!event.defaultPrevented && !isDisabled) selectStep(step);
@@ -149,14 +190,9 @@ function StepperTrigger({ disabled: disabledProp, className, onClick, type = "bu
 	});
 }
 function StepperIndicator({ className, children, ...props }) {
-	const { orientation, responsive } = useStepper();
-	const { step, state, disabled, invalid } = useStepperItem();
-	const stateLabel = indicatorStateLabel(state, invalid);
-	const status = [
-		`Step ${step + 1}`,
-		stateLabel,
-		disabled ? "disabled" : null
-	].filter(Boolean).join(", ");
+	const { orientation, responsive, getStatusLabel } = useStepper();
+	const { step, state, disabled, invalid, statusId } = useStepperItem();
+	useRegisteredId(statusId);
 	const indicatorContent = children ?? defaultIndicatorContent(step, state, invalid);
 	return /* @__PURE__ */ jsxs("span", {
 		...props,
@@ -170,8 +206,14 @@ function StepperIndicator({ className, children, ...props }) {
 			"aria-hidden": "true",
 			children: indicatorContent
 		}), /* @__PURE__ */ jsx("span", {
+			id: statusId,
 			className: "sr-only",
-			children: status
+			children: getStatusLabel({
+				step,
+				state,
+				invalid,
+				disabled
+			})
 		})]
 	});
 }
@@ -186,12 +228,13 @@ function StepperSeparator({ className, ...props }) {
 		"data-state": state,
 		"data-invalid": invalid ? "true" : void 0,
 		"aria-hidden": "true",
-		className: cn("absolute", orientation === "horizontal" && "top-4 right-[calc(-50%+1rem)] left-[calc(50%+1rem)]", orientation === "vertical" && "top-8 bottom-0 left-4", orientation === "horizontal" && responsive && "@max-md/stepper:top-8 @max-md/stepper:right-auto @max-md/stepper:bottom-0 @max-md/stepper:left-4", className)
+		className: cn("absolute", orientation === "horizontal" && "top-[calc(var(--cui-stepper-indicator-size)/2)] start-[calc(50%_+_var(--cui-stepper-indicator-size)/2)] end-[calc(var(--cui-stepper-indicator-size)/2_-_50%)]", orientation === "vertical" && "top-(--cui-stepper-indicator-size) bottom-0 start-[calc(var(--cui-stepper-indicator-size)/2)]", orientation === "horizontal" && responsive && "@max-md/stepper:top-(--cui-stepper-indicator-size) @max-md/stepper:end-auto @max-md/stepper:bottom-0 @max-md/stepper:start-[calc(var(--cui-stepper-indicator-size)/2)]", className)
 	});
 }
 function StepperTitle({ className, ...props }) {
 	const { orientation, responsive } = useStepper();
 	const { titleId } = useStepperItem();
+	useRegisteredId(titleId);
 	return /* @__PURE__ */ jsx("span", {
 		...props,
 		id: titleId,
@@ -203,8 +246,11 @@ function StepperTitle({ className, ...props }) {
 }
 function StepperDescription({ className, ...props }) {
 	const { orientation, responsive } = useStepper();
+	const { descriptionId } = useStepperItem();
+	useRegisteredId(descriptionId);
 	return /* @__PURE__ */ jsx("span", {
 		...props,
+		id: descriptionId,
 		"data-control-ui": "stepper",
 		"data-control-family": "stepper",
 		"data-slot": "description",
@@ -215,16 +261,19 @@ function StepperContent({ step, keepMounted = true, className, ...props }) {
 	const { value, contentMode, baseId } = useStepper();
 	const active = value === step;
 	const hidden = contentMode === "current" && !active;
-	if (hidden && !keepMounted) return null;
+	const rendered = !hidden || keepMounted;
+	const contentId = stepPartId(baseId, step, "content");
+	useRegisteredId(contentId, rendered);
+	if (!rendered) return null;
 	return /* @__PURE__ */ jsx("section", {
 		...props,
-		id: `${baseId}-step-${step}-content`,
+		id: contentId,
 		"data-control-ui": "stepper",
 		"data-control-family": "stepper",
 		"data-slot": "content",
 		"data-state": active ? "active" : "inactive",
 		hidden,
-		"aria-labelledby": `${baseId}-step-${step}-title`,
+		"aria-labelledby": stepPartId(baseId, step, "title"),
 		className
 	});
 }

package/dist/ui/switch.d.ts

@@ -18,6 +18,7 @@ export type SwitchProps = Omit<{
   "aria-label"?: string;
   "aria-labelledby"?: string;
   "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false";
 }, "style"> & {
   style?: CSSProperties & SwitchKnobStyle;
 };

package/dist/ui/table-of-contents.d.ts

@@ -1,5 +1,5 @@
 import { TableOfContentsKnobStyle } from "../knob-contracts/table-of-contents-knobs.js";
-import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { CSSProperties, ComponentProps, ReactNode, RefObject } from "react";
 //#region src/ui/table-of-contents.d.ts
 export type TocItem = {
   href: string;
@@ -17,6 +17,6 @@ export type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">,
   variant?: TableOfContentsVariant;
   indicator?: ReactNode;
 };
-export declare function useVisibleSections(ids: string[]): string[];
+export declare function useVisibleSections(ids: string[], knobSourceRef: RefObject<HTMLElement | null>): string[];
 export declare function TableOfContents({ items, label, variant, indicator, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
 //#endregion

package/dist/ui/table-of-contents.js

@@ -1,10 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/table-of-contents.tsx
 const tableOfContentsVariants = ["range", "progress"];
-const DETECTION_MARGIN = "-80px 0px -20% 0px";
 function getScrollContainer(el) {
 	let node = el.parentElement;
 	while (node) {
@@ -13,7 +12,7 @@ function getScrollContainer(el) {
 	}
 	return null;
 }
-function useVisibleSections(ids) {
+function useVisibleSections(ids, knobSourceRef) {
 	const [visibleState, setVisibleState] = useState({
 		idsKey: "",
 		visibleIds: []
@@ -23,6 +22,8 @@ function useVisibleSections(ids) {
 		const elements = (idsKey ? idsKey.split("|") : []).map((id) => document.getElementById(id)).filter((el) => el !== null);
 		const firstElement = elements[0];
 		if (!firstElement) return;
+		const knobSource = knobSourceRef.current;
+		const scrollInset = knobSource ? readLengthKnob(getComputedStyle(knobSource), "--cui-table-of-contents-scroll-inset") : 0;
 		const order = new Map(elements.map((el, index) => [el.id, index]));
 		const visible = /* @__PURE__ */ new Set();
 		const observer = new IntersectionObserver((entries) => {
@@ -34,14 +35,21 @@ function useVisibleSections(ids) {
 			});
 		}, {
 			root: getScrollContainer(firstElement),
-			rootMargin: DETECTION_MARGIN,
+			rootMargin: `-${scrollInset}px 0px -20% 0px`,
 			threshold: 0
 		});
 		for (const el of elements) observer.observe(el);
 		return () => observer.disconnect();
-	}, [idsKey]);
+	}, [idsKey, knobSourceRef]);
 	return visibleState.idsKey === idsKey ? visibleState.visibleIds : [];
 }
+function subscribeToHash(onChange) {
+	window.addEventListener("hashchange", onChange);
+	return () => window.removeEventListener("hashchange", onChange);
+}
+function useLocationHash() {
+	return useSyncExternalStore(subscribeToHash, () => window.location.hash, () => "");
+}
 function collectLevels(items, fallbackLevel = 2) {
 	return items.flatMap((item) => {
 		const level = item.level ?? fallbackLevel;
@@ -151,8 +159,10 @@ function TableOfContents({ items, label = "On this page", variant = "range", ind
 	const normalizedItems = normalizeItems(items, Math.min(...collectLevels(items), 2));
 	const flatItems = flattenItems(normalizedItems);
 	const targetIds = flatItems.map((item) => item.href.replace(/^#/, ""));
-	const activeItems = findActiveItems(useVisibleSections(targetIds), flatItems, targetIds);
+	const activeItems = findActiveItems(useVisibleSections(targetIds, trackRef), flatItems, targetIds);
 	const activeHrefs = new Set(activeItems.map((item) => item.href));
+	const locationHash = useLocationHash();
+	const currentHref = activeHrefs.has(locationHash) ? locationHash : activeItems[0]?.href;
 	const rail = useRailGeometry(trackRef, itemElements);
 	const hasActiveSection = activeItems.length > 0;
 	if (items.length === 0) return null;
@@ -197,6 +207,7 @@ function TableOfContents({ items, label = "On this page", variant = "range", ind
 				/* @__PURE__ */ jsx(TocList, {
 					items: normalizedItems,
 					activeHrefs,
+					currentHref,
 					itemElements,
 					root: true
 				}),
@@ -214,7 +225,7 @@ function TableOfContents({ items, label = "On this page", variant = "range", ind
 		})]
 	});
 }
-function TocList({ items, activeHrefs, itemElements, root = false }) {
+function TocList({ items, activeHrefs, currentHref, itemElements, root = false }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-control-ui": "table-of-contents",
 		"data-control-family": "table-of-contents",
@@ -237,7 +248,7 @@ function TocList({ items, activeHrefs, itemElements, root = false }) {
 				"data-active": isActive || void 0,
 				"data-level": item.level,
 				"data-depth": item.depth,
-				"aria-current": isActive ? "location" : void 0,
+				"aria-current": item.href === currentHref ? "location" : void 0,
 				href: item.href,
 				className: "block",
 				style: itemStyle,
@@ -245,6 +256,7 @@ function TocList({ items, activeHrefs, itemElements, root = false }) {
 			}), item.children && /* @__PURE__ */ jsx(TocList, {
 				items: item.children,
 				activeHrefs,
+				currentHref,
 				itemElements
 			})] }, item.href);
 		})

package/dist/ui/table.js

@@ -10,6 +10,8 @@ function Table({ className, ...props }) {
 		className: "relative w-full",
 		children: /* @__PURE__ */ jsx(ScrollArea, {
 			lockAxis: "y",
+			"aria-label": props["aria-label"],
+			"aria-labelledby": props["aria-labelledby"],
 			children: /* @__PURE__ */ jsx("table", {
 				"data-control-ui": "table",
 				"data-control-family": "table",
@@ -61,7 +63,7 @@ function TableHead({ className, ...props }) {
 		"data-control-ui": "table",
 		"data-control-family": "table",
 		"data-slot": "head",
-		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pr-0", className),
+		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pe-0", className),
 		...props
 	});
 }
@@ -70,7 +72,7 @@ function TableCell({ className, ...props }) {
 		"data-control-ui": "table",
 		"data-control-family": "table",
 		"data-slot": "cell",
-		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pr-0", className),
+		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pe-0", className),
 		...props
 	});
 }

package/dist/ui/textarea.d.ts

@@ -4,5 +4,5 @@ import { CSSProperties, ComponentProps } from "react";
 export type TextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-export declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function Textarea({ ref, id, name, value, defaultValue, disabled, autoFocus, className, ...props }: TextareaProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/textarea.js

@@ -1,15 +1,26 @@
+"use client";
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
 //#region src/ui/textarea.tsx
-function Textarea({ className, ...props }) {
-	return /* @__PURE__ */ jsx("textarea", {
-		"data-control-ui": "textarea",
-		"data-field-kind": "textarea",
-		"data-slot": "root",
-		"data-control-family": "field",
-		"data-control": "true",
-		className: cn("field-sizing-content w-full min-w-0 resize-none", className),
-		...props
+function Textarea({ ref, id, name, value, defaultValue, disabled, autoFocus, className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		id,
+		name,
+		value,
+		defaultValue,
+		disabled,
+		autoFocus,
+		render: /* @__PURE__ */ jsx("textarea", {
+			...props,
+			"data-control-ui": "textarea",
+			"data-field-kind": "textarea",
+			"data-slot": "root",
+			"data-control-family": "field",
+			"data-control": "true",
+			className: cn("field-sizing-content w-full min-w-0 resize-none", className)
+		})
 	});
 }
 //#endregion

package/dist/ui/timeline.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { TimelineKnobStyle } from "../knob-contracts/timeline-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/timeline.d.ts
@@ -20,6 +21,7 @@ export type TimelineContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
 export type TimelineTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & TimelineKnobStyle;
 };
 export type TimelineDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
@@ -33,7 +35,7 @@ export declare function TimelineItem({ state, className, ...props }: TimelineIte
 export declare function TimelineIndicator({ className, ...props }: TimelineIndicatorProps): import("react").JSX.Element;
 export declare function TimelineSeparator({ className, ...props }: TimelineSeparatorProps): import("react").JSX.Element;
 export declare function TimelineContent({ className, ...props }: TimelineContentProps): import("react").JSX.Element;
-export declare function TimelineTitle({ className, ...props }: TimelineTitleProps): import("react").JSX.Element;
+export declare function TimelineTitle({ render, className, ...props }: TimelineTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function TimelineDescription({ className, ...props }: TimelineDescriptionProps): import("react").JSX.Element;
 export declare function TimelineMeta({ className, ...props }: TimelineMetaProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/timeline.js

@@ -1,4 +1,6 @@
+"use client";
 import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/timeline.tsx
 function Timeline({ className, ...props }) {
@@ -16,13 +18,15 @@ function TimelineItem({ state = "neutral", className, ...props }) {
 		"data-control-family": "timeline",
 		"data-slot": "item",
 		"data-state": state,
+		"aria-current": state === "running" ? "step" : void 0,
 		...props,
 		className: cn("group/timeline-item relative grid min-w-0 grid-cols-[1rem_minmax(0,1fr)]", className)
 	});
 }
 function TimelineIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": "true",
+		role: props["aria-label"] ? "img" : void 0,
+		"aria-hidden": props["aria-label"] ? void 0 : true,
 		"data-control-ui": "timeline",
 		"data-control-family": "timeline",
 		"data-slot": "indicator",
@@ -37,7 +41,7 @@ function TimelineSeparator({ className, ...props }) {
 		"data-control-family": "timeline",
 		"data-slot": "separator",
 		...props,
-		className: cn("absolute top-5 bottom-0 left-[calc(0.5rem-0.5px)] col-start-1 w-px group-last/timeline-item:hidden", className)
+		className: cn("absolute top-5 bottom-0 start-[calc(0.5rem-0.5px)] col-start-1 w-px group-last/timeline-item:hidden", className)
 	});
 }
 function TimelineContent({ className, ...props }) {
@@ -49,13 +53,17 @@ function TimelineContent({ className, ...props }) {
 		className: cn("col-start-2 row-start-1 grid min-w-0", className)
 	});
 }
-function TimelineTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "timeline",
-		"data-control-family": "timeline",
-		"data-slot": "title",
-		...props,
-		className: cn("min-w-0", className)
+function TimelineTitle({ render, className, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "timeline",
+			"data-control-family": "timeline",
+			"data-slot": "title",
+			className: cn("min-w-0", className)
+		}
 	});
 }
 function TimelineDescription({ className, ...props }) {

package/dist/ui/toast.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from "./button.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ReactNode } from "react";
-import { Toast } from "@base-ui/react/toast";
+import { Toast, ToastManagerAddOptions, ToastManagerPromiseOptions } from "@base-ui/react/toast";
 //#region src/ui/toast.d.ts
 export type ToasterProps = {
   className?: string;
@@ -11,18 +11,24 @@ export type ToasterProps = {
   indicatorStyle?: CSSProperties & PopupKnobStyle;
   actionStyle?: ButtonProps["style"];
   closeStyle?: ButtonProps["style"];
+  closeLabel?: string;
+  successLabel?: string;
+  errorLabel?: string;
+  warningLabel?: string;
+  infoLabel?: string;
 };
 export declare const toastManager: import("@base-ui/react").ToastManager<any>;
-type ToastOptions = Omit<Parameters<typeof toastManager.add>[0], "title">;
-export declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
+type ToastOptions = Omit<ToastManagerAddOptions<object>, "title">;
+declare function show(title: ReactNode, options?: ToastOptions): string;
+export declare const toast: typeof show & {
   success: (title: ReactNode, options?: ToastOptions) => string;
   error: (title: ReactNode, options?: ToastOptions) => string;
   warning: (title: ReactNode, options?: ToastOptions) => string;
   info: (title: ReactNode, options?: ToastOptions) => string;
   message: (title: ReactNode, options?: ToastOptions) => string;
-  promise: (...args: Parameters<typeof toastManager.promise>) => Promise<unknown>;
+  promise: <Value>(promise: Promise<Value>, options: ToastManagerPromiseOptions<Value, object>) => Promise<Value>;
   dismiss: (id?: string) => void;
 };
 export declare const useToast: typeof Toast.useToastManager;
-export declare function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }: ToasterProps): import("react").JSX.Element;
+export declare function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle, closeLabel, successLabel, errorLabel, warningLabel, infoLabel }: ToasterProps): import("react").JSX.Element;
 //#endregion