@ctrl-ui/react 0.8.7 → 0.8.9

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,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/timeline.tsx
 function Timeline({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {
@@ -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

package/dist/ui/toast.js

@@ -3,36 +3,104 @@ import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
+import { PopupCloseButton } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon } from "lucide-react";
 import { Toast } from "@base-ui/react/toast";
 //#region src/ui/toast.tsx
 const toastManager = Toast.createToastManager();
-function withType(type) {
-	return (title, options) => toastManager.add({
+const errorDefaults = {
+	timeout: 0,
+	priority: "high"
+};
+function persistenceDefaults(options) {
+	if (options.type === "error") return errorDefaults;
+	return options.actionProps ? { timeout: 0 } : void 0;
+}
+function show(title, options = {}) {
+	return toastManager.add({
 		title,
+		...persistenceDefaults(options),
+		...options
+	});
+}
+function withType(type) {
+	return (title, options) => show(title, {
 		type,
 		...options
 	});
 }
-const toast = Object.assign((title, options) => toastManager.add({
-	title,
-	...options
-}), {
+function persistentError(update) {
+	return typeof update === "string" ? {
+		...errorDefaults,
+		description: update
+	} : {
+		...errorDefaults,
+		...update
+	};
+}
+const toast = Object.assign(show, {
 	success: withType("success"),
 	error: withType("error"),
 	warning: withType("warning"),
 	info: withType("info"),
-	message: (title, options) => toastManager.add({
-		title,
-		...options
+	message: (title, options) => show(title, options),
+	promise: (promise, options) => toastManager.promise(promise, {
+		...options,
+		error: (reason) => persistentError(typeof options.error === "function" ? options.error(reason) : options.error)
 	}),
-	promise: (...args) => toastManager.promise(...args),
 	dismiss: (id) => toastManager.close(id)
 });
+const statusIcons = {
+	success: CircleCheckIcon,
+	error: CircleXIcon,
+	warning: TriangleAlertIcon,
+	info: InfoIcon
+};
+function isToastStatus(type) {
+	return type !== void 0 && Object.hasOwn(statusIcons, type);
+}
 const useToast = Toast.useToastManager;
-function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+function ToastIndicator({ status, style }) {
+	if (!status) return null;
+	const StatusIcon = statusIcons[status];
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "toast",
+		"data-control-family": "popup",
+		"data-popup-kind": "toast",
+		"data-slot": "indicator",
+		style,
+		className: "shrink-0",
+		children: /* @__PURE__ */ jsx(StatusIcon, { className: "size-4" })
+	});
+}
+function ToastText({ entry, statusPrefix }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col",
+		children: [entry.title ? /* @__PURE__ */ jsxs(Toast.Title, {
+			"data-control-ui": "toast",
+			"data-control-family": "popup",
+			"data-popup-kind": "toast",
+			"data-slot": "title",
+			children: [statusPrefix, entry.title]
+		}) : null, entry.description ? /* @__PURE__ */ jsxs(Toast.Description, {
+			"data-control-ui": "toast",
+			"data-control-family": "popup",
+			"data-popup-kind": "toast",
+			"data-slot": "description",
+			children: [entry.title ? null : statusPrefix, entry.description]
+		}) : null]
+	});
+}
+function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle, closeLabel, statusLabels }) {
 	const { toasts } = Toast.useToastManager();
 	return toasts.map((entry) => {
+		const status = isToastStatus(entry.type) ? entry.type : void 0;
+		const statusPrefix = status ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: `${statusLabels[status]}: `
+		}) : null;
 		return /* @__PURE__ */ jsx(Toast.Root, {
 			toast: entry,
 			"data-control-ui": "toast",
@@ -43,7 +111,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 			style: rootStyle,
 			"data-slot": "root",
 			"data-surface": "floating",
-			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(var(--z-toast)-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
+			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute end-0 bottom-0 z-[calc(var(--z-toast)-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:start-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
 			children: /* @__PURE__ */ jsxs(Toast.Content, {
 				"data-control-ui": "toast",
 				"data-control-family": "popup",
@@ -51,28 +119,13 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 				"data-slot": "content",
 				className: "flex items-start",
 				children: [
-					entry.type && entry.type !== "message" ? /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						"data-control-ui": "toast",
-						"data-control-family": "popup",
-						"data-popup-kind": "toast",
-						"data-slot": "indicator",
-						style: indicatorStyle,
-						className: "shrink-0"
-					}) : null,
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex min-w-0 flex-1 flex-col",
-						children: [entry.title ? /* @__PURE__ */ jsx(Toast.Title, {
-							"data-control-ui": "toast",
-							"data-control-family": "popup",
-							"data-popup-kind": "toast",
-							"data-slot": "title"
-						}) : null, entry.description ? /* @__PURE__ */ jsx(Toast.Description, {
-							"data-control-ui": "toast",
-							"data-control-family": "popup",
-							"data-popup-kind": "toast",
-							"data-slot": "description"
-						}) : null]
+					/* @__PURE__ */ jsx(ToastIndicator, {
+						status,
+						style: indicatorStyle
+					}),
+					/* @__PURE__ */ jsx(ToastText, {
+						entry,
+						statusPrefix
 					}),
 					entry.actionProps ? /* @__PURE__ */ jsx(Toast.Action, {
 						style: actionStyle,
@@ -86,25 +139,11 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 					}) : null,
 					/* @__PURE__ */ jsx(Toast.Close, {
 						style: closeStyle,
-						"aria-label": "Close",
-						render: (renderProps) => /* @__PURE__ */ jsx(Button, {
+						render: (renderProps) => /* @__PURE__ */ jsx(PopupCloseButton, {
 							...renderProps,
 							"data-popup-kind": "toast",
-							"data-popup-part": "close",
-							variant: "quiet",
-							size: "xs",
-							iconOnly: true
-						}),
-						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"
-							})
+							label: closeLabel,
+							variant: "quiet"
 						})
 					})
 				]
@@ -112,7 +151,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 		}, entry.id);
 	});
 }
-function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle, closeLabel = "Dismiss notification", successLabel = "Success", errorLabel = "Error", warningLabel = "Warning", infoLabel = "Info" }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Toast.Provider, {
 		toastManager,
@@ -125,12 +164,19 @@ function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionS
 			"data-slot": "viewport",
 			"data-skin": skin.id,
 			"data-effects": controlEffectsAttribute(skin.effects),
-			className: cn("fixed right-4 bottom-4 z-(--z-toast) mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-[22.5rem]", className),
+			className: cn("fixed end-4 bottom-4 z-(--z-toast) mx-auto w-[calc(100vw-2rem)] sm:end-6 sm:bottom-6 sm:w-[22.5rem]", className),
 			children: /* @__PURE__ */ jsx(ToastList, {
 				rootStyle,
 				indicatorStyle,
 				actionStyle,
-				closeStyle
+				closeStyle,
+				closeLabel,
+				statusLabels: {
+					success: successLabel,
+					error: errorLabel,
+					warning: warningLabel,
+					info: infoLabel
+				}
 			})
 		}) })
 	});

package/dist/ui/toolbar.d.ts

@@ -15,6 +15,7 @@ export type ToolbarButtonProps = Omit<ComponentProps<"button">, "style"> & {
 };
 export type ToolbarLinkProps = Omit<ComponentProps<"a">, "style"> & {
   variant?: ToolbarLinkVariant;
+  active?: boolean;
   style?: CSSProperties & ToolbarKnobStyle;
 };
 export type ToolbarGroupProps = ComponentProps<"div"> & {
@@ -31,7 +32,7 @@ export declare function Toolbar({ orientation, variant, className, children, ...
 type RefinedToolbarButtonProps = ToolbarButtonProps & Pick<ComponentProps<typeof Toolbar$1.Button>, "render">;
 export declare function ToolbarButton({ iconOnly, className, ...props }: RefinedToolbarButtonProps): import("react").JSX.Element;
 type RefinedToolbarLinkProps = ToolbarLinkProps & Pick<ComponentProps<typeof Toolbar$1.Link>, "render">;
-export declare function ToolbarLink({ variant, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
+export declare function ToolbarLink({ variant, active, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
 export declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
 export declare function ToolbarSeparator({ orientation, className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
 type RefinedToolbarInputProps = ToolbarInputProps & Pick<ComponentProps<typeof Toolbar$1.Input>, "render">;

package/dist/ui/toolbar.js

@@ -37,7 +37,7 @@ function ToolbarButton({ iconOnly = false, className, ...props }) {
 		...props
 	});
 }
-function ToolbarLink({ variant = "default", className, ...props }) {
+function ToolbarLink({ variant = "default", active = false, className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar$1.Link, {
 		"data-control-ui": "toolbar",
 		"data-control-family": "toolbar",
@@ -45,6 +45,8 @@ function ToolbarLink({ variant = "default", className, ...props }) {
 		"data-control": "true",
 		"data-size": "sm",
 		"data-variant": variant,
+		"data-active": active || void 0,
+		"aria-current": active ? "page" : void 0,
 		className: cn("inline-flex shrink-0 items-center justify-center [&_svg]:block [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", variant === "track" && "relative z-[2]", className),
 		...props
 	});

package/dist/ui/tooltip.js

@@ -2,6 +2,7 @@
 import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
+import { PopupArrowShape } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/ui/tooltip.tsx
@@ -64,29 +65,11 @@ function TooltipContent({ className, children, side = "top", sideOffset = 8, ali
 				"data-control-family": "popup",
 				"data-popup-kind": "tooltip",
 				"data-slot": "arrow",
-				className: cn("flex", "data-[side=top]:-bottom-[8px]", "data-[side=bottom]:-top-[8px]", "data-[side=left]:-right-[10px]", "data-[side=right]:-left-[10px]"),
-				children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
+				className: "flex",
+				children: /* @__PURE__ */ jsx(PopupArrowShape, {})
 			}) : null]
 		})
 	}) });
 }
-function TooltipArrowSvg() {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		focusable: "false",
-		width: "12",
-		height: "8",
-		viewBox: "0 0 12 8",
-		fill: "none",
-		overflow: "visible",
-		children: /* @__PURE__ */ jsx("path", {
-			"data-control-ui": "tooltip",
-			"data-popup-kind": "tooltip",
-			"data-control-family": "popup",
-			"data-slot": "arrow-shape",
-			d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z"
-		})
-	});
-}
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };