@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/ui/rich-tooltip.js

@@ -2,10 +2,12 @@
 import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
+import { prefersReducedMotion } from "../lib/motion.js";
+import { PopupArrowShape } from "../popup-parts.js";
 import { stepAfter, stepBefore, tourPosition } from "./rich-tooltip-tour.js";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
 import { Popover } from "@base-ui/react/popover";
 //#region src/ui/rich-tooltip.tsx
 const TourContext = createContext(null);
@@ -66,11 +68,14 @@ function useRichTooltipContext() {
 	if (!context) throw new Error("RichTooltip parts must be rendered inside <RichTooltip>.");
 	return context;
 }
-function RichTooltip({ step, tone = "accent", storageKey, dismissOnOutsidePress = false, trapFocus = false, open, defaultOpen = true, onOpenChange, children, ...props }) {
+function RichTooltip({ step, tone = "accent", storageKey, dismissOnOutsidePress = false, dismissOnFocusOut = false, trapFocus = false, open, defaultOpen = true, onOpenChange, children, ...props }) {
 	const tour = useTour();
 	const inTour = tour !== null && step !== void 0;
 	const [standaloneOpen, setStandaloneOpen] = useState(defaultOpen);
 	const standaloneAllowed = useSeenGate(storageKey, open === void 0 && !inTour);
+	const nextRef = useRef(null);
+	const [descriptionId, setDescriptionId] = useState();
+	const [progressId, setProgressId] = useState();
 	const resolvedOpen = open ?? (inTour ? tour.activeStep === step : standaloneOpen && standaloneAllowed);
 	function dismiss() {
 		if (inTour) {
@@ -82,12 +87,19 @@ function RichTooltip({ step, tone = "accent", storageKey, dismissOnOutsidePress
 	}
 	const handleOpenChange = (nextOpen, details) => {
 		if (!dismissOnOutsidePress && details.reason === "outside-press") return;
+		if (!dismissOnFocusOut && details.reason === "focus-out") return;
 		onOpenChange?.(nextOpen, details);
 		if (!nextOpen) dismiss();
 	};
 	const context = {
 		tone,
-		dismiss
+		inTour,
+		dismiss,
+		nextRef,
+		descriptionId,
+		setDescriptionId,
+		progressId,
+		setProgressId
 	};
 	return /* @__PURE__ */ jsx(RichTooltipContext.Provider, {
 		value: context,
@@ -122,11 +134,10 @@ function useAnchorScroll(anchor, open, enabled) {
 		if (!(open && enabled)) return;
 		const element = resolveAnchorElement(anchor);
 		if (!element) return;
-		const reduced = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
 		element.scrollIntoView({
 			block: "center",
 			inline: "nearest",
-			behavior: reduced ? "auto" : "smooth"
+			behavior: prefersReducedMotion(element) ? "auto" : "smooth"
 		});
 	}, [
 		anchor,
@@ -134,11 +145,20 @@ function useAnchorScroll(anchor, open, enabled) {
 		open
 	]);
 }
+const richTooltipContentSelector = "[data-control-ui=\"rich-tooltip\"][data-slot=\"content\"]";
 function RichTooltipContent({ className, children, side = "bottom", align = "center", sideOffset = 10, anchor, collisionPadding = 12, arrow = true, scrollAnchorIntoView = true, ...props }) {
 	const skin = useSkin();
-	const { tone } = useRichTooltipContext();
+	const { tone, inTour, nextRef, descriptionId, progressId } = useRichTooltipContext();
 	const isSurface = tone === "surface";
 	useAnchorScroll(anchor, true, scrollAnchorIntoView);
+	const describedBy = [descriptionId, progressId].filter(Boolean).join(" ") || void 0;
+	const initialFocus = (openType) => {
+		const active = document.activeElement;
+		const openedWithoutInteraction = !openType;
+		const focusIsElsewhere = active !== null && active !== document.body && active.closest(richTooltipContentSelector) === null;
+		if (openedWithoutInteraction && focusIsElsewhere) return false;
+		return inTour && nextRef.current ? nextRef.current : true;
+	};
 	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 		"data-control-ui": "rich-tooltip",
 		"data-popup-kind": "rich-tooltip",
@@ -161,6 +181,8 @@ function RichTooltipContent({ className, children, side = "bottom", align = "cen
 			"data-surface": isSurface ? "floating" : void 0,
 			"data-popup-part": isSurface ? "surface" : void 0,
 			className: cn("relative grid w-80 max-w-[calc(100vw-2rem)]", className),
+			initialFocus,
+			"aria-describedby": describedBy,
 			...props,
 			children: [children, arrow ? /* @__PURE__ */ jsx(Popover.Arrow, {
 				"data-control-ui": "rich-tooltip",
@@ -168,24 +190,12 @@ function RichTooltipContent({ className, children, side = "bottom", align = "cen
 				"data-control-family": "popup",
 				"data-slot": "arrow",
 				"data-tone": tone,
-				className: cn("flex", "data-[side=top]:-bottom-[8px]", "data-[side=bottom]:-top-[8px]", "data-[side=left]:-right-[10px]", "data-[side=right]:-left-[10px]"),
-				children: /* @__PURE__ */ jsx(RichTooltipArrowSvg, {})
+				className: "flex",
+				children: /* @__PURE__ */ jsx(PopupArrowShape, {})
 			}) : null]
 		})
 	}) });
 }
-function RichTooltipArrowSvg() {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		focusable: "false",
-		width: "12",
-		height: "8",
-		viewBox: "0 0 12 8",
-		fill: "none",
-		overflow: "visible",
-		children: /* @__PURE__ */ jsx("path", { d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z" })
-	});
-}
 function RichTooltipMedia({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "rich-tooltip",
@@ -217,8 +227,15 @@ function RichTooltipTitle({ className, ...props }) {
 	});
 }
 function RichTooltipDescription({ className, ...props }) {
-	const { tone } = useRichTooltipContext();
+	const { tone, setDescriptionId } = useRichTooltipContext();
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	useEffect(() => {
+		setDescriptionId(id);
+		return () => setDescriptionId(void 0);
+	}, [id, setDescriptionId]);
 	return /* @__PURE__ */ jsx(Popover.Description, {
+		id,
 		"data-control-ui": "rich-tooltip",
 		"data-control-family": "popup",
 		"data-popup-kind": "rich-tooltip",
@@ -239,9 +256,20 @@ function RichTooltipFooter({ className, ...props }) {
 	});
 }
 function RichTooltipProgress({ className, variant = "count", children, ...props }) {
-	const { tone } = useRichTooltipContext();
+	const { tone, setProgressId } = useRichTooltipContext();
 	const tour = useTour();
-	if (!tour || tour.total < 2 || tour.index < 0) return null;
+	const statusId = useId();
+	const rendered = tour !== null && tour.total >= 2 && tour.index >= 0;
+	useEffect(() => {
+		if (!rendered) return;
+		setProgressId(statusId);
+		return () => setProgressId(void 0);
+	}, [
+		rendered,
+		statusId,
+		setProgressId
+	]);
+	if (!tour || !rendered) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "rich-tooltip",
 		"data-control-family": "popup",
@@ -252,6 +280,7 @@ function RichTooltipProgress({ className, variant = "count", children, ...props
 		className: cn("flex items-center", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
+			id: statusId,
 			className: "sr-only",
 			children: `Step ${tour.index + 1} of ${tour.total}`
 		}), children ?? (variant === "dots" ? Array.from({ length: tour.total }, (_, dot) => /* @__PURE__ */ jsx("span", {
@@ -267,8 +296,12 @@ function RichTooltipProgress({ className, variant = "count", children, ...props
 		}))]
 	});
 }
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
 const actionClasses = "inline-flex shrink-0 cursor-pointer items-center justify-center disabled:pointer-events-none [&_svg]:size-4";
-function RichTooltipPrevious({ className, children, onClick, ...props }) {
+function RichTooltipPrevious({ className, children, label = "Previous step", onClick, ...props }) {
 	const tour = useTour();
 	if (!tour || tour.total < 2) return null;
 	return /* @__PURE__ */ jsx("button", {
@@ -277,6 +310,7 @@ function RichTooltipPrevious({ className, children, onClick, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "rich-tooltip",
 		"data-slot": "previous",
+		"data-icon-only": children === void 0 ? "true" : void 0,
 		disabled: tour.isFirst,
 		onClick: (event) => {
 			onClick?.(event);
@@ -284,21 +318,30 @@ function RichTooltipPrevious({ className, children, onClick, ...props }) {
 		},
 		className: cn(actionClasses, className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {
+			"aria-hidden": "true",
+			"data-icon-dir": "inline"
+		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "Previous step"
+			children: label
 		})] })
 	});
 }
-function RichTooltipNext({ className, children, onClick, ...props }) {
-	const { dismiss } = useRichTooltipContext();
+function RichTooltipNext({ className, children, nextLabel = "Next step", finishLabel = "Finish", gotItLabel = "Got it", onClick, ref, ...props }) {
+	const { dismiss, nextRef } = useRichTooltipContext();
 	const tour = useTour();
+	const setRef = (node) => {
+		nextRef.current = node;
+		assignRef(ref, node);
+	};
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-control-ui": "rich-tooltip",
 		"data-control-family": "popup",
 		"data-popup-kind": "rich-tooltip",
 		"data-slot": "next",
+		"data-icon-only": children === void 0 && tour ? "true" : void 0,
+		ref: setRef,
 		onClick: (event) => {
 			onClick?.(event);
 			if (event.defaultPrevented) return;
@@ -309,21 +352,26 @@ function RichTooltipNext({ className, children, onClick, ...props }) {
 		...props,
 		children: children ?? (tour ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: tour.isLast ? "Finish" : "Next step"
-		}), /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" })] }) : "Got it")
+			children: tour.isLast ? finishLabel : nextLabel
+		}), tour.isLast ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"aria-hidden": "true",
+			"data-icon-dir": "inline"
+		})] }) : gotItLabel)
 	});
 }
-function RichTooltipClose({ className, children, ...props }) {
+function RichTooltipClose({ className, children, label, ...props }) {
+	const { inTour } = useRichTooltipContext();
 	return /* @__PURE__ */ jsx(Popover.Close, {
 		"data-control-ui": "rich-tooltip",
 		"data-control-family": "popup",
 		"data-popup-kind": "rich-tooltip",
 		"data-slot": "close",
+		"data-icon-only": children === void 0 ? "true" : void 0,
 		className: cn(actionClasses, className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "Dismiss"
+			children: label ?? (inTour ? "End tour" : "Dismiss")
 		})] })
 	});
 }

package/dist/ui/scroll-area.d.ts

@@ -26,5 +26,5 @@ export type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   lockAxis?: ScrollAreaLockAxis;
   scrollbarVisibility?: ScrollAreaScrollbarVisibility;
 };
-export declare function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: ScrollAreaProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/scroll-area.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { ProgressiveBlur } from "./progressive-blur.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/ui/scroll-area.tsx
 const scrollAreaScrollbarVisibilities = [
@@ -27,25 +27,54 @@ function Scrollbar({ orientation, visibility, thumbStyle }) {
 		})
 	});
 }
-function viewportStyle(maxHeight, lockX, lockY) {
-	if (!maxHeight && !lockX && !lockY) return void 0;
+function viewportStyle(baseStyle, maxHeight, lockX, lockY) {
+	if (!maxHeight && !lockX && !lockY) return baseStyle;
 	return {
+		...baseStyle,
 		...maxHeight ? { maxHeight } : {},
 		...lockX ? { overflowX: "hidden" } : {},
 		...lockY ? { overflowY: "hidden" } : {}
 	};
 }
-function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility = "hover", children, style, ...props }) {
+function regionProps(ariaLabel, ariaLabelledby) {
+	if (!ariaLabel && !ariaLabelledby) return {};
+	return {
+		role: "region",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby
+	};
+}
+function EdgeBlurs({ blurProps, lockX, lockY }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		!lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
+			...blurProps,
+			side: "top",
+			visible: false
+		}),
+		!lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
+			...blurProps,
+			side: "bottom",
+			visible: false
+		}),
+		!lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
+			...blurProps,
+			side: "inline-start",
+			visible: false
+		}),
+		!lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
+			...blurProps,
+			side: "inline-end",
+			visible: false
+		})
+	] });
+}
+function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility = "hover", children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
 	const skin = useSkin();
 	const resolvedBlur = blur ?? skin.scrollAreaBlur ?? false;
 	const lockX = lockAxis === "x" || lockAxis === "both";
 	const lockY = lockAxis === "y" || lockAxis === "both";
-	const resolvedViewportStyle = viewportStyle(maxHeight, lockX, lockY);
 	const { style: viewportPropsStyle, ...resolvedViewportProps } = viewportProps ?? {};
-	const mergedViewportStyle = viewportPropsStyle || resolvedViewportStyle ? {
-		...viewportPropsStyle,
-		...resolvedViewportStyle
-	} : void 0;
+	const mergedViewportStyle = viewportStyle(viewportPropsStyle, maxHeight, lockX, lockY);
 	const thumbStyle = style;
 	const cornerStyle = style;
 	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
@@ -64,6 +93,7 @@ function ScrollArea({ className, viewportClassName, contentClassName, viewportPr
 				"data-control-family": "scroll-area",
 				"data-slot": "viewport",
 				...resolvedViewportProps,
+				...regionProps(ariaLabel, ariaLabelledby),
 				"data-scroll-area-viewport": "",
 				ref: viewportRef,
 				className: cn("h-full w-full", viewportClassName),
@@ -77,25 +107,10 @@ function ScrollArea({ className, viewportClassName, contentClassName, viewportPr
 					children
 				})
 			}),
-			resolvedBlur && !lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
-				...blurProps,
-				side: "top",
-				visible: false
-			}),
-			resolvedBlur && !lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
-				...blurProps,
-				side: "bottom",
-				visible: false
-			}),
-			resolvedBlur && !lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
-				...blurProps,
-				side: "inline-start",
-				visible: false
-			}),
-			resolvedBlur && !lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
-				...blurProps,
-				side: "inline-end",
-				visible: false
+			resolvedBlur && /* @__PURE__ */ jsx(EdgeBlurs, {
+				blurProps,
+				lockX,
+				lockY
 			}),
 			!lockY && /* @__PURE__ */ jsx(Scrollbar, {
 				orientation: "vertical",

package/dist/ui/sidebar-menu.d.ts

@@ -43,6 +43,10 @@ export declare function SidebarMenu({ className, indicator, style, children, ...
 export declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-export declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+export type SidebarMenuBadgeProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+};
+export declare function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps): import("react").JSX.Element;
+export declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ref, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
 export declare function SidebarMenuSub({ className, ...props }: ComponentProps<typeof SidebarMenu>): import("react").JSX.Element;
 //#endregion

package/dist/ui/sidebar-menu.js

@@ -2,12 +2,11 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
-import { useSidebar } from "./sidebar-provider.js";
+import { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
-import { cva } from "class-variance-authority";
 //#region src/ui/sidebar-menu.tsx
 const sidebarMenuButtonVariants = ["default", "outline"];
 const sidebarMenuButtonSizes = [
@@ -73,7 +72,7 @@ function SidebarMenu({ className, indicator, style, children, ...props }) {
 		"data-control-family": "sidebar",
 		"data-slot": "menu",
 		"data-indicator": resolvedIndicator,
-		className: cn("flex min-w-0 flex-col", hasHighlight ? void 0 : className),
+		className: cn("flex min-w-0 flex-col group-data-[collapsible=icon]:mx-0 group-data-[collapsible=icon]:border-0 group-data-[collapsible=icon]:px-0", hasHighlight ? void 0 : className),
 		style: hasHighlight ? void 0 : style,
 		...props,
 		children: /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
@@ -102,31 +101,29 @@ function SidebarMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden text-start group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
-	variants: {
-		variant: {
-			default: null,
-			outline: null
-		},
-		size: {
-			default: "group-data-[collapsible=icon]:size-[var(--control-h-md)]!",
-			sm: "group-data-[collapsible=icon]:size-[var(--control-h-sm)]!",
-			lg: "group-data-[collapsible=icon]:size-[var(--control-h-lg)]!"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ...props }) {
+function SidebarMenuBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu-badge",
+		className: cn("pointer-events-none absolute flex -translate-y-1/2 select-none items-center justify-center tabular-nums group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ref, ...props }) {
 	const { isMobile, state } = useSidebar();
+	const surface = useContext(SidebarSurfaceContext);
+	const tooltipEnabled = !isMobile && state === "collapsed" && surface?.collapsible === "icon";
 	const indicator = useContext(SidebarMenuContext);
+	const buttonRef = useRef(null);
+	const [textLabel, setTextLabel] = useState("");
 	const button = useRender({
 		defaultTagName: "button",
 		render,
+		ref: [ref ?? null, buttonRef],
 		props: {
 			type: "button",
+			"aria-current": isActive ? "page" : void 0,
 			...props,
 			"data-control-ui": "sidebar",
 			"data-control-family": "sidebar",
@@ -135,20 +132,23 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
 			"data-variant": variant,
 			"data-active": isActive || void 0,
 			"data-track-item": indicator !== "none" ? "" : void 0,
-			className: cn(sidebarMenuButtonClasses({
-				variant,
-				size
-			}), className),
+			className: cn("peer/menu-button flex items-center overflow-hidden text-start disabled:pointer-events-none aria-disabled:pointer-events-none [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0", className),
 			children
 		}
 	});
-	if (!tooltip) return button;
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
-		side: "right",
-		align: "center",
-		hidden: state !== "collapsed" || isMobile,
-		children: tooltip
-	})] });
+	if (!tooltip && surface?.collapsible !== "icon") return button;
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !tooltipEnabled,
+		onOpenChange: (open) => {
+			if (open && !tooltip) setTextLabel(buttonRef.current?.textContent?.trim() ?? "");
+		},
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+			side: surface?.side === "right" ? "inline-start" : "inline-end",
+			align: "center",
+			hidden: !tooltipEnabled,
+			children: tooltip ?? textLabel
+		})]
+	});
 }
 function SidebarMenuSub({ className, ...props }) {
 	return /* @__PURE__ */ jsx(SidebarMenu, {
@@ -158,4 +158,4 @@ function SidebarMenuSub({ className, ...props }) {
 	});
 }
 //#endregion
-export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants };
+export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants };

package/dist/ui/sidebar-provider.d.ts

@@ -5,6 +5,7 @@ export type SidebarStyle = CSSProperties & SidebarKnobStyle & {
   "--sidebar-width"?: string;
   "--sidebar-width-icon"?: string;
 };
+export type SidebarLayoutMode = "viewport" | "contained";
 type SidebarContextProps = {
   state: "expanded" | "collapsed";
   open: boolean;
@@ -17,12 +18,17 @@ type SidebarContextProps = {
   minWidth: number;
   maxWidth: number;
   setWidth: (width: number) => void;
+  layout: SidebarLayoutMode;
+  keyboardShortcut: string | null;
+  sidebarId: string;
+  contentId: string;
 };
 type SidebarElements = {
   wrapperRef: RefObject<HTMLDivElement | null>;
   offcanvasRef: RefObject<HTMLDivElement | null>;
   railRef: RefObject<HTMLElement | null>;
   triggerRef: RefObject<HTMLButtonElement | null>;
+  insetRef: RefObject<HTMLElement | null>;
 };
 export declare const SidebarSurfaceContext: import("react").Context<{
   side: "left" | "right";
@@ -47,7 +53,10 @@ export type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
   onWidthChange?: (width: number) => void;
   persistOpen?: boolean;
   keyboardShortcut?: string | null;
+  layout?: SidebarLayoutMode;
+  skipLinkLabel?: string;
+  contentId?: string;
   style?: SidebarStyle;
 };
-export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultWidth, minWidth, maxWidth, width: widthProp, onWidthChange, persistOpen, keyboardShortcut, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultWidth, minWidth, maxWidth, width: widthProp, onWidthChange, persistOpen, keyboardShortcut, layout, skipLinkLabel, contentId: contentIdProp, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/sidebar-provider.js

@@ -4,15 +4,15 @@ import { useSkin } from "../skin-provider.js";
 import { TooltipProvider } from "./tooltip.js";
 import { SIDEBAR_COOKIE_NAME } from "../control-props.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#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, {