@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/ui/sidebar-provider.js

@@ -1,18 +1,18 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
-import { TooltipProvider } from "./tooltip.js";
 import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
+import { TooltipProvider } from "./tooltip.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
-import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-provider.tsx
 const SIDEBAR_COOKIE_MAX_AGE = 604800;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const SIDEBAR_MOBILE_BREAKPOINT = 1024;
+const SIDEBAR_MOBILE_BREAKPOINT = "--breakpoint-lg";
 const SidebarElementsContext = createContext(null);
 const SidebarSurfaceContext = createContext(null);
 function useSidebarElements() {
@@ -38,7 +38,7 @@ function useSidebar() {
 	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
 	return context;
 }
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, defaultWidth, minWidth = 224, maxWidth = 420, width: widthProp, onWidthChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, ref, className, style, children, ...props }) {
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, defaultWidth, minWidth = 224, maxWidth = 420, width: widthProp, onWidthChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, layout = "viewport", skipLinkLabel = "Skip to content", contentId: contentIdProp, ref, className, style, children, ...props }) {
 	const skin = useSkin();
 	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
 	const [openMobile, setOpenMobile] = useState(false);
@@ -46,12 +46,17 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 	const offcanvasRef = useRef(null);
 	const railRef = useRef(null);
 	const triggerRef = useRef(null);
+	const insetRef = useRef(null);
 	const elements = {
 		wrapperRef,
 		offcanvasRef,
 		railRef,
-		triggerRef
+		triggerRef,
+		insetRef
 	};
+	const sidebarId = useId();
+	const generatedContentId = useId();
+	const contentId = contentIdProp ?? generatedContentId;
 	const [internalWidth, setInternalWidth] = useState(defaultWidth);
 	function clampWidth(nextWidth) {
 		return Math.min(maxWidth, Math.max(minWidth, nextWidth));
@@ -67,7 +72,6 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 	const open = openProp ?? internalOpen;
 	useLayoutEffect(() => {
 		if (!open && !isMobile) focusOutsideCollapsedContent({
-			wrapperRef,
 			offcanvasRef,
 			railRef,
 			triggerRef
@@ -87,11 +91,14 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 	});
 	useEffect(() => {
 		if (keyboardShortcut === null) return;
+		const shortcut = keyboardShortcut.toLowerCase();
 		const handleKeyDown = (event) => {
-			if (event.key === keyboardShortcut && (event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-				toggleRef.current();
-			}
+			if (event.defaultPrevented || event.repeat || event.altKey || event.shiftKey) return;
+			if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== shortcut) return;
+			const target = event.target;
+			if (target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select") !== null)) return;
+			event.preventDefault();
+			toggleRef.current();
 		};
 		window.addEventListener("keydown", handleKeyDown);
 		return () => window.removeEventListener("keydown", handleKeyDown);
@@ -107,7 +114,11 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 		width,
 		setWidth,
 		minWidth,
-		maxWidth
+		maxWidth,
+		layout,
+		keyboardShortcut,
+		sidebarId,
+		contentId
 	};
 	const wrapperStyle = {
 		"--sidebar-width": skin.sidebarWidth ?? SIDEBAR_WIDTH,
@@ -115,6 +126,12 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 		...style,
 		...width === void 0 ? {} : { "--sidebar-width": `${width}px` }
 	};
+	function skipToContent(event) {
+		const inset = insetRef.current;
+		if (!inset) return;
+		event.preventDefault();
+		inset.focus();
+	}
 	const wrapper = useRender({
 		defaultTagName: "div",
 		ref: [ref ?? null, wrapperRef],
@@ -123,9 +140,17 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 			"data-control-ui": "sidebar",
 			"data-control-family": "sidebar",
 			"data-slot": "wrapper",
+			"data-layout": layout,
 			style: wrapperStyle,
-			className: cn("group/sidebar-wrapper flex min-h-svh w-full", className),
-			children
+			className: cn("group/sidebar-wrapper relative flex w-full", layout === "contained" ? "h-full min-h-0 overflow-hidden" : "min-h-svh", className),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("a", {
+				href: `#${contentId}`,
+				"data-control-ui": "sidebar",
+				"data-control-family": "sidebar",
+				"data-slot": "skip-link",
+				onClick: skipToContent,
+				children: skipLinkLabel
+			}), children] })
 		}
 	});
 	return /* @__PURE__ */ jsx(SidebarContext.Provider, {

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

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-resize-rail.tsx
 const DRAG_THRESHOLD_PX = 5;
 const KEYBOARD_STEP_PX = 10;
@@ -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,14 +3,14 @@ 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";
 import { PanelLeftIcon } from "lucide-react";
-import { useRender } from "@base-ui/react/use-render";
 import { createPortal } from "react-dom";
 //#region src/ui/sidebar.tsx
 const SIDEBAR_WIDTH_MOBILE = "18rem";
@@ -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;