@ctrl-ui/react 0.8.6 → 0.8.8

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, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility = "scroll", 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, viewportProps, viewportRef,
 				"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),
@@ -72,29 +102,15 @@ function ScrollArea({ className, viewportClassName, viewportProps, viewportRef,
 					"data-control-ui": "scroll-area",
 					"data-control-family": "scroll-area",
 					"data-slot": "content",
+					className: contentClassName,
 					style: { minWidth: 0 },
 					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/select.d.ts

@@ -2,6 +2,7 @@ import { ControlledChoice } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/ui/select.d.ts
@@ -21,7 +22,7 @@ export type SelectProps<TValue extends string = string> = Omit<ControlledChoice<
 export declare const selectTriggerVariants: readonly ["surface", "ghost"];
 export type SelectTriggerVariant = (typeof selectTriggerVariants)[number];
 export type SelectTriggerProps = Omit<ComponentProps<"button">, "style"> & {
-  style?: CSSProperties & ButtonKnobStyle;
+  style?: CSSProperties & FieldKnobStyle & ButtonKnobStyle;
 } & {
   size?: ControlSize;
   variant?: SelectTriggerVariant;

package/dist/ui/select.js

@@ -2,6 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { Button } from "./button.js";
+import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
@@ -16,46 +18,58 @@ function Select({ children, onValueChange, ...props }) {
 		children
 	});
 }
+const selectTriggerLayoutClasses = "group relative isolate inline-flex shrink-0 items-center justify-between overflow-visible";
+function SelectIcon() {
+	return /* @__PURE__ */ jsx(Select$1.Icon, {
+		"data-control-ui": "select",
+		"data-control-family": "popup",
+		"data-popup-kind": "select",
+		"data-slot": "icon",
+		className: "relative z-[1]",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			className: "size-3",
+			"aria-hidden": "true",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M3 4.5 6 7.5 9 4.5",
+				stroke: "currentColor",
+				strokeWidth: "1.3",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+}
 function SelectTrigger({ size = "sm", variant = "surface", className, children, disabled, ...props }) {
+	if (variant === "ghost") return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size
+		}),
+		className: cn(selectTriggerLayoutClasses, className),
+		disabled,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(SelectIcon, {})]
+	});
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"data-control-ui": "select",
-		"data-control-family": "button",
-		"data-popup-kind": "select",
+		"data-control-family": "field",
+		"data-field-kind": "select",
 		"data-slot": "trigger",
 		"data-control": "true",
 		"data-size": size,
-		"data-variant": variant,
-		"data-tone": "neutral",
-		"data-shape": "default",
-		className: cn("group relative isolate inline-flex shrink-0 items-center justify-between overflow-visible", className),
+		className: cn(selectTriggerLayoutClasses, className),
 		disabled,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			"data-control-ui": "button",
-			"data-control-family": "button",
-			"data-slot": "content",
-			className: "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]",
-			children
-		}), /* @__PURE__ */ jsx(Select$1.Icon, {
 			"data-control-ui": "select",
-			"data-control-family": "popup",
-			"data-popup-kind": "select",
-			"data-slot": "icon",
-			className: "relative z-[1]",
-			children: /* @__PURE__ */ jsx("svg", {
-				viewBox: "0 0 12 12",
-				className: "size-3",
-				"aria-hidden": "true",
-				fill: "none",
-				children: /* @__PURE__ */ jsx("path", {
-					d: "M3 4.5 6 7.5 9 4.5",
-					stroke: "currentColor",
-					strokeWidth: "1.3",
-					strokeLinecap: "round",
-					strokeLinejoin: "round"
-				})
-			})
-		})]
+			"data-control-family": "field",
+			"data-field-kind": "select",
+			"data-slot": "value",
+			className: "inline-flex min-w-0 items-center gap-[inherit]",
+			children
+		}), /* @__PURE__ */ jsx(SelectIcon, {})]
 	});
 }
 function SelectValue({ children, ...props }) {
@@ -82,12 +96,19 @@ function SelectContent({ className, children, alignItemWithTrigger = false, ...p
 			"data-surface": "floating",
 			"data-control-family": "popup",
 			"data-popup-part": "list-surface",
-			className: cn("max-h-[min(20rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto", className),
+			className: cn("grid max-h-[min(20rem,var(--available-height))] min-w-[var(--anchor-width)] grid-rows-[minmax(0,1fr)]", className),
 			...props,
-			children
+			children: /* @__PURE__ */ jsx(ScrollArea, {
+				lockAxis: "x",
+				viewportProps: { render: renderListAsScrollViewport },
+				children
+			})
 		})
 	}) });
 }
+function renderListAsScrollViewport({ role: _role, tabIndex: _tabIndex, ...viewportProps }) {
+	return /* @__PURE__ */ jsx(Select$1.List, { ...viewportProps });
+}
 function SelectItem({ className, children, disabled, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		"data-control-ui": "select",
@@ -99,6 +120,10 @@ function SelectItem({ className, children, disabled, ...props }) {
 		className: cn(popupItemStructureClasses, className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
+			"data-control-ui": "select",
+			"data-control-family": "popup",
+			"data-popup-kind": "select",
+			"data-slot": "item-text",
 			className: "flex min-w-0 flex-1 items-center",
 			children
 		}), /* @__PURE__ */ jsx("span", {

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 { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 //#region src/ui/sidebar-menu.tsx
 const sidebarMenuButtonVariants = ["default", "outline"];
 const sidebarMenuButtonSizes = [
@@ -102,31 +101,28 @@ 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 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 +131,22 @@ 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 w-full items-center overflow-hidden text-start group-data-[collapsible=icon]:w-(--cui-sidebar-menu-button-height) 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, {
+		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: state !== "collapsed" || isMobile,
+			children: tooltip ?? textLabel
+		})]
+	});
 }
 function SidebarMenuSub({ className, ...props }) {
 	return /* @__PURE__ */ jsx(SidebarMenu, {
@@ -158,4 +156,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 { 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 { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
-import { jsx } from "react/jsx-runtime";
+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

@@ -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 };