@inf-monkeys-tech/monkeys-design 2.0.0 → 2.0.1

package/dist/components/navigation-sidebar/index.mjs

@@ -1,5 +1,5 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { forwardRef, useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from 'react';
+import { forwardRef, useRef, useState, useMemo, useCallback, useEffect, createContext, Fragment as Fragment$1, useId, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -1614,6 +1614,30 @@ function MoreIcon2() {
     }
   );
 }
+function DisclosureIcon({ expanded }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 20 20",
+      className: cn(
+        "h-4 w-4 transition-transform motion-reduce:transition-none",
+        expanded && "rotate-180"
+      ),
+      fill: "none",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "m6 8 4 4 4-4",
+          stroke: "currentColor",
+          strokeWidth: "1.6",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 function assignRef(ref, node) {
   if (typeof ref === "function") {
     ref(node);
@@ -1769,6 +1793,94 @@ function resolveNavigationTreeClassNames(classNames) {
     )
   };
 }
+function entryClassName({
+  item,
+  active,
+  collapsed,
+  mobile,
+  embedded = false,
+  appearance,
+  classNames,
+  domClassName
+}) {
+  return cn(
+    "group/navigation-item relative flex w-full min-w-0 items-center gap-3 rounded-[var(--radius)] border border-transparent text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+    appearance.itemHeight,
+    appearance.itemPadding,
+    embedded ? "min-h-0 self-stretch border-0 bg-transparent text-inherit hover:bg-transparent hover:text-inherit" : active ? activeVariantClassName(appearance.activeVariant) : "text-muted-foreground hover:border-border/70 hover:bg-muted/60 hover:text-foreground",
+    collapsed && !mobile && "justify-center px-0",
+    item.disabled && "pointer-events-none opacity-50",
+    classNames?.item,
+    active && classNames?.itemActive,
+    mobile && classNames?.mobileItem,
+    domClassName,
+    item.className
+  );
+}
+function EntryContent({
+  item,
+  collapsed,
+  mobile,
+  classNames,
+  endIndicator
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasRenderableNode(item.icon) ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex size-5 shrink-0 items-center justify-center [&_svg]:size-full",
+          classNames?.itemIcon
+        ),
+        "aria-hidden": "true",
+        children: item.icon
+      }
+    ) : null,
+    mobile || !collapsed ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "flex min-w-0 flex-1 flex-col",
+          classNames?.itemContent
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "min-w-0 truncate font-semibold",
+                classNames?.itemLabel
+              ),
+              children: item.label
+            }
+          ),
+          hasRenderableNode(item.description) ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "mt-0.5 truncate text-xs font-normal",
+                classNames?.itemDescription
+              ),
+              children: item.description
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    (mobile || !collapsed) && hasRenderableNode(item.meta) ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "shrink-0 text-xs text-muted-foreground",
+          classNames?.itemMeta
+        ),
+        children: item.meta
+      }
+    ) : null,
+    (mobile || !collapsed) && hasRenderableNode(item.endContent) ? /* @__PURE__ */ jsx("span", { className: cn("shrink-0", classNames?.itemEndContent), children: item.endContent }) : null,
+    (mobile || !collapsed) && hasRenderableNode(endIndicator) ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center justify-center", children: endIndicator }) : null
+  ] });
+}
 function EntryButton({
   item,
   active,
@@ -1777,7 +1889,11 @@ function EntryButton({
   appearance,
   classNames,
   mobile = false,
-  onSelect
+  embedded = false,
+  onSelect,
+  ariaControls,
+  ariaExpanded,
+  endIndicator
 }) {
   const ItemComponent = itemAs ?? (item.href ? "a" : "button");
   const title = getNodeTitle(item.label, item.title);
@@ -1794,90 +1910,90 @@ function EntryButton({
     ...domProps,
     ...item.to ? { to: item.to } : {},
     ...item.href ? { href: item.href } : {},
-    ...ItemComponent === "button" ? { type: "button" } : {},
+    ...ItemComponent === "button" ? { type: "button", disabled: item.disabled } : {},
     title,
     "aria-current": active ? "page" : void 0,
     "aria-disabled": item.disabled || void 0,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
     tabIndex: item.disabled ? -1 : domProps.tabIndex,
     onClick: handleClick
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     ItemComponent,
     {
       ...componentProps,
       "data-navigation-sidebar-item-id": item.id,
       "data-active": active ? "true" : "false",
-      className: cn(
-        "group/navigation-item relative flex w-full min-w-0 items-center gap-3 rounded-[var(--radius)] border border-transparent text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
-        appearance.itemHeight,
-        appearance.itemPadding,
-        active ? activeVariantClassName(appearance.activeVariant) : "text-muted-foreground hover:border-border/70 hover:bg-muted/60 hover:text-foreground",
-        collapsed && !mobile && "justify-center px-0",
-        item.disabled && "pointer-events-none opacity-50",
-        classNames?.item,
-        active && classNames?.itemActive,
-        mobile && classNames?.mobileItem,
-        domProps.className,
-        item.className
-      ),
-      children: [
-        hasRenderableNode(item.icon) ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "flex size-5 shrink-0 items-center justify-center [&_svg]:size-full",
-              classNames?.itemIcon
-            ),
-            "aria-hidden": "true",
-            children: item.icon
-          }
-        ) : null,
-        mobile || !collapsed ? /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: cn(
-              "flex min-w-0 flex-1 flex-col",
-              classNames?.itemContent
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "min-w-0 truncate font-semibold",
-                    classNames?.itemLabel
-                  ),
-                  children: item.label
-                }
-              ),
-              hasRenderableNode(item.description) ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "mt-0.5 truncate text-xs font-normal",
-                    classNames?.itemDescription
-                  ),
-                  children: item.description
-                }
-              ) : null
-            ]
-          }
-        ) : null,
-        (mobile || !collapsed) && hasRenderableNode(item.meta) ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "shrink-0 text-xs text-muted-foreground",
-              classNames?.itemMeta
-            ),
-            children: item.meta
-          }
-        ) : null,
-        (mobile || !collapsed) && hasRenderableNode(item.endContent) ? /* @__PURE__ */ jsx("span", { className: cn("shrink-0", classNames?.itemEndContent), children: item.endContent }) : null
-      ]
+      "data-expanded": ariaExpanded === void 0 ? void 0 : String(ariaExpanded),
+      className: entryClassName({
+        item,
+        active,
+        collapsed,
+        mobile,
+        embedded,
+        appearance,
+        classNames,
+        domClassName: domProps.className
+      }),
+      children: /* @__PURE__ */ jsx(
+        EntryContent,
+        {
+          item,
+          collapsed,
+          mobile,
+          classNames,
+          endIndicator
+        }
+      )
     }
   );
 }
+function EntryPresentation({
+  item,
+  appearance,
+  classNames
+}) {
+  const domProps = item.domProps ?? {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...domProps,
+      "data-navigation-sidebar-item-id": item.id,
+      "aria-disabled": item.disabled || void 0,
+      title: getNodeTitle(item.label, item.title),
+      className: entryClassName({
+        item,
+        active: false,
+        collapsed: false,
+        mobile: true,
+        embedded: true,
+        appearance,
+        classNames,
+        domClassName: domProps.className
+      }),
+      children: /* @__PURE__ */ jsx(
+        EntryContent,
+        {
+          item,
+          collapsed: false,
+          mobile: true,
+          classNames
+        }
+      )
+    }
+  );
+}
+function routeRowClassName({
+  active,
+  appearance
+}) {
+  return cn(
+    "flex w-full min-w-0 items-center gap-0.5 rounded-[var(--radius)] border border-transparent pr-1 text-sm transition-[background-color,border-color,color,box-shadow] motion-reduce:transition-none",
+    appearance.itemHeight,
+    active ? activeVariantClassName(appearance.activeVariant) : "text-muted-foreground hover:border-border/70 hover:bg-muted/60 hover:text-foreground"
+  );
+}
 function filterCatalogItems(items, activeFilterId) {
   if (!activeFilterId) return items;
   return items.filter(
@@ -2009,7 +2125,9 @@ function ChildEntry({
   active,
   interactive,
   onSelect,
-  classNames
+  appearance,
+  classNames,
+  embedded = false
 }) {
   const Component = interactive ? "button" : "div";
   const domProps = child.domProps ?? {};
@@ -2024,8 +2142,11 @@ function ChildEntry({
       title: getNodeTitle(child.label, child.title),
       disabled: interactive ? child.disabled : void 0,
       className: cn(
-        "flex min-h-9 w-full min-w-0 items-center gap-2 rounded-md border border-transparent px-2 text-left text-xs font-medium outline-none transition-[background-color,border-color,color] focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
-        active ? "border-primary/35 bg-primary/10 text-primary" : "text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground",
+        "flex w-full min-w-0 flex-1 items-center gap-3 rounded-[var(--radius)] border border-transparent text-left text-sm font-semibold outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        appearance.itemHeight,
+        appearance.itemPadding,
+        "pl-11",
+        embedded ? "min-h-0 self-stretch border-0 bg-transparent text-inherit hover:bg-transparent hover:text-inherit" : active ? activeVariantClassName(appearance.activeVariant) : "text-muted-foreground hover:border-border/70 hover:bg-muted/60 hover:text-foreground",
         child.disabled && "pointer-events-none opacity-50",
         classNames?.childItem,
         active && classNames?.childItemActive,
@@ -2037,7 +2158,7 @@ function ChildEntry({
         hasRenderableNode(child.icon) ? /* @__PURE__ */ jsx(
           "span",
           {
-            className: "flex size-4 shrink-0 items-center justify-center",
+            className: "flex size-5 shrink-0 items-center justify-center [&_svg]:size-full",
             "aria-hidden": "true",
             children: child.icon
           }
@@ -2047,29 +2168,167 @@ function ChildEntry({
     }
   );
 }
+function RouteActions({
+  itemId,
+  actions,
+  kind,
+  className,
+  mobile = false
+}) {
+  if (!hasRenderableNode(actions)) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-navigation-sidebar-item-actions": kind === "item" ? itemId : void 0,
+      "data-navigation-sidebar-child-actions": kind === "child" ? itemId : void 0,
+      "data-navigation-sidebar-actions-mobile": mobile ? "true" : void 0,
+      className: cn(
+        "ml-auto flex shrink-0 items-center gap-1 [&>button]:border-0 [&>button]:bg-transparent [&>button]:shadow-none [&>button:hover]:bg-muted",
+        className
+      ),
+      children: actions
+    }
+  );
+}
+function isDisclosureRouteItem(item) {
+  return item.interaction === "disclosure";
+}
+function validateRouteItems(routeItems) {
+  const itemIds = /* @__PURE__ */ new Set();
+  const childIds = /* @__PURE__ */ new Set();
+  const collapsibleItemIds = /* @__PURE__ */ new Set();
+  for (const item of routeItems) {
+    const itemId = item.id;
+    if (itemIds.has(itemId)) {
+      throw new RangeError(
+        `NavigationSidebar route item ids must be unique; received "${itemId}" more than once.`
+      );
+    }
+    itemIds.add(itemId);
+    const disclosure = isDisclosureRouteItem(item);
+    if (disclosure) {
+      if (!item.children.length) {
+        throw new RangeError(
+          `NavigationSidebar disclosure item "${item.id}" must include at least one child.`
+        );
+      }
+      if (item.href !== void 0 || item.to !== void 0 || item.onClick !== void 0) {
+        throw new TypeError(
+          `NavigationSidebar disclosure item "${itemId}" cannot define href, to, or onClick.`
+        );
+      }
+      collapsibleItemIds.add(item.id);
+    } else if (item.childrenPresentation === "collapsible") {
+      if (!item.children?.length) {
+        throw new RangeError(
+          `NavigationSidebar collapsible route item "${item.id}" must include at least one child.`
+        );
+      }
+      collapsibleItemIds.add(item.id);
+    }
+    for (const child of item.children ?? []) {
+      if (childIds.has(child.id)) {
+        throw new RangeError(
+          `NavigationSidebar route child ids must be unique; received "${child.id}" more than once.`
+        );
+      }
+      childIds.add(child.id);
+    }
+  }
+  return collapsibleItemIds;
+}
+function RouteChildrenToggle({
+  item,
+  expanded,
+  controls,
+  label,
+  onToggle,
+  classNames
+}) {
+  const itemLabel = typeof item.label === "string" ? item.label : item.id;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled: item.disabled,
+      "aria-expanded": expanded,
+      "aria-controls": controls,
+      "aria-label": `${label}: ${itemLabel}`,
+      title: label,
+      "data-navigation-sidebar-disclosure-trigger": item.id,
+      className: cn(
+        "inline-flex h-8 w-7 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-muted-foreground shadow-none outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        classNames?.childMenuTrigger
+      ),
+      onClick: onToggle,
+      children: /* @__PURE__ */ jsx(DisclosureIcon, { expanded })
+    }
+  );
+}
 function CollapsedChildMenu({
   item,
   activeChildId,
   label,
   onChildSelect,
-  classNames
+  classNames,
+  appearance,
+  triggerVariant = "submenu",
+  mobile = false
 }) {
   const enabledChildren = (item.children ?? []).filter(
     (child) => !child.disabled
   );
-  if (enabledChildren.length === 0) return null;
+  if (!item.children?.length) return null;
+  if (triggerVariant === "submenu" && (!onChildSelect || enabledChildren.length === 0))
+    return null;
+  const itemLabel = typeof item.label === "string" ? item.label : item.id;
+  const itemTriggerDisabled = Boolean(item.disabled) || !onChildSelect || enabledChildren.length === 0;
+  const domProps = item.domProps ?? {};
   return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: triggerVariant === "item" && appearance ? /* @__PURE__ */ jsx(
       "button",
       {
+        ...domProps,
         type: "button",
+        disabled: itemTriggerDisabled,
+        "aria-label": `${label}: ${itemLabel}`,
+        title: label,
+        "data-navigation-sidebar-item-id": item.id,
+        "data-navigation-sidebar-disclosure-menu": "true",
+        className: entryClassName({
+          item,
+          active: false,
+          collapsed: !mobile,
+          mobile,
+          appearance,
+          classNames,
+          domClassName: domProps.className
+        }),
+        children: /* @__PURE__ */ jsx(
+          EntryContent,
+          {
+            item,
+            collapsed: !mobile,
+            mobile,
+            classNames,
+            endIndicator: mobile ? /* @__PURE__ */ jsx(DisclosureIcon, { expanded: false }) : void 0
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: triggerVariant === "disclosure" ? itemTriggerDisabled : void 0,
+        "data-navigation-sidebar-disclosure-trigger": triggerVariant === "disclosure" ? item.id : void 0,
         className: cn(
-          "inline-flex h-8 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+          "inline-flex h-8 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-muted-foreground shadow-none outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          triggerVariant === "disclosure" ? "w-7" : "w-6",
           classNames?.childMenuTrigger
         ),
-        "aria-label": `${label}: ${typeof item.label === "string" ? item.label : item.id}`,
+        "aria-label": `${label}: ${itemLabel}`,
         title: label,
-        children: /* @__PURE__ */ jsx(MoreIcon2, {})
+        children: triggerVariant === "disclosure" ? /* @__PURE__ */ jsx(DisclosureIcon, { expanded: false }) : /* @__PURE__ */ jsx(MoreIcon2, {})
       }
     ) }),
     /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
@@ -2092,7 +2351,7 @@ function CollapsedChildMenu({
               "flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
               child.id === activeChildId && "bg-accent text-accent-foreground"
             ),
-            onSelect: () => onChildSelect(child, item),
+            onSelect: () => onChildSelect?.(child, item),
             children: [
               hasRenderableNode(child.icon) ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: child.icon }) : null,
               /* @__PURE__ */ jsx("span", { className: "truncate", children: child.label })
@@ -2113,22 +2372,81 @@ function RouteContent({
     routeItems,
     activeItemId,
     activeChildId,
+    expandedItemIds,
+    defaultExpandedItemIds = [],
     itemAs,
     onItemSelect,
     onChildSelect,
+    onExpandedItemIdsChange,
     collapsedChildMenuLabel = "Open submenu",
+    disclosureLabel = "Toggle submenu",
     ariaLabel,
     classNames
   } = props;
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ul", { className: cn("grid list-none gap-2 p-0", classNames?.list), children: routeItems.map((item) => {
-    const active = item.id === activeItemId;
+  const disclosureId = useId();
+  const collapsibleItemIds = useMemo(
+    () => validateRouteItems(routeItems),
+    [routeItems]
+  );
+  const [internalExpandedItemIds, setInternalExpandedItemIds] = useState(
+    () => defaultExpandedItemIds
+  );
+  const isExpandedControlled = expandedItemIds !== void 0;
+  const resolvedExpandedItemIds = expandedItemIds ?? internalExpandedItemIds;
+  const normalizedExpandedItemIds = useMemo(
+    () => resolvedExpandedItemIds.filter(
+      (itemId) => collapsibleItemIds.has(itemId)
+    ),
+    [collapsibleItemIds, resolvedExpandedItemIds]
+  );
+  const expandedItemIdSet = useMemo(
+    () => new Set(normalizedExpandedItemIds),
+    [normalizedExpandedItemIds]
+  );
+  const toggleItemExpanded = useCallback(
+    (item) => {
+      if (item.disabled || !collapsibleItemIds.has(item.id)) return;
+      const nextExpandedItemIds = expandedItemIdSet.has(item.id) ? normalizedExpandedItemIds.filter((itemId) => itemId !== item.id) : [...normalizedExpandedItemIds, item.id];
+      if (!isExpandedControlled) {
+        setInternalExpandedItemIds(nextExpandedItemIds);
+      }
+      onExpandedItemIdsChange?.(nextExpandedItemIds);
+    },
+    [
+      collapsibleItemIds,
+      expandedItemIdSet,
+      isExpandedControlled,
+      normalizedExpandedItemIds,
+      onExpandedItemIdsChange
+    ]
+  );
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ul", { className: cn("grid list-none gap-2 p-0", classNames?.list), children: routeItems.map((item, itemIndex) => {
+    const disclosure = isDisclosureRouteItem(item);
+    const active = !disclosure && item.id === activeItemId;
+    const hasChildren = Boolean(item.children?.length);
+    const childrenCollapsible = collapsibleItemIds.has(item.id);
+    const childrenExpanded = !childrenCollapsible || expandedItemIdSet.has(item.id);
+    const showItemActions = !collapsed && hasRenderableNode(item.actions);
+    const compoundItemRow = collapsed && hasChildren && Boolean(onChildSelect) || !collapsed && childrenCollapsible && !disclosure || showItemActions;
+    const childListId = `${disclosureId}-route-children-${itemIndex}`;
     return /* @__PURE__ */ jsxs("li", { className: "grid min-w-0 gap-1", children: [
-      /* @__PURE__ */ jsxs(
+      collapsed && disclosure ? /* @__PURE__ */ jsx(
+        CollapsedChildMenu,
+        {
+          item,
+          activeChildId,
+          label: collapsedChildMenuLabel,
+          onChildSelect,
+          classNames,
+          appearance,
+          triggerVariant: "item"
+        }
+      ) : /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(
-            collapsed && Boolean(item.children?.length) && Boolean(onChildSelect) && "flex min-w-0 items-center gap-0.5"
-          ),
+          "data-navigation-sidebar-item-row": compoundItemRow ? item.id : void 0,
+          "data-active": compoundItemRow ? String(active) : void 0,
+          className: compoundItemRow ? routeRowClassName({ active, appearance }) : void 0,
           children: [
             /* @__PURE__ */ jsx(
               EntryButton,
@@ -2136,12 +2454,25 @@ function RouteContent({
                 item,
                 active,
                 collapsed,
-                itemAs,
+                embedded: compoundItemRow,
+                itemAs: disclosure ? "button" : itemAs,
                 appearance,
                 classNames,
-                onSelect: onItemSelect ? () => onItemSelect(item) : void 0
+                onSelect: disclosure ? () => toggleItemExpanded(item) : onItemSelect ? () => onItemSelect(item) : void 0,
+                ariaControls: !collapsed && childrenCollapsible && disclosure ? childListId : void 0,
+                ariaExpanded: !collapsed && childrenCollapsible && disclosure ? childrenExpanded : void 0,
+                endIndicator: !collapsed && disclosure && !showItemActions ? /* @__PURE__ */ jsx(DisclosureIcon, { expanded: childrenExpanded }) : void 0
               }
             ),
+            showItemActions ? /* @__PURE__ */ jsx(
+              RouteActions,
+              {
+                itemId: item.id,
+                actions: item.actions,
+                kind: "item",
+                className: classNames?.itemActions
+              }
+            ) : null,
             collapsed && onChildSelect ? /* @__PURE__ */ jsx(
               CollapsedChildMenu,
               {
@@ -2151,28 +2482,71 @@ function RouteContent({
                 onChildSelect,
                 classNames
               }
+            ) : null,
+            !collapsed && childrenCollapsible && (!disclosure || showItemActions) ? /* @__PURE__ */ jsx(
+              RouteChildrenToggle,
+              {
+                item,
+                expanded: childrenExpanded,
+                controls: childListId,
+                label: disclosureLabel,
+                onToggle: () => toggleItemExpanded(item),
+                classNames
+              }
             ) : null
           ]
         }
       ),
-      !collapsed && item.children?.length ? /* @__PURE__ */ jsx(
+      !collapsed && hasChildren ? /* @__PURE__ */ jsx(
         "ul",
         {
+          id: childListId,
+          hidden: !childrenExpanded,
+          style: childrenExpanded ? void 0 : { display: "none" },
           className: cn(
             "ml-5 grid list-none gap-0.5 border-l border-border/70 py-1 pl-3",
             classNames?.childList
           ),
-          children: item.children.map((child) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            ChildEntry,
-            {
-              child,
-              parent: item,
-              active: child.id === activeChildId,
-              interactive: Boolean(onChildSelect),
-              onSelect: onChildSelect,
-              classNames
-            }
-          ) }, child.id))
+          children: item.children?.map((child) => {
+            const hasChildActions = hasRenderableNode(child.actions);
+            const childActive = child.id === activeChildId;
+            const childEntry = /* @__PURE__ */ jsx(
+              ChildEntry,
+              {
+                child,
+                parent: item,
+                active: childActive,
+                interactive: Boolean(onChildSelect),
+                onSelect: onChildSelect,
+                appearance,
+                classNames,
+                embedded: hasChildActions
+              }
+            );
+            return /* @__PURE__ */ jsx("li", { children: hasChildActions ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-navigation-sidebar-child-row": child.id,
+                "data-active": String(childActive),
+                className: routeRowClassName({
+                  active: childActive,
+                  appearance
+                }),
+                children: [
+                  childEntry,
+                  /* @__PURE__ */ jsx(
+                    RouteActions,
+                    {
+                      itemId: child.id,
+                      actions: child.actions,
+                      kind: "child",
+                      className: classNames?.childActions
+                    }
+                  )
+                ]
+              }
+            ) : childEntry }, child.id);
+          })
         }
       ) : null
     ] }, item.id);
@@ -2206,23 +2580,116 @@ function MobileNavigation({
         classNames?.mobileNav,
         props.mobile.className
       ),
-      children: items.map((item) => /* @__PURE__ */ jsx(
-        EntryButton,
-        {
-          item,
-          active: props.kind === "catalog" ? item.active ?? item.id === props.activeItemId : item.id === props.activeItemId,
-          collapsed: false,
-          itemAs: props.itemAs,
-          appearance,
-          classNames: {
-            ...classNames,
-            mobileItem: cn(classNames?.mobileItem, props.mobile?.itemClassName)
+      children: items.map((item) => {
+        const mobileClassNames = {
+          ...classNames,
+          mobileItem: cn(
+            classNames?.mobileItem,
+            props.mobile?.itemClassName
+          )
+        };
+        const routeItem = props.kind === "route" ? item : void 0;
+        const showRouteActions = routeItem !== void 0 && hasRenderableNode(routeItem.actions);
+        if (props.kind === "route" && isDisclosureRouteItem(item)) {
+          return showRouteActions ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-navigation-sidebar-item-row": item.id,
+              "data-active": "false",
+              className: cn(
+                routeRowClassName({ active: false, appearance }),
+                "shrink-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  EntryPresentation,
+                  {
+                    item,
+                    appearance,
+                    classNames: mobileClassNames
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  RouteActions,
+                  {
+                    itemId: item.id,
+                    actions: item.actions,
+                    kind: "item",
+                    className: classNames?.itemActions,
+                    mobile: true
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CollapsedChildMenu,
+                  {
+                    item,
+                    activeChildId: props.activeChildId,
+                    label: props.collapsedChildMenuLabel ?? "Open submenu",
+                    onChildSelect: props.onChildSelect,
+                    classNames: mobileClassNames,
+                    appearance,
+                    triggerVariant: "disclosure",
+                    mobile: true
+                  }
+                )
+              ]
+            },
+            item.id
+          ) : /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+            CollapsedChildMenu,
+            {
+              item,
+              activeChildId: props.activeChildId,
+              label: props.collapsedChildMenuLabel ?? "Open submenu",
+              onChildSelect: props.onChildSelect,
+              classNames: mobileClassNames,
+              appearance,
+              triggerVariant: "item",
+              mobile: true
+            }
+          ) }, item.id);
+        }
+        const active = props.kind === "catalog" ? item.active ?? item.id === props.activeItemId : item.id === props.activeItemId;
+        const entryButton = /* @__PURE__ */ jsx(
+          EntryButton,
+          {
+            item,
+            active,
+            collapsed: false,
+            embedded: showRouteActions,
+            itemAs: props.itemAs,
+            appearance,
+            classNames: mobileClassNames,
+            mobile: true,
+            onSelect: props.kind === "route" && props.onItemSelect ? () => props.onItemSelect?.(item) : void 0
+          }
+        );
+        return showRouteActions && routeItem ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-navigation-sidebar-item-row": item.id,
+            "data-active": String(active),
+            className: cn(
+              routeRowClassName({ active, appearance }),
+              "shrink-0"
+            ),
+            children: [
+              entryButton,
+              /* @__PURE__ */ jsx(
+                RouteActions,
+                {
+                  itemId: routeItem.id,
+                  actions: routeItem.actions,
+                  kind: "item",
+                  className: classNames?.itemActions,
+                  mobile: true
+                }
+              )
+            ]
           },
-          mobile: true,
-          onSelect: props.kind === "route" && props.onItemSelect ? () => props.onItemSelect?.(item) : void 0
-        },
-        item.id
-      ))
+          item.id
+        ) : /* @__PURE__ */ jsx(Fragment$1, { children: entryButton }, item.id);
+      })
     }
   );
 }