@ctrl-ui/react 0.8.6 → 0.8.8

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 { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -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 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 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]" : "end-0 group-data-[collapsible=offcanvas]:end-[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),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "sidebar",
 				"data-control-family": "sidebar",
@@ -91,11 +92,12 @@ function SidebarSurface({ variant, ref, className, children, style, railContaine
 				side,
 				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 +138,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 +155,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 +202,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 +256,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 +268,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 } from "react";
+import { CSSProperties, ComponentProps, ReactNode, RefObject } from "react";
 //#region src/ui/table-of-contents.d.ts
 export type TocItem = {
   href: string;
@@ -7,7 +7,7 @@ export type TocItem = {
   level?: number;
   children?: TocItem[];
 };
-export declare const tableOfContentsVariants: readonly ["background", "trail", "both"];
+export declare const tableOfContentsVariants: readonly ["range", "progress"];
 export type TableOfContentsVariant = (typeof tableOfContentsVariants)[number];
 export type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">, "style"> & {
   style?: CSSProperties & TableOfContentsKnobStyle;
@@ -15,7 +15,8 @@ export type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">,
   items: TocItem[];
   label?: string;
   variant?: TableOfContentsVariant;
+  indicator?: ReactNode;
 };
-export declare function useVisibleSections(ids: string[]): string[];
-export declare function TableOfContents({ items, label, variant, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
+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