@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/sidebar/Sidebar.js

@@ -6,18 +6,23 @@ import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { Icon } from "../icon/Icon.js";
 import { ScrollArea } from "../scrollArea/ScrollArea.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/Tooltip.js";
+import { VisuallyHidden } from "../visuallyHidden/VisuallyHidden.js";
 import {
   sidebarInsetPropDefs,
   sidebarMenuActionPropDefs,
   sidebarMenuButtonPropDefs,
   sidebarMenuSkeletonPropDefs,
+  sidebarMenuSubTriggerPropDefs,
   sidebarPropDefs,
   sidebarProviderPropDefs
 } from "./sidebar.props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const Sheet = React.lazy(() => import("../sheet/Sheet.js").then((mod) => ({ default: mod.Sheet })));
-const SheetTrigger = React.lazy(() => import("../sheet/Sheet.js").then((mod) => ({ default: mod.SheetTrigger })));
-const SheetContent = React.lazy(() => import("../sheet/Sheet.js").then((mod) => ({ default: mod.SheetContent })));
+const Drawer = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.Drawer })));
+const DrawerTrigger = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerTrigger })));
+const DrawerContent = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerContent })));
+const DrawerTitle = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerTitle })));
+const DrawerDescription = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerDescription })));
+const DrawerClose = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerClose })));
 const SidebarContext = React.createContext(null);
 const SidebarNestedContext = React.createContext(null);
 const SidebarLocalContext = React.createContext(void 0);
@@ -52,12 +57,16 @@ function writeCookie(key, value) {
 function usePersistedState({
   defaultExpanded,
   storageKey,
-  storage
+  storage,
+  manualToggleRef
 }) {
   const [expanded, setExpanded] = React.useState(defaultExpanded);
+  const [hydrated, setHydrated] = React.useState(false);
   React.useLayoutEffect(() => {
-    if (!storageKey || typeof window === "undefined") return;
-    if (storage === "memory") return;
+    if (!storageKey || typeof window === "undefined" || storage === "memory") {
+      setHydrated(true);
+      return;
+    }
     try {
       let stored = null;
       if (storage === "localStorage") {
@@ -69,11 +78,14 @@ function usePersistedState({
         setExpanded(JSON.parse(stored));
       }
     } catch {
+    } finally {
+      setHydrated(true);
     }
   }, [storageKey, storage]);
   React.useEffect(() => {
     if (!storageKey || typeof window === "undefined") return;
     if (storage === "memory") return;
+    if (!manualToggleRef.current) return;
     const value = JSON.stringify(expanded);
     try {
       if (storage === "localStorage") {
@@ -83,28 +95,36 @@ function usePersistedState({
       }
     } catch {
     }
-  }, [storageKey, storage, expanded]);
+  }, [storageKey, storage, expanded, manualToggleRef]);
   return React.useMemo(
-    () => ({ expanded, setExpanded }),
-    [expanded]
+    () => ({ expanded, setExpanded, hydrated }),
+    [expanded, hydrated]
   );
 }
 function useSidebar() {
   return useSidebarContext() ?? {
     expanded: true,
+    pinnedExpanded: true,
     setExpanded: () => {
     },
+    previewExpanded: false,
+    setPreviewExpanded: () => {
+    },
+    previewBlockedRef: { current: false },
+    hoverExpand: false,
     mobileSheetOpen: false,
     setMobileSheetOpen: () => {
     },
     isMobile: false,
+    mobile: "none",
     sidebarId: void 0,
     collapsible: "offcanvas",
     manualToggleRef: { current: false },
-    autoExpandedRef: { current: false },
     triggerRef: { current: null },
     recoveryRailRef: { current: null },
-    rootRef: { current: null }
+    rootRef: { current: null },
+    defaultSubmenuMode: "click",
+    submenuOpenOnActive: true
   };
 }
 function useMergedRef(...refs) {
@@ -186,20 +206,40 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
     mobile = "sheet",
     mobileBreakpoint = 768,
     collapsible = "offcanvas",
+    hoverExpand = false,
+    previewOpen = false,
     nested = false,
+    defaultSubmenuMode = "click",
+    submenuOpenOnActive = true,
     children,
     ...propsWithoutDefaults
   } = props;
-  const persisted = usePersistedState({ defaultExpanded, storageKey, storage });
   const manualToggleRef = React.useRef(false);
+  const persisted = usePersistedState({ defaultExpanded, storageKey, storage, manualToggleRef });
+  const [transitionsReady, setTransitionsReady] = React.useState(false);
+  const readyFrameRef = React.useRef(null);
   const { className, ...providerProps } = extractProps(
     {
       ...propsWithoutDefaults,
       className: propClassName,
-      defaultExpanded
+      defaultExpanded,
+      hoverExpand,
+      previewOpen
     },
     sidebarProviderPropDefs
   );
+  React.useEffect(() => {
+    if (!persisted.hydrated) return;
+    readyFrameRef.current = requestAnimationFrame(() => {
+      readyFrameRef.current = requestAnimationFrame(() => {
+        setTransitionsReady(true);
+        readyFrameRef.current = null;
+      });
+    });
+    return () => {
+      if (readyFrameRef.current !== null) cancelAnimationFrame(readyFrameRef.current);
+    };
+  }, [persisted.hydrated]);
   React.useEffect(() => {
     if (!toggleShortcut || collapsible === "none") return;
     const handleKeyDown = (event) => {
@@ -212,9 +252,7 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [toggleShortcut, collapsible, persisted]);
-  const [isMobile, setIsMobile] = React.useState(
-    typeof window !== "undefined" ? window.innerWidth < mobileBreakpoint || window.matchMedia && window.matchMedia("(pointer: coarse)").matches : false
-  );
+  const [isMobile, setIsMobile] = React.useState(false);
   React.useLayoutEffect(() => {
     if (typeof window === "undefined") return;
     const mm = window.matchMedia("(pointer: coarse)");
@@ -242,33 +280,49 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
     };
   }, [mobileBreakpoint]);
   const [mobileSheetOpen, setMobileSheetOpen] = React.useState(false);
+  const [previewExpanded, setPreviewExpanded] = React.useState(false);
+  const previewBlockedRef = React.useRef(false);
   React.useEffect(() => {
     if (!isMobile) {
       setMobileSheetOpen(false);
     }
   }, [isMobile]);
   const isMobileMode = mobile !== "none" && isMobile;
+  const canPreview = hoverExpand && collapsible === "icon" && !isMobileMode;
+  const effectivePreviewExpanded = canPreview && (previewExpanded || previewOpen);
+  const effectiveExpanded = persisted.expanded || effectivePreviewExpanded;
   const sidebarId = React.useId();
-  const autoExpandedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!canPreview || persisted.expanded) {
+      setPreviewExpanded(false);
+    }
+  }, [canPreview, persisted.expanded]);
   const triggerRef = React.useRef(null);
   const recoveryRailRef = React.useRef(null);
   const rootRef = React.useRef(null);
   const contextValue = React.useMemo(
     () => ({
-      expanded: persisted.expanded,
+      expanded: effectiveExpanded,
+      pinnedExpanded: persisted.expanded,
       setExpanded: persisted.setExpanded,
+      previewExpanded: effectivePreviewExpanded,
+      setPreviewExpanded,
+      previewBlockedRef,
+      hoverExpand: canPreview,
       mobileSheetOpen,
       setMobileSheetOpen,
       isMobile: isMobileMode,
+      mobile,
       sidebarId,
       collapsible,
       manualToggleRef,
-      autoExpandedRef,
       triggerRef,
       recoveryRailRef,
-      rootRef
+      rootRef,
+      defaultSubmenuMode,
+      submenuOpenOnActive
     }),
-    [persisted.expanded, persisted.setExpanded, mobileSheetOpen, isMobileMode, sidebarId, collapsible]
+    [effectiveExpanded, persisted.expanded, persisted.setExpanded, effectivePreviewExpanded, canPreview, mobileSheetOpen, isMobileMode, mobile, sidebarId, collapsible, defaultSubmenuMode, submenuOpenOnActive]
   );
   const nestedCounterRef = React.useRef(0);
   const desktopChildren = /* @__PURE__ */ jsx(SidebarNestedContext.Provider, { value: { counter: nestedCounterRef, isActive: nested }, children });
@@ -278,24 +332,15 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       className: classNames("dsx-sidebar-provider", className),
       "data-slot": "sidebar-provider",
-      ...getSidebarDataAttributes(persisted.expanded, collapsible),
+      ...getSidebarDataAttributes(effectiveExpanded, collapsible),
+      "data-hover-expand": canPreview ? "true" : "false",
+      "data-preview-expanded": effectivePreviewExpanded ? "true" : "false",
+      "data-pinned-state": getSidebarState(persisted.expanded),
+      "data-transitions-ready": transitionsReady ? "true" : "false",
       ...providerProps,
       suppressHydrationWarning: true,
       children: [
-        isMobileMode && mobile === "sheet" && /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Sheet, { open: mobileSheetOpen, onOpenChange: setMobileSheetOpen, children: [
-          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Open sidebar",
-              className: "dsx-sidebar__mobile-trigger",
-              "data-slot": "sidebar-mobile-trigger",
-              children: /* @__PURE__ */ jsx(Icon, { name: "menu", size: "md" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(SheetContent, { side: "left", showClose: true, children })
-        ] }) }),
-        !isMobileMode && desktopChildren,
+        desktopChildren,
         !isMobileMode && collapsible === "offcanvas" && /* @__PURE__ */ jsx(
           "button",
           {
@@ -310,7 +355,6 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
             tabIndex: persisted.expanded ? -1 : 0,
             onClick: () => {
               manualToggleRef.current = true;
-              autoExpandedRef.current = false;
               persisted.setExpanded(true);
             },
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm" })
@@ -322,28 +366,38 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
 });
 SidebarProvider.displayName = "SidebarProvider";
 const SidebarRoot = React.forwardRef((props, forwardedRef) => {
-  const { className: propClassName, defaultExpanded = true, children, ...propsWithoutDefaults } = props;
+  const { className: propClassName, defaultExpanded = true, effect = "none", children, ...propsWithoutDefaults } = props;
   const context = useSidebarContext();
-  const internal = usePersistedState({ defaultExpanded, storageKey: void 0, storage: "localStorage" });
+  const internalManualToggleRef = React.useRef(false);
+  const internal = usePersistedState({ defaultExpanded, storageKey: void 0, storage: "localStorage", manualToggleRef: internalManualToggleRef });
   const value = context ?? {
     ...internal,
+    pinnedExpanded: internal.expanded,
+    previewExpanded: false,
+    setPreviewExpanded: () => {
+    },
+    previewBlockedRef: { current: false },
+    hoverExpand: false,
     mobileSheetOpen: false,
     setMobileSheetOpen: () => {
     },
     isMobile: false,
+    mobile: "none",
     sidebarId: void 0,
     collapsible: "offcanvas",
     manualToggleRef: { current: false },
-    autoExpandedRef: { current: false },
     triggerRef: { current: null },
     recoveryRailRef: { current: null },
-    rootRef: { current: null }
+    rootRef: { current: null },
+    defaultSubmenuMode: "click",
+    submenuOpenOnActive: true
   };
   const { className, ...sidebarProps } = extractProps(
     {
       ...propsWithoutDefaults,
       className: propClassName,
-      defaultExpanded
+      defaultExpanded,
+      effect
     },
     sidebarPropDefs
   );
@@ -367,7 +421,6 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
   }, [nestedCtx]);
   const effectiveCollapsible = isNestedInstance ? "none" : value.collapsible;
   const effectiveExpanded = effectiveCollapsible === "none" ? true : value.expanded;
-  const hoverTimerRef = React.useRef(null);
   const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(
     typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
   );
@@ -379,38 +432,6 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
     mm.addEventListener("change", handler);
     return () => mm.removeEventListener("change", handler);
   }, []);
-  const canHoverExpand = effectiveCollapsible === "icon" && !value.isMobile && typeof window !== "undefined" && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
-  const handleMouseEnter = React.useCallback(() => {
-    if (!canHoverExpand || value.expanded) return;
-    value.manualToggleRef.current = false;
-    value.autoExpandedRef.current = true;
-    if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
-    if (prefersReducedMotion) {
-      value.setExpanded(true);
-    } else {
-      hoverTimerRef.current = setTimeout(() => {
-        value.setExpanded(true);
-      }, 100);
-    }
-  }, [canHoverExpand, value.expanded, value.setExpanded, value.manualToggleRef, value.autoExpandedRef, prefersReducedMotion]);
-  const handleMouseLeave = React.useCallback(() => {
-    if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
-    if (value.autoExpandedRef.current && !value.manualToggleRef.current) {
-      if (prefersReducedMotion) {
-        value.setExpanded(false);
-      } else {
-        hoverTimerRef.current = setTimeout(() => {
-          value.setExpanded(false);
-        }, 120);
-      }
-    }
-    value.autoExpandedRef.current = false;
-  }, [value.setExpanded, value.autoExpandedRef, value.manualToggleRef, prefersReducedMotion]);
-  React.useEffect(() => {
-    return () => {
-      if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
-    };
-  }, []);
   const prevExpandedRef = React.useRef(effectiveExpanded);
   React.useEffect(() => {
     const wasExpanded = prevExpandedRef.current;
@@ -462,12 +483,61 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
   const sidebarDataAttributes = getSidebarDataAttributes(effectiveExpanded, effectiveCollapsible);
   const isHiddenOffcanvas = effectiveCollapsible === "offcanvas" && !effectiveExpanded;
   const mergedRootRef = useMergedRef(value.rootRef, forwardedRef);
-  const content = /* @__PURE__ */ jsx(SidebarLocalContext.Provider, { value: effectiveCollapsible, children: /* @__PURE__ */ jsx(
+  const pointerWithinRef = React.useRef(false);
+  const {
+    onPointerEnter,
+    onPointerLeave,
+    onFocusCapture,
+    onBlurCapture,
+    onKeyDown,
+    ...restSidebarProps
+  } = sidebarProps;
+  const isMobileSheetMode = value.isMobile && value.mobile === "sheet";
+  const content = isMobileSheetMode ? /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Drawer, { open: value.mobileSheetOpen, onOpenChange: value.setMobileSheetOpen, direction: "left", children: [
+    !value.mobileSheetOpen && /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Open sidebar",
+        className: "dsx-sidebar__mobile-trigger",
+        "data-slot": "sidebar-mobile-trigger",
+        children: /* @__PURE__ */ jsx(Icon, { name: "menu", size: "md" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DrawerContent, { className: "dsx-sidebar__mobile-sheet", children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(DrawerTitle, { children: "Navigation" }) }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(DrawerDescription, { children: "Site navigation menu" }) }),
+      /* @__PURE__ */ jsx(DrawerClose, { className: "dsx-sidebar__mobile-close", "aria-label": "Close navigation", "data-slot": "sidebar-mobile-close", children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "md" }) }),
+      /* @__PURE__ */ jsx(SidebarLocalContext.Provider, { value: effectiveCollapsible, children: /* @__PURE__ */ jsx(
+        "nav",
+        {
+          ref: mergedRootRef,
+          id: value.sidebarId,
+          ...getSidebarDataAttributes(true, effectiveCollapsible),
+          "data-hover-expand": "false",
+          "data-preview-expanded": "false",
+          "data-pinned-state": getSidebarState(value.pinnedExpanded),
+          "data-effect": effect,
+          "data-nested": isNestedInstance ? "true" : void 0,
+          "data-slot": "sidebar",
+          "aria-label": "Sidebar",
+          tabIndex: -1,
+          className: classNames("dsx-sidebar", className),
+          ...restSidebarProps,
+          children
+        }
+      ) })
+    ] })
+  ] }) }) : /* @__PURE__ */ jsx(SidebarLocalContext.Provider, { value: effectiveCollapsible, children: /* @__PURE__ */ jsx(
     "nav",
     {
       ref: mergedRootRef,
       id: value.sidebarId,
       ...sidebarDataAttributes,
+      "data-hover-expand": value.hoverExpand ? "true" : "false",
+      "data-preview-expanded": value.previewExpanded ? "true" : "false",
+      "data-pinned-state": getSidebarState(value.pinnedExpanded),
+      "data-effect": effect,
       "data-nested": isNestedInstance ? "true" : void 0,
       "data-slot": "sidebar",
       "aria-label": "Sidebar",
@@ -475,9 +545,42 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
       inert: isHiddenOffcanvas ? true : void 0,
       tabIndex: -1,
       className: classNames("dsx-sidebar", className),
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ...sidebarProps,
+      ...restSidebarProps,
+      onPointerEnter: (event) => {
+        pointerWithinRef.current = true;
+        if (value.hoverExpand && !value.pinnedExpanded && !value.previewBlockedRef.current) {
+          value.setPreviewExpanded(true);
+        }
+        onPointerEnter?.(event);
+      },
+      onPointerLeave: (event) => {
+        pointerWithinRef.current = false;
+        value.previewBlockedRef.current = false;
+        if (!event.currentTarget.contains(document.activeElement)) {
+          value.setPreviewExpanded(false);
+        }
+        onPointerLeave?.(event);
+      },
+      onFocusCapture: (event) => {
+        if (value.hoverExpand && !value.pinnedExpanded && !value.previewBlockedRef.current) {
+          value.setPreviewExpanded(true);
+        }
+        onFocusCapture?.(event);
+      },
+      onBlurCapture: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget) && !pointerWithinRef.current) {
+          value.previewBlockedRef.current = false;
+          value.setPreviewExpanded(false);
+        }
+        onBlurCapture?.(event);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && value.previewExpanded) {
+          event.preventDefault();
+          value.setPreviewExpanded(false);
+        }
+        onKeyDown?.(event);
+      },
       children
     }
   ) });
@@ -505,11 +608,19 @@ const SidebarInset = React.forwardRef((props, forwardedRef) => {
 SidebarInset.displayName = "SidebarInset";
 const SidebarRail = React.forwardRef(
   ({ className, type = "button", onClick, ...props }, forwardedRef) => {
-    const { expanded, setExpanded, sidebarId, collapsible: contextCollapsible, manualToggleRef, autoExpandedRef } = useSidebar();
+    const {
+      expanded,
+      setExpanded,
+      sidebarId,
+      collapsible: contextCollapsible,
+      manualToggleRef,
+      isMobile,
+      mobile
+    } = useSidebar();
     const localCollapsible = React.useContext(SidebarLocalContext);
     const collapsible = localCollapsible ?? contextCollapsible;
     const sidebarDataAttributes = getSidebarDataAttributes(expanded, collapsible);
-    if (collapsible === "none") {
+    if (collapsible === "none" || isMobile && mobile === "sheet") {
       return null;
     }
     const localRef = React.useRef(null);
@@ -536,7 +647,6 @@ const SidebarRail = React.forwardRef(
         "aria-label": expanded ? "Collapse sidebar" : "Expand sidebar",
         "aria-expanded": expanded,
         "aria-controls": sidebarId,
-        tabIndex: isIconMode ? -1 : void 0,
         className: classNames(
           "dsx-sidebar__rail",
           isIconMode && "dsx-sidebar__rail--edge",
@@ -546,12 +656,10 @@ const SidebarRail = React.forwardRef(
           onClick?.(event);
           if (!event.defaultPrevented) {
             manualToggleRef.current = true;
-            autoExpandedRef.current = false;
             setExpanded((current) => !current);
           }
         },
-        ...props,
-        children: isIconMode ? null : /* @__PURE__ */ jsx(Icon, { name: expanded ? "chevron-left" : "chevron-right", size: "sm" })
+        ...props
       }
     );
   }
@@ -672,7 +780,7 @@ const SidebarMenu = React.forwardRef(
       (e) => {
         onKeyDown?.(e);
         if (e.defaultPrevented) return;
-        handleMenuKeyboardNav(menuRef.current, ".dsx-sidebar__menu-button, .dsx-sidebar__menu-sub-button", e);
+        handleMenuKeyboardNav(menuRef.current, ".dsx-sidebar__menu-button, .dsx-sidebar__menu-sub-trigger, .dsx-sidebar__menu-sub-button", e);
       },
       [onKeyDown]
     );
@@ -704,19 +812,86 @@ const SidebarMenuItem = React.forwardRef(({ className, ...props }, forwardedRef)
   );
 });
 SidebarMenuItem.displayName = "SidebarMenuItem";
-const SidebarMenuBadge = React.forwardRef(({ className, ...props }, forwardedRef) => {
-  const { expanded, collapsible } = useSidebar();
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref: forwardedRef,
-      className: classNames("dsx-sidebar__menu-badge dsx-badge dsx-badge--secondary dsx-badge--sm", className),
-      "data-slot": "sidebar-menu-badge",
-      ...getSidebarDataAttributes(expanded, collapsible),
-      ...props
+const SidebarMenuBadge = React.forwardRef(
+  ({ className, variant = "text", value, max, children, ...props }, forwardedRef) => {
+    const { expanded, collapsible } = useSidebar();
+    if (variant === "ring" && typeof value === "number" && typeof max === "number" && max > 0) {
+      const radius = 7;
+      const circumference = 2 * Math.PI * radius;
+      const ratio = Math.min(Math.max(value / max, 0), 1);
+      const dashoffset = circumference * (1 - ratio);
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ref: forwardedRef,
+          className: classNames("dsx-sidebar__menu-badge dsx-sidebar__menu-badge--ring", className),
+          "data-slot": "sidebar-menu-badge",
+          "data-variant": "ring",
+          ...getSidebarDataAttributes(expanded, collapsible),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", "aria-hidden": "true", focusable: "false", children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "dsx-sidebar__menu-badge-ring-track",
+                  cx: "9",
+                  cy: "9",
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: "2"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "dsx-sidebar__menu-badge-ring-fill",
+                  cx: "9",
+                  cy: "9",
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: dashoffset,
+                  transform: "rotate(-90 9 9)"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "dsx-sidebar__menu-badge-ring-label", "aria-hidden": "true", children: `${value}/${max}` }),
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: `${value} of ${max}` })
+          ]
+        }
+      );
     }
-  );
-});
+    if (variant === "accent") {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: forwardedRef,
+          className: classNames("dsx-sidebar__menu-badge dsx-sidebar__menu-badge--accent", className),
+          "data-slot": "sidebar-menu-badge",
+          "data-variant": "accent",
+          ...getSidebarDataAttributes(expanded, collapsible),
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: forwardedRef,
+        className: classNames("dsx-sidebar__menu-badge dsx-badge", className),
+        "data-slot": "sidebar-menu-badge",
+        "data-variant": "secondary",
+        ...getSidebarDataAttributes(expanded, collapsible),
+        ...props,
+        children
+      }
+    );
+  }
+);
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
 const SidebarMenuAction = React.forwardRef((props, forwardedRef) => {
   const { className, asChild = false, type = "button", ...propsWithoutDefaults } = extractProps(props, sidebarMenuActionPropDefs);
@@ -736,7 +911,7 @@ const SidebarMenuAction = React.forwardRef((props, forwardedRef) => {
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
 const SidebarMenuButton = React.forwardRef((props, forwardedRef) => {
-  const { children, className: propClassName, isActive = false, asChild = false, type = "button", ...propsWithoutDefaults } = props;
+  const { children, className: propClassName, isActive = false, asChild = false, type = "button", tooltip: tooltipProp, ...propsWithoutDefaults } = props;
   const Comp = asChild ? Slot : "button";
   const { expanded, collapsible, isMobile } = useSidebar();
   const { asChild: _asChild, className, ...menuButtonProps } = extractProps(
@@ -753,10 +928,11 @@ const SidebarMenuButton = React.forwardRef((props, forwardedRef) => {
     (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", { className: "dsx-sidebar__menu-button-text", "data-slot": "sidebar-menu-button-text", children: child }) : child
   );
   const label = React.useMemo(() => {
+    if (tooltipProp !== void 0) return tooltipProp;
     if (asChild) return "";
     return React.Children.toArray(children).filter((c) => typeof c === "string" || typeof c === "number").join("");
-  }, [children, asChild]);
-  const showTooltip = !asChild && collapsible === "icon" && !expanded && !isMobile && label !== "";
+  }, [children, asChild, tooltipProp]);
+  const showTooltip = collapsible === "icon" && !expanded && !isMobile && label !== "";
   const buttonRef = React.useRef(null);
   const mergedRef = useMergedRef(buttonRef, forwardedRef);
   useAutoScroll(isActive, buttonRef);
@@ -808,16 +984,18 @@ const SidebarMenuSkeleton = React.forwardRef((props, forwardedRef) => {
           "span",
           {
             "aria-hidden": "true",
-            className: "dsx-sidebar__menu-skeleton-icon dsx-skeleton dsx-skeleton--circle",
-            "data-slot": "sidebar-menu-skeleton-icon"
+            className: "dsx-sidebar__menu-skeleton-icon dsx-skeleton",
+            "data-slot": "sidebar-menu-skeleton-icon",
+            "data-shape": "circle"
           }
         ) : null,
         /* @__PURE__ */ jsx(
           "span",
           {
             "aria-hidden": "true",
-            className: "dsx-sidebar__menu-skeleton-label dsx-skeleton dsx-skeleton--text-line",
-            "data-slot": "sidebar-menu-skeleton-label"
+            className: "dsx-sidebar__menu-skeleton-label dsx-skeleton",
+            "data-slot": "sidebar-menu-skeleton-label",
+            "data-shape": "text-line"
           }
         )
       ]
@@ -836,7 +1014,9 @@ const SidebarMenuSub = React.forwardRef(
         if (e.defaultPrevented) return;
         handleMenuKeyboardNav(subRef.current, ".dsx-sidebar__menu-sub-button", e, () => {
           const parentMenuItem = subRef.current?.closest(".dsx-sidebar__menu-item");
-          const parentButton = parentMenuItem?.querySelector(".dsx-sidebar__menu-button");
+          const parentButton = parentMenuItem?.querySelector(
+            ".dsx-sidebar__menu-sub-trigger, .dsx-sidebar__menu-button"
+          );
           if (parentButton) {
             parentButton.focus();
           }
@@ -920,6 +1100,205 @@ const SidebarMenuSubButton = React.forwardRef((props, forwardedRef) => {
   return button;
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+const SidebarMenuSubTrigger = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className: propClassName,
+    isActive = false,
+    asChild = false,
+    type = "button",
+    tooltip: tooltipProp,
+    mode: modeProp,
+    hoverOpenDelay = 150,
+    hoverCloseDelay = 250,
+    openOnActive: openOnActiveProp,
+    open = false,
+    onOpenChange,
+    showChevron = true,
+    onClick,
+    onKeyDown,
+    onPointerEnter,
+    onPointerLeave,
+    ...propsWithoutDefaults
+  } = props;
+  const Comp = asChild ? Slot : "button";
+  const { expanded, collapsible, isMobile, defaultSubmenuMode, submenuOpenOnActive } = useSidebar();
+  const mode = modeProp ?? defaultSubmenuMode;
+  const openOnActive = openOnActiveProp ?? submenuOpenOnActive;
+  const { asChild: _asChild, className, ...triggerProps } = extractProps(
+    {
+      ...propsWithoutDefaults,
+      className: propClassName,
+      isActive,
+      asChild
+    },
+    sidebarMenuSubTriggerPropDefs
+  );
+  const openRef = React.useRef(open);
+  openRef.current = open;
+  const onOpenChangeRef = React.useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const timersRef = React.useRef({});
+  const buttonRef = React.useRef(null);
+  const mergedRef = useMergedRef(buttonRef, forwardedRef);
+  React.useEffect(() => {
+    const timers = timersRef.current;
+    return () => {
+      if (timers.open) clearTimeout(timers.open);
+      if (timers.close) clearTimeout(timers.close);
+    };
+  }, []);
+  const isCoarsePointer = React.useCallback(() => {
+    return typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches;
+  }, []);
+  const scheduleOpen = React.useCallback(
+    (delay) => {
+      const timers = timersRef.current;
+      if (timers.close) {
+        clearTimeout(timers.close);
+        timers.close = void 0;
+      }
+      if (openRef.current) return;
+      if (timers.open) clearTimeout(timers.open);
+      timers.open = setTimeout(() => {
+        timers.open = void 0;
+        onOpenChangeRef.current?.(true);
+      }, delay);
+    },
+    []
+  );
+  const scheduleClose = React.useCallback(
+    (delay) => {
+      const timers = timersRef.current;
+      if (timers.open) {
+        clearTimeout(timers.open);
+        timers.open = void 0;
+      }
+      if (!openRef.current) return;
+      if (timers.close) clearTimeout(timers.close);
+      timers.close = setTimeout(() => {
+        timers.close = void 0;
+        onOpenChangeRef.current?.(false);
+      }, delay);
+    },
+    []
+  );
+  React.useEffect(() => {
+    if (mode !== "hover" || isCoarsePointer()) return;
+    const item = buttonRef.current?.closest(".dsx-sidebar__menu-item");
+    if (!item) return;
+    const cancelClose = () => {
+      const timers = timersRef.current;
+      if (timers.close) {
+        clearTimeout(timers.close);
+        timers.close = void 0;
+      }
+    };
+    const leaveItem = () => scheduleClose(hoverCloseDelay);
+    item.addEventListener("pointerenter", cancelClose);
+    item.addEventListener("pointerleave", leaveItem);
+    return () => {
+      item.removeEventListener("pointerenter", cancelClose);
+      item.removeEventListener("pointerleave", leaveItem);
+    };
+  }, [mode, hoverCloseDelay, scheduleClose, isCoarsePointer]);
+  const content = asChild ? children : React.Children.map(
+    children,
+    (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", { className: "dsx-sidebar__menu-button-text", "data-slot": "sidebar-menu-button-text", children: child }) : child
+  );
+  const label = React.useMemo(() => {
+    if (tooltipProp !== void 0) return tooltipProp;
+    if (asChild) return "";
+    return React.Children.toArray(children).filter((c) => typeof c === "string" || typeof c === "number").join("");
+  }, [children, asChild, tooltipProp]);
+  const showTooltip = collapsible === "icon" && !expanded && !isMobile && label !== "";
+  useAutoScroll(isActive, buttonRef);
+  React.useEffect(() => {
+    if (!openOnActive || openRef.current) return;
+    const item = buttonRef.current?.closest(".dsx-sidebar__menu-item");
+    if (item?.querySelector('.dsx-sidebar__menu-sub-button[data-active="true"]')) {
+      onOpenChangeRef.current?.(true);
+    }
+  }, [openOnActive]);
+  const focusFirstSubButton = React.useCallback(() => {
+    const item = buttonRef.current?.closest(".dsx-sidebar__menu-item");
+    const first = item?.querySelector(".dsx-sidebar__menu-sub-button");
+    if (first) {
+      first.focus();
+      return true;
+    }
+    return false;
+  }, []);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!openRef.current) onOpenChangeRef.current?.(true);
+        requestAnimationFrame(() => focusFirstSubButton());
+      } else if (e.key === "ArrowDown" && openRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+        focusFirstSubButton();
+      } else if (e.key === "ArrowLeft" && openRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+        onOpenChangeRef.current?.(false);
+      }
+    },
+    [onKeyDown, focusFirstSubButton]
+  );
+  const button = /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ref: mergedRef,
+      ...getSidebarDataAttributes(expanded, collapsible),
+      "data-active": isActive ? "true" : void 0,
+      "aria-current": isActive ? "page" : void 0,
+      "aria-expanded": open,
+      "data-state": open ? "open" : "closed",
+      "data-slot": "sidebar-menu-sub-trigger",
+      className: classNames("dsx-sidebar__menu-sub-trigger dsx-button", className),
+      ...triggerProps,
+      ...!asChild ? { type } : {},
+      onClick: (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) onOpenChangeRef.current?.(!openRef.current);
+      },
+      onKeyDown: handleKeyDown,
+      onPointerEnter: (e) => {
+        onPointerEnter?.(e);
+        if (mode === "hover" && !isCoarsePointer()) scheduleOpen(hoverOpenDelay);
+      },
+      onPointerLeave: (e) => {
+        onPointerLeave?.(e);
+        if (mode === "hover" && !isCoarsePointer()) scheduleClose(hoverCloseDelay);
+      },
+      children: [
+        content,
+        showChevron ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "chevron-right",
+            size: "sm",
+            className: "dsx-sidebar__menu-sub-trigger-chevron",
+            "data-slot": "sidebar-menu-sub-trigger-chevron"
+          }
+        ) : null
+      ]
+    }
+  );
+  if (showTooltip) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: label })
+    ] });
+  }
+  return button;
+});
+SidebarMenuSubTrigger.displayName = "SidebarMenuSubTrigger";
 const SidebarSeparator = React.forwardRef(({ className, ...props }, forwardedRef) => {
   const { expanded, collapsible } = useSidebar();
   return /* @__PURE__ */ jsx(
@@ -937,12 +1316,29 @@ const SidebarSeparator = React.forwardRef(({ className, ...props }, forwardedRef
 });
 SidebarSeparator.displayName = "SidebarSeparator";
 const SidebarTrigger = React.forwardRef(
-  ({ className, collapsedLabel = "Expand sidebar", expandedLabel = "Collapse sidebar", ...props }, forwardedRef) => {
-    const { expanded, setExpanded, sidebarId, collapsible: contextCollapsible, manualToggleRef, autoExpandedRef, triggerRef } = useSidebar();
+  ({ className, collapsedLabel = "Expand sidebar", expandedLabel = "Collapse sidebar", iconOnly = false, ...props }, forwardedRef) => {
+    const {
+      expanded,
+      pinnedExpanded,
+      setExpanded,
+      setPreviewExpanded,
+      previewBlockedRef,
+      previewExpanded,
+      hoverExpand,
+      sidebarId,
+      collapsible: contextCollapsible,
+      manualToggleRef,
+      triggerRef,
+      isMobile,
+      mobile
+    } = useSidebar();
     const localCollapsible = React.useContext(SidebarLocalContext);
     const collapsible = localCollapsible ?? contextCollapsible;
     const sidebarDataAttributes = getSidebarDataAttributes(expanded, collapsible);
-    if (collapsible === "none") {
+    const isDockingPreview = hoverExpand && previewExpanded && !pinnedExpanded;
+    const isDockingPinned = hoverExpand && pinnedExpanded;
+    const triggerLabel = isDockingPreview ? "Pin sidebar" : isDockingPinned ? "Unpin sidebar" : expanded ? expandedLabel : collapsedLabel;
+    if (collapsible === "none" || isMobile && mobile === "sheet") {
       return null;
     }
     const localRef = React.useRef(null);
@@ -965,7 +1361,7 @@ const SidebarTrigger = React.forwardRef(
         ...props,
         ref: mergedRef,
         type: props.type ?? "button",
-        "aria-label": expanded ? expandedLabel : collapsedLabel,
+        "aria-label": triggerLabel,
         "aria-expanded": expanded,
         "aria-controls": sidebarId,
         className: classNames("dsx-sidebar__trigger dsx-button", className),
@@ -975,14 +1371,17 @@ const SidebarTrigger = React.forwardRef(
           props.onClick?.(event);
           if (!event.defaultPrevented) {
             manualToggleRef.current = true;
-            autoExpandedRef.current = false;
             triggerRef.current = localRef.current;
+            if (pinnedExpanded) {
+              previewBlockedRef.current = true;
+              setPreviewExpanded(false);
+            }
             setExpanded((current) => !current);
           }
         },
         children: [
-          /* @__PURE__ */ jsx("span", { className: "dsx-button__icon", "data-slot": "sidebar-trigger-icon", ...sidebarDataAttributes, children: expanded ? /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: "sm" }) : /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm" }) }),
-          /* @__PURE__ */ jsx("span", { className: "dsx-sidebar__trigger-label", "data-slot": "sidebar-trigger-label", ...sidebarDataAttributes, children: expanded ? expandedLabel : collapsedLabel })
+          /* @__PURE__ */ jsx("span", { className: "dsx-button__icon", "data-slot": "sidebar-trigger-icon", ...sidebarDataAttributes, children: hoverExpand ? /* @__PURE__ */ jsx(Icon, { name: pinnedExpanded ? "panel-left" : "panel-left-dashed", size: "sm" }) : expanded ? /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: "sm" }) : /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm" }) }),
+          iconOnly ? /* @__PURE__ */ jsx(VisuallyHidden, { className: "dsx-sidebar__trigger-label", "data-slot": "sidebar-trigger-label", children: triggerLabel }) : /* @__PURE__ */ jsx("span", { className: "dsx-sidebar__trigger-label", "data-slot": "sidebar-trigger-label", ...sidebarDataAttributes, children: triggerLabel })
         ]
       }
     );
@@ -1024,6 +1423,7 @@ const Sidebar = Object.assign(SidebarRoot, {
   MenuSub: SidebarMenuSub,
   MenuSubItem: SidebarMenuSubItem,
   MenuSubButton: SidebarMenuSubButton,
+  MenuSubTrigger: SidebarMenuSubTrigger,
   Separator: SidebarSeparator,
   Trigger: SidebarTrigger,
   SkipLink: SidebarSkipLink
@@ -1048,6 +1448,7 @@ export {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
+  SidebarMenuSubTrigger,
   SidebarProvider,
   SidebarRail,
   SidebarRoot,