@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/ui/sidebar-resize-rail.js

@@ -28,6 +28,9 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 	function clampWidth(nextWidth) {
 		return Math.min(maxWidth, Math.max(minWidth, nextWidth));
 	}
+	function anchoredToLeftEdge(element) {
+		return side === "left" === (getComputedStyle(element).direction !== "rtl");
+	}
 	function handlePointerDown(event) {
 		onPointerDown?.(event);
 		if (event.defaultPrevented || event.button !== 0) return;
@@ -43,6 +46,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 		handle.setPointerCapture(event.pointerId);
 		const pointerId = event.pointerId;
 		const startX = event.clientX;
+		const anchoredLeft = anchoredToLeftEdge(handle);
 		const wrapperBounds = wrapper.getBoundingClientRect();
 		const initialWidth = measure.getBoundingClientRect().width;
 		const previousWidth = wrapper.style.getPropertyValue("--sidebar-width");
@@ -88,7 +92,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 			document.body.style.userSelect = "none";
 			wrapper.setAttribute("data-resizing", "true");
 			handle.setAttribute("data-resizing", "true");
-			const cursorWidth = side === "left" ? pointer.clientX - wrapperBounds.left : wrapperBounds.right - pointer.clientX;
+			const cursorWidth = anchoredLeft ? pointer.clientX - wrapperBounds.left : wrapperBounds.right - pointer.clientX;
 			if (updateCollapse(cursorWidth)) return;
 			draftWidth = clampWidth(cursorWidth);
 			wrapper.style.setProperty("--sidebar-width", `${draftWidth}px`);
@@ -152,7 +156,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 			case "ArrowLeft":
 			case "ArrowRight":
 				event.preventDefault();
-				resizeWithArrow(event.key === (side === "left" ? "ArrowRight" : "ArrowLeft"));
+				resizeWithArrow(event.key === (anchoredToLeftEdge(event.currentTarget) ? "ArrowRight" : "ArrowLeft"));
 				return;
 		}
 	}
@@ -179,7 +183,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 			onPointerDown: handlePointerDown,
 			onClick: handleClick,
 			onKeyDown: handleKeyDown,
-			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-pan-y outline-hidden group-data-[side=left]:-right-1 group-data-[side=right]:-left-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-right-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-left-2 lg:block", className),
+			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-pan-y group-data-[side=left]:-end-1 group-data-[side=right]:-start-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-end-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-start-2 lg:block", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				ref: widthMeasureRef,
 				"aria-hidden": true,

package/dist/ui/sidebar.d.ts

@@ -1,9 +1,10 @@
+import { RenderProp } from "../control-props.js";
 import { Button } from "./button.js";
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
 import { SidebarLayout } from "../skin.js";
-import { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
-import { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
 import { SidebarResizeRailProps } from "./sidebar-resize-rail.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuBadge, SidebarMenuBadgeProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarLayoutMode, SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/sidebar.d.ts
 export type SidebarRailProps = (Omit<ComponentProps<"button">, "style"> & {
@@ -12,7 +13,8 @@ export type SidebarRailProps = (Omit<ComponentProps<"button">, "style"> & {
 }) | (SidebarResizeRailProps & {
   resizable: true;
 });
-export type SidebarInsetProps = Omit<ComponentProps<"main">, "style"> & {
+export type SidebarInsetProps = Omit<ComponentProps<"main">, "style" | "id"> & {
+  render?: RenderProp<ComponentProps<"main">>;
   style?: CSSProperties & SidebarKnobStyle;
 };
 type SidebarSurfaceStyle = CSSProperties & SidebarKnobStyle;
@@ -20,12 +22,15 @@ export type SidebarProps = Omit<ComponentProps<"div">, "style"> & {
   side?: "left" | "right";
   variant?: SidebarLayout;
   collapsible?: "offcanvas" | "icon" | "none";
+  label?: string;
   style?: SidebarSurfaceStyle;
 };
 export declare function Sidebar({ side, collapsible, ...props }: SidebarProps): import("react").JSX.Element;
-export declare function SidebarTrigger({ className, onClick, size, ref, ...props }: ComponentProps<typeof Button>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function SidebarTrigger({ className, onClick, size, label, ref, ...props }: ComponentProps<typeof Button> & {
+  label?: string;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function SidebarRail(props: SidebarRailProps): any;
-export declare function SidebarInset({ className, ...props }: SidebarInsetProps): import("react").JSX.Element;
+export declare function SidebarInset({ className, render, ref, ...props }: SidebarInsetProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function SidebarHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
@@ -34,4 +39,4 @@ export declare function SidebarFooter({ className, ...props }: ComponentProps<"d
 }): import("react").JSX.Element;
 export declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 //#endregion
-export { SidebarGroup, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, type SidebarSelectionIndicator, type SidebarStyle, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { SidebarGroup, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, type SidebarLayoutMode, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, type SidebarSelectionIndicator, type SidebarStyle, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/sidebar.js

@@ -3,10 +3,10 @@ import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./sheet.js";
 import { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
 import { SidebarResizeRail } from "./sidebar-resize-rail.js";
-import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { PanelLeftIcon } from "lucide-react";
@@ -34,22 +34,23 @@ function Sidebar({ side = "left", collapsible = "offcanvas", ...props }) {
 		})
 	});
 }
-function SidebarSurface({ variant, ref, className, children, style, railContainerRef, ...props }) {
+function SidebarSurface({ variant, label = "Navigation", ref, className, children, style, railContainerRef, ...props }) {
 	const { side, collapsible } = useSidebarSurface();
-	const { offcanvasRef } = useSidebarElements();
+	const { offcanvasRef, triggerRef } = useSidebarElements();
 	const skin = useSkin();
-	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	const { isMobile, state, openMobile, setOpenMobile, layout, sidebarId } = useSidebar();
 	const resolvedVariant = variant ?? skin.sidebarLayout ?? "sidebar";
 	const container = useRender({
 		defaultTagName: "div",
 		ref: collapsible === "offcanvas" ? [ref ?? null, offcanvasRef] : ref,
 		props: {
+			id: sidebarId,
 			...props,
 			"data-control-ui": "sidebar",
 			"data-control-family": "sidebar",
 			"data-slot": "container",
 			tabIndex: -1,
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) lg:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", resolvedVariant === "floating" || resolvedVariant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
+			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) lg:flex", side === "left" ? "start-0" : "end-0", resolvedVariant === "floating" || resolvedVariant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "sidebar",
 				"data-control-family": "sidebar",
@@ -89,13 +90,15 @@ function SidebarSurface({ variant, ref, className, children, style, railContaine
 			onOpenChange: setOpenMobile,
 			children: /* @__PURE__ */ jsxs(SheetContent, {
 				side,
+				finalFocus: triggerRef,
 				className: "w-(--sidebar-width) gap-0 p-0",
 				style: mobileSheetStyle,
-				children: [/* @__PURE__ */ jsxs(SheetHeader, {
+				children: [/* @__PURE__ */ jsx(SheetHeader, {
 					className: "sr-only",
-					children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
+					children: /* @__PURE__ */ jsx(SheetTitle, { children: label })
 				}), /* @__PURE__ */ jsx("div", {
 					ref,
+					id: sidebarId,
 					"data-control-ui": "sidebar",
 					"data-control-family": "sidebar",
 					"data-slot": "root",
@@ -136,9 +139,10 @@ function SidebarSurface({ variant, ref, className, children, style, railContaine
 		}), container]
 	});
 }
-function SidebarTrigger({ className, onClick, size = "sm", ref, ...props }) {
-	const { toggleSidebar, isMobile, openMobile, open } = useSidebar();
+function SidebarTrigger({ className, onClick, size = "sm", label = "Toggle sidebar", ref, ...props }) {
+	const { toggleSidebar, isMobile, openMobile, open, keyboardShortcut, sidebarId } = useSidebar();
 	const { triggerRef, railRef } = useSidebarElements();
+	const shortcutKey = keyboardShortcut?.toUpperCase();
 	return useRender({
 		defaultTagName: "button",
 		render: /* @__PURE__ */ jsx(Button, {
@@ -152,16 +156,26 @@ function SidebarTrigger({ className, onClick, size = "sm", ref, ...props }) {
 			"data-slot": "trigger",
 			"data-sidebar-trigger": "",
 			"aria-expanded": isMobile ? openMobile : open,
+			"aria-controls": isMobile && !openMobile ? void 0 : sidebarId,
+			"aria-keyshortcuts": shortcutKey ? `Meta+${shortcutKey} Control+${shortcutKey}` : void 0,
 			className: cn(sidebarTriggerWidth[size], "px-0", className),
 			onClick: (event) => {
 				onClick?.(event);
 				if (event.defaultPrevented) return;
 				toggleSidebar();
-				if (!isMobile && !open) railRef.current?.focus({ preventScroll: true });
+				if (isMobile || open) return;
+				const trigger = event.currentTarget;
+				requestAnimationFrame(() => {
+					if (!trigger.checkVisibility()) railRef.current?.focus({ preventScroll: true });
+				});
 			},
-			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PanelLeftIcon, {
+				className: "size-4",
+				"data-icon-dir": "inline",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
-				children: "Toggle Sidebar"
+				children: label
 			})] })
 		}
 	});
@@ -189,25 +203,34 @@ function SidebarToggleRail({ className, ref, onClick, ...props }) {
 			"data-control-ui": "sidebar",
 			"data-control-family": "sidebar",
 			"data-slot": "rail",
-			"aria-label": props["aria-label"] ?? "Toggle Sidebar",
+			"aria-label": props["aria-label"] ?? "Toggle sidebar",
 			"aria-expanded": open,
 			tabIndex: -1,
 			onClick: (event) => {
 				onClick?.(event);
 				if (!event.defaultPrevented) toggleSidebar();
 			},
-			title: "Toggle Sidebar",
-			className: cn("absolute inset-y-0 z-20 hidden -translate-x-1/2 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 lg:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", className)
+			title: props.title ?? "Toggle sidebar",
+			className: cn("absolute inset-y-0 z-20 hidden -translate-x-1/2 rtl:translate-x-1/2 group-data-[side=left]:-end-4 group-data-[side=right]:start-0 lg:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", className)
 		}
 	});
 }
-function SidebarInset({ className, ...props }) {
-	return /* @__PURE__ */ jsx("main", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "inset",
-		className: cn("relative flex min-w-0 w-full flex-1 flex-col", className),
-		...props
+function SidebarInset({ className, render, ref, ...props }) {
+	const { layout, contentId } = useSidebar();
+	const { insetRef } = useSidebarElements();
+	return useRender({
+		defaultTagName: layout === "contained" ? "div" : "main",
+		render,
+		ref: [ref ?? null, insetRef],
+		props: {
+			tabIndex: -1,
+			...props,
+			id: contentId,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "inset",
+			className: cn("relative flex min-w-0 w-full flex-1 flex-col", className)
+		}
 	});
 }
 function SidebarHeader({ className, ...props }) {
@@ -234,6 +257,7 @@ function SidebarContent({ className, children, ...props }) {
 		"data-slot": "content",
 		className: cn("min-h-0 flex-1 group-data-[collapsible=icon]:overflow-hidden", className),
 		lockAxis: "x",
+		viewportClassName: "overscroll-contain",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-control-ui": "sidebar",
@@ -245,4 +269,4 @@ function SidebarContent({ className, children, ...props }) {
 	});
 }
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/slider.js

@@ -12,10 +12,10 @@ function tickPositions(min, max, step) {
 	if (stepCount <= 1 || stepCount > MAX_VISIBLE_STEP_TICKS) return [];
 	return Array.from({ length: stepCount - 1 }, (_, i) => (i + 1) / stepCount * 100);
 }
-function displaySliderValue(values, formatValue) {
+function displaySliderValue(formattedValues, values, formatValue) {
 	const value = values[0];
 	if (value === void 0) return "";
-	return formatValue ? formatValue(value) : Math.round(value);
+	return formatValue ? formatValue(value) : formattedValues[0] ?? "";
 }
 function Slider({ className, variant = "default", label, showValue, formatValue, value, defaultValue, onValueChange, onValueCommitted, orientation = "horizontal", min = 0, max = 100, step, disabled, style, "aria-label": ariaLabel, ...props }) {
 	const showValueResolved = showValue ?? Boolean(label);
@@ -78,38 +78,47 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 						}
 					}, pct)),
 					/* @__PURE__ */ jsx(Slider$1.Thumb, {
-						"aria-label": ariaLabel,
+						"aria-label": ariaLabel ?? (labeled ? void 0 : label),
+						getAriaValueText: formatValue ? (_, thumbValue) => formatValue(thumbValue) : void 0,
 						"data-control-ui": "slider",
 						"data-control-family": "range",
 						"data-range-kind": "slider",
 						"data-slot": "thumb",
 						"data-variant": variant,
-						className: cn("block", variant === "plain" && "after:absolute after:-inset-3 after:content-['']"),
+						"data-focus-ring": "within",
+						className: "block",
 						style
 					})
 				]
 			})
-		}), labeled && /* @__PURE__ */ jsxs("div", {
+		}), labeled && /* @__PURE__ */ jsx(SliderLabelOverlay, {
+			label,
+			showValue: showValueResolved,
+			formatValue
+		})]
+	});
+}
+function SliderLabelOverlay({ label, showValue, formatValue }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "slider",
+		"data-control-family": "range",
+		"data-range-kind": "slider",
+		"data-slot": "label-overlay",
+		className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-between",
+		children: [label ? /* @__PURE__ */ jsx(Slider$1.Label, {
 			"data-control-ui": "slider",
 			"data-control-family": "range",
 			"data-range-kind": "slider",
-			"data-slot": "label-overlay",
-			className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-between",
-			children: [label ? /* @__PURE__ */ jsx(Slider$1.Label, {
-				"data-control-ui": "slider",
-				"data-control-family": "range",
-				"data-range-kind": "slider",
-				"data-slot": "label",
-				className: "select-none",
-				children: label
-			}) : /* @__PURE__ */ jsx("span", {}), showValueResolved && /* @__PURE__ */ jsx(Slider$1.Value, {
-				"data-control-ui": "slider",
-				"data-control-family": "range",
-				"data-range-kind": "slider",
-				"data-slot": "value",
-				className: "select-none",
-				children: (_, values) => displaySliderValue(values, formatValue)
-			})]
+			"data-slot": "label",
+			className: "select-none",
+			children: label
+		}) : /* @__PURE__ */ jsx("span", {}), showValue && /* @__PURE__ */ jsx(Slider$1.Value, {
+			"data-control-ui": "slider",
+			"data-control-family": "range",
+			"data-range-kind": "slider",
+			"data-slot": "value",
+			className: "select-none",
+			children: (formattedValues, values) => displaySliderValue(formattedValues, values, formatValue)
 		})]
 	});
 }

package/dist/ui/spinner.d.ts

@@ -4,8 +4,9 @@ import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/spinner.d.ts
 export type SpinnerProps = Omit<ComponentProps<"span"> & {
   size?: ControlSize;
-}, "style"> & {
+  label?: string;
+}, "style" | "children"> & {
   style?: CSSProperties & SpinnerKnobStyle;
 };
-export declare function Spinner({ size, className, ...props }: SpinnerProps): import("react").JSX.Element;
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/spinner.js

@@ -2,12 +2,13 @@ import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
 //#region src/ui/spinner.tsx
-function Spinner({ size = "sm", className, ...props }) {
+function Spinner({ size = "sm", label = "Loading", className, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
 		role: "status",
 		"data-control-ui": "spinner",
 		"data-control-family": "spinner",
 		"data-slot": "root",
+		"data-motion-essential": "",
 		className: cn("inline-flex", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Loader2, {
@@ -18,7 +19,7 @@ function Spinner({ size = "sm", className, ...props }) {
 			"data-size": size
 		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "Loading"
+			children: label
 		})]
 	});
 }

package/dist/ui/stepper.d.ts

@@ -4,6 +4,12 @@ import { CSSProperties, ComponentProps } from "react";
 export type StepperOrientation = "horizontal" | "vertical";
 export type StepperContentMode = "current" | "all";
 export type StepperState = "neutral" | "complete" | "current" | "upcoming";
+export type StepperStatusDetails = {
+  step: number;
+  state: StepperState;
+  invalid: boolean;
+  disabled: boolean;
+};
 export type StepperProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
   value?: number | null;
   defaultValue?: number | null;
@@ -11,6 +17,7 @@ export type StepperProps = Omit<ComponentProps<"div">, "defaultValue" | "onChang
   orientation?: StepperOrientation;
   contentMode?: StepperContentMode;
   responsive?: boolean;
+  getStatusLabel?: (details: StepperStatusDetails) => string;
 } & {
   style?: CSSProperties & StepperKnobStyle;
 };
@@ -45,7 +52,7 @@ export type StepperContentProps = ComponentProps<"section"> & {
 } & {
   style?: CSSProperties & StepperKnobStyle;
 };
-export declare function Stepper({ value, defaultValue, onValueChange, orientation, contentMode, responsive, id, className, children, ...props }: StepperProps): import("react").JSX.Element;
+export declare function Stepper({ value, defaultValue, onValueChange, orientation, contentMode, responsive, getStatusLabel, id, className, children, ...props }: StepperProps): import("react").JSX.Element;
 export declare function StepperList({ className, ...props }: StepperListProps): import("react").JSX.Element;
 export declare function StepperItem({ step, disabled, invalid, className, children, ...props }: StepperItemProps): import("react").JSX.Element;
 export declare function StepperTrigger({ disabled: disabledProp, className, onClick, type, ...props }: StepperTriggerProps): import("react").JSX.Element;

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