@ultraviolet/ui 3.12.2 → 3.13.0

package/dist/components/compositions/Navigation/components/Item/Children.js

@@ -0,0 +1,39 @@
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Stack/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { ItemProvider, init_ItemProvider } from "./ItemProvider.js";
+import { Expandable, init_Expandable } from "../../../../Expandable/index.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/compositions/Navigation/components/Item/Children.tsx
+var ItemChildren;
+var init_Children = __esmMin(() => {
+	init_Expandable();
+	init_Stack();
+	init_NavigationProvider();
+	init_styles_css();
+	init_ItemProvider();
+	ItemChildren = ({ noExpand, type, children, internalExpanded }) => {
+		const context = useNavigation();
+		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+		const { animation, animationType, shouldAnimate } = context;
+		return /* @__PURE__ */ jsx(Fragment, { children: noExpand ? /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Stack, {
+			className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
+			width: animation ? "100%" : void 0,
+			children
+		}) }) : /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Expandable, {
+			animationDuration: 0,
+			opened: internalExpanded,
+			children: /* @__PURE__ */ jsx(Stack, {
+				className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
+				width: animation ? "100%" : void 0,
+				children
+			})
+		}) }) });
+	};
+});
+
+//#endregion
+init_Children();
+export { ItemChildren, init_Children };

package/dist/components/compositions/Navigation/components/Item/Content.d.ts

@@ -0,0 +1,3 @@
+import type { ItemExpandedType } from '../ComponentsTypes';
+export declare const ItemContent: ({ disabled, active, categoryIcon, type, label, hasActiveChildren, labelDescription, noExpand, subLabel, }: Pick<ItemExpandedType, "active" | "categoryIcon" | "disabled" | "hasActiveChildren" | "label" | "labelDescription" | "noExpand" | "subLabel" | "type">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Content.d.ts.map

package/dist/components/compositions/Navigation/components/Item/Content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/compositions/Navigation/components/Item/Content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,eAAO,MAAM,WAAW,gTAwGvB,CAAA"}

package/dist/components/compositions/Navigation/components/Item/Content.js

@@ -0,0 +1,80 @@
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Stack/index.js";
+import { Text, init_Text } from "../../../../Text/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { ItemContext, init_ItemProvider } from "./ItemProvider.js";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DragIcon } from "@ultraviolet/icons/DragIcon";
+
+//#region src/components/compositions/Navigation/components/Item/Content.tsx
+var ItemContent;
+var init_Content = __esmMin(() => {
+	init_Stack();
+	init_Text();
+	init_NavigationProvider();
+	init_styles_css();
+	init_ItemProvider();
+	ItemContent = ({ disabled, active, categoryIcon, type, label, hasActiveChildren, labelDescription, noExpand, subLabel }) => {
+		const context = useNavigation();
+		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+		const { expanded, animation } = context;
+		const hasParents = !!useContext(ItemContext);
+		return /* @__PURE__ */ jsxs(Stack, {
+			alignItems: categoryIcon ? "flex-start" : "center",
+			direction: "row",
+			gap: 1,
+			justifyContent: "center",
+			children: [
+				categoryIcon ? /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					className: navigationStyle.itemCategoryIcon,
+					justifyContent: "center",
+					children: categoryIcon
+				}) : null,
+				type === "pinned" && expanded ? /* @__PURE__ */ jsx(DragIcon, {
+					className: navigationStyle.itemDragIcon,
+					disabled,
+					prominence: "default",
+					sentiment: "neutral",
+					size: "small"
+				}) : null,
+				/* @__PURE__ */ jsxs(Stack, { children: [animation ? null : /* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					className: navigationStyle.itemWrapText({
+						disabled,
+						weak: hasActiveChildren && !noExpand && !disabled && !!active
+					}),
+					"data-animation": animation,
+					disabled,
+					prominence: (categoryIcon || !hasParents) && !active ? "strong" : "default",
+					sentiment: active ? "primary" : "neutral",
+					variant: "bodySmallStrong",
+					whiteSpace: "pre-wrap",
+					children: [label, labelDescription ? /* @__PURE__ */ jsx("span", {
+						className: navigationStyle.itemPadded,
+						children: labelDescription
+					}) : null]
+				}), subLabel && !animation ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: navigationStyle.itemWrapText({
+						disabled,
+						weak: hasActiveChildren && !noExpand && !disabled && !!active
+					}),
+					"data-animation": animation,
+					disabled,
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					whiteSpace: "pre-wrap",
+					children: subLabel
+				}) : null] })
+			]
+		});
+	};
+});
+
+//#endregion
+init_Content();
+export { ItemContent, init_Content };

package/dist/components/compositions/Navigation/components/{Item.d.ts → Item/Item.d.ts}

@@ -1,5 +1,5 @@
-import type { Badge } from '../../../Badge';
-import type { ItemType, PinUnPinType } from '../types';
+import type { Badge } from '../../../../Badge';
+import type { ItemType, PinUnPinType } from '../../types';
 import type { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
 type ItemProps = {
     children?: ReactNode;

package/dist/components/compositions/Navigation/components/Item/Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../../src/components/compositions/Navigation/components/Item/Item.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AACzD,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EAEb,WAAW,EACX,SAAS,EACV,MAAM,OAAO,CAAA;AAMd,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,CAAA;IAC1D,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,GAAG,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAA;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAOD,eAAO,MAAM,IAAI,oWAsShB,CAAA"}

package/dist/components/compositions/Navigation/components/{Item.js → Item/Item.js}

@@ -1,26 +1,30 @@
 'use client';
-import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
-import { Stack, init_Stack } from "../../../Stack/index.js";
-import { Tooltip, init_Tooltip } from "../../../Tooltip/index.js";
-import { init_NavigationProvider, useNavigation } from "../NavigationProvider.js";
-import { init_styles_css, navigationStyle } from "../styles.css.js";
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../../../Tooltip/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
 import { ItemContext, init_ItemProvider } from "./ItemProvider.js";
+import { ItemMenu, init_Menu } from "../Menu/Menu.js";
+import { ItemMenuItem, init_MenuItem } from "../Menu/MenuItem.js";
+import { NestedMenu, init_NestedMenu } from "../Menu/NestedMenu.js";
 import { ItemExpanded, init_ItemExpanded } from "./ItemExpanded.js";
-import { ItemMenu, ItemMenuItem, init_ItemMenu } from "./ItemMenu.js";
 import { Children, isValidElement, memo, useContext, useEffect, useMemo, useRef } from "react";
 import { cn } from "@ultraviolet/utils";
 import { jsx } from "react/jsx-runtime";
 import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
 
-//#region src/components/compositions/Navigation/components/Item.tsx
+//#region src/components/compositions/Navigation/components/Item/Item.tsx
 var onDragStopTrigger, Item;
 var init_Item = __esmMin(() => {
 	init_Stack();
 	init_Tooltip();
 	init_NavigationProvider();
 	init_styles_css();
+	init_Menu();
+	init_MenuItem();
+	init_NestedMenu();
 	init_ItemExpanded();
-	init_ItemMenu();
 	init_ItemProvider();
 	onDragStopTrigger = (event) => {
 		const element = event.currentTarget;
@@ -149,6 +153,29 @@ var init_Item = __esmMin(() => {
 			style,
 			children
 		});
+		if (Children.count(children) > 0 && hasParents) return /* @__PURE__ */ jsx(NestedMenu, {
+			active,
+			badgeSentiment,
+			badgeText,
+			disabled,
+			hasActiveChildren,
+			hasHrefAndNoChildren,
+			href,
+			id,
+			isItemPinned,
+			isPinDisabled,
+			label,
+			labelDescription,
+			noExpand,
+			onClickPinUnpin,
+			onToggle,
+			pinTooltipLocale,
+			rel,
+			shouldShowPinnedButton,
+			style,
+			target,
+			children
+		});
 		if (hasParents) return /* @__PURE__ */ jsx(ItemMenuItem, {
 			active,
 			badgeSentiment,

package/dist/components/compositions/Navigation/components/{ItemExpanded.d.ts → Item/ItemExpanded.d.ts}

@@ -1,3 +1,3 @@
-import type { ItemExpandedType } from './ComponentsTypes';
+import type { ItemExpandedType } from '../ComponentsTypes';
 export declare const ItemExpanded: ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, type, href, rel, id, style, target, label, labelDescription, hasPinnedFeatureAndNoChildren, badgeText, badgeSentiment, isItemPinned, pinTooltipLocale, onClickPinUnpin, isPinDisabled, onToggle, index, onDragStopTrigger, toggle, hasActiveChildren, }: ItemExpandedType) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ItemExpanded.d.ts.map

package/dist/components/compositions/Navigation/components/Item/ItemExpanded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemExpanded.d.ts","sourceRoot":"","sources":["../../../../../../src/components/compositions/Navigation/components/Item/ItemExpanded.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,eAAO,MAAM,YAAY,0aA4MxB,CAAA"}

package/dist/components/compositions/Navigation/components/{ItemExpanded.js → Item/ItemExpanded.js}

@@ -1,104 +1,28 @@
-import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
-import { Stack, init_Stack } from "../../../Stack/index.js";
-import { Text, init_Text } from "../../../Text/index.js";
-import { init_NavigationProvider, useNavigation } from "../NavigationProvider.js";
-import { init_styles_css, navigationStyle } from "../styles.css.js";
-import { Expandable, init_Expandable } from "../../../Expandable/index.js";
-import { ItemBadge, ItemPinnedButton, init_ItemFragments } from "./ItemFragments.js";
-import { ItemContext, ItemProvider, init_ItemProvider } from "./ItemProvider.js";
-import { useCallback, useContext, useMemo, useReducer } from "react";
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Stack/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { ItemBadge, init_Badge } from "./Badge.js";
+import { ItemPinnedButton, init_PinnedButton } from "./PinnedButton.js";
+import { ItemChildren, init_Children } from "./Children.js";
+import { ItemContent, init_Content } from "./Content.js";
+import { useCallback, useMemo, useReducer } from "react";
 import { cn } from "@ultraviolet/utils";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
-import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 import { ArrowRightIcon } from "@ultraviolet/icons/ArrowRightIcon";
-import { DragIcon } from "@ultraviolet/icons/DragIcon";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 
-//#region src/components/compositions/Navigation/components/ItemExpanded.tsx
-var ItemChildren, ItemContent, ItemExpanded;
+//#region src/components/compositions/Navigation/components/Item/ItemExpanded.tsx
+var ItemExpanded;
 var init_ItemExpanded = __esmMin(() => {
-	init_Expandable();
 	init_Stack();
-	init_Text();
 	init_NavigationProvider();
 	init_styles_css();
-	init_ItemFragments();
-	init_ItemProvider();
-	ItemChildren = ({ noExpand, type, children, internalExpanded }) => {
-		const context = useNavigation();
-		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-		const { animation, animationType, shouldAnimate } = context;
-		return /* @__PURE__ */ jsx(Fragment$1, { children: noExpand ? /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Stack, {
-			className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
-			width: animation ? "100%" : void 0,
-			children
-		}) }) : /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Expandable, {
-			animationDuration: 0,
-			opened: internalExpanded,
-			children: /* @__PURE__ */ jsx(Stack, {
-				className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
-				width: animation ? "100%" : void 0,
-				children
-			})
-		}) }) });
-	};
-	ItemContent = ({ disabled, active, categoryIcon, type, label, hasActiveChildren, labelDescription, noExpand, subLabel }) => {
-		const context = useNavigation();
-		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-		const { expanded, animation } = context;
-		const hasParents = !!useContext(ItemContext);
-		return /* @__PURE__ */ jsxs(Stack, {
-			alignItems: categoryIcon ? "flex-start" : "center",
-			direction: "row",
-			gap: 1,
-			justifyContent: "center",
-			children: [
-				categoryIcon ? /* @__PURE__ */ jsx(Stack, {
-					alignItems: "center",
-					className: navigationStyle.itemCategoryIcon,
-					justifyContent: "center",
-					children: categoryIcon
-				}) : null,
-				type === "pinned" && expanded ? /* @__PURE__ */ jsx(DragIcon, {
-					className: navigationStyle.itemDragIcon,
-					disabled,
-					prominence: "default",
-					sentiment: "neutral",
-					size: "small"
-				}) : null,
-				/* @__PURE__ */ jsxs(Stack, { children: [animation ? null : /* @__PURE__ */ jsxs(Text, {
-					as: "span",
-					className: navigationStyle.itemWrapText({
-						disabled,
-						weak: hasActiveChildren && !noExpand && !disabled && !!active
-					}),
-					"data-animation": animation,
-					disabled,
-					prominence: (categoryIcon || !hasParents) && !active ? "strong" : "default",
-					sentiment: active ? "primary" : "neutral",
-					variant: "bodySmallStrong",
-					whiteSpace: "pre-wrap",
-					children: [label, labelDescription ? /* @__PURE__ */ jsx("span", {
-						className: navigationStyle.itemPadded,
-						children: labelDescription
-					}) : null]
-				}), subLabel && !animation ? /* @__PURE__ */ jsx(Text, {
-					as: "span",
-					className: navigationStyle.itemWrapText({
-						disabled,
-						weak: hasActiveChildren && !noExpand && !disabled && !!active
-					}),
-					"data-animation": animation,
-					disabled,
-					prominence: "weak",
-					sentiment: "neutral",
-					variant: "caption",
-					whiteSpace: "pre-wrap",
-					children: subLabel
-				}) : null] })
-			]
-		});
-	};
+	init_Badge();
+	init_Children();
+	init_Content();
+	init_PinnedButton();
 	ItemExpanded = ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, type, href, rel, id, style, target, label, labelDescription, hasPinnedFeatureAndNoChildren, badgeText, badgeSentiment, isItemPinned, pinTooltipLocale, onClickPinUnpin, isPinDisabled, onToggle, index, onDragStopTrigger, toggle, hasActiveChildren }) => {
 		const context = useNavigation();
 		const [internalExpanded, onToggleExpand] = useReducer((prevState) => !prevState, Boolean(toggle));

package/dist/components/compositions/Navigation/components/Item/ItemProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemProvider.d.ts","sourceRoot":"","sources":["../../../../../../src/components/compositions/Navigation/components/Item/ItemProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,eAAO,MAAM,WAAW,kCAAuB,CAAA;AAE/C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,YAAY,8EAIxB,CAAA"}

package/dist/components/compositions/Navigation/components/{ItemProvider.js → Item/ItemProvider.js}

@@ -1,9 +1,9 @@
 'use client';
-import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
 import { createContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/components/compositions/Navigation/components/ItemProvider.tsx
+//#region src/components/compositions/Navigation/components/Item/ItemProvider.tsx
 var ItemContext, ItemProvider;
 var init_ItemProvider = __esmMin(() => {
 	ItemContext = createContext(false);

package/dist/components/compositions/Navigation/components/{ItemFragments.d.ts → Item/PinnedButton.d.ts}

@@ -1,6 +1,3 @@
-import type { ItemExpandedType } from './ComponentsTypes';
-export declare const ItemBadge: ({ badgeText, animation, disabled, badgeSentiment, }: Pick<ItemExpandedType, "badgeSentiment" | "badgeText" | "disabled"> & {
-    animation: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;
+import type { ItemExpandedType } from '../ComponentsTypes';
 export declare const ItemPinnedButton: ({ shouldShowPinnedButton, isItemPinned, pinTooltipLocale, isPinDisabled, id, active, onClickPinUnpin, }: Pick<ItemExpandedType, "active" | "id" | "isItemPinned" | "isPinDisabled" | "onClickPinUnpin" | "pinTooltipLocale" | "shouldShowPinnedButton">) => import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=ItemFragments.d.ts.map
+//# sourceMappingURL=PinnedButton.d.ts.map

package/dist/components/compositions/Navigation/components/Item/PinnedButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinnedButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/compositions/Navigation/components/Item/PinnedButton.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,eAAO,MAAM,gBAAgB,6SA8E5B,CAAA"}

package/dist/components/compositions/Navigation/components/{ItemFragments.js → Item/PinnedButton.js}

@@ -1,28 +1,18 @@
-import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
-import { Tooltip, init_Tooltip } from "../../../Tooltip/index.js";
-import { init_NavigationProvider, useNavigation } from "../NavigationProvider.js";
-import { init_styles_css, navigationStyle } from "../styles.css.js";
-import { Badge, init_Badge } from "../../../Badge/index.js";
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Tooltip, init_Tooltip } from "../../../../Tooltip/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { PinOutlineIcon } from "@ultraviolet/icons/PinOutlineIcon";
 import { UnpinIcon } from "@ultraviolet/icons/UnpinIcon";
 
-//#region src/components/compositions/Navigation/components/ItemFragments.tsx
-var ItemBadge, ItemPinnedButton;
-var init_ItemFragments = __esmMin(() => {
-	init_Badge();
+//#region src/components/compositions/Navigation/components/Item/PinnedButton.tsx
+var ItemPinnedButton;
+var init_PinnedButton = __esmMin(() => {
 	init_Tooltip();
 	init_NavigationProvider();
 	init_styles_css();
-	ItemBadge = ({ badgeText, animation, disabled, badgeSentiment }) => badgeText && !animation ? /* @__PURE__ */ jsx(Badge, {
-		className: navigationStyle.itemBadge,
-		disabled,
-		prominence: "strong",
-		sentiment: badgeSentiment,
-		size: "small",
-		children: badgeText
-	}) : null;
 	ItemPinnedButton = ({ shouldShowPinnedButton, isItemPinned, pinTooltipLocale, isPinDisabled, id, active, onClickPinUnpin }) => {
 		const context = useNavigation();
 		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
@@ -67,5 +57,5 @@ var init_ItemFragments = __esmMin(() => {
 });
 
 //#endregion
-init_ItemFragments();
-export { ItemBadge, ItemPinnedButton, init_ItemFragments };
+init_PinnedButton();
+export { ItemPinnedButton, init_PinnedButton };

package/dist/components/compositions/Navigation/components/Menu/Menu.d.ts

@@ -0,0 +1,3 @@
+import type { ItemMenuType } from '../ComponentsTypes';
+export declare const ItemMenu: ({ style, children, label, categoryIcon, active, hasActiveChildren, }: ItemMenuType) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/compositions/Navigation/components/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/compositions/Navigation/components/Menu/Menu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEtD,eAAO,MAAM,QAAQ,iIAuEpB,CAAA"}

package/dist/components/compositions/Navigation/components/Menu/Menu.js

@@ -0,0 +1,73 @@
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../../../Tooltip/index.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { Button, init_Button } from "../../../../Button/index.js";
+import { Menu, init_Menu as init_Menu$1 } from "../../../../Menu/index.js";
+import { ItemProvider, init_ItemProvider } from "../Item/ItemProvider.js";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+import { OrganizationDashboardCategoryIcon } from "@ultraviolet/icons/category/OrganizationDashboardCategoryIcon";
+import { DotsHorizontalIcon } from "@ultraviolet/icons/DotsHorizontalIcon";
+
+//#region src/components/compositions/Navigation/components/Menu/Menu.tsx
+var ItemMenu;
+var init_Menu = __esmMin(() => {
+	init_Button();
+	init_Menu$1();
+	init_Stack();
+	init_Tooltip();
+	init_styles_css();
+	init_ItemProvider();
+	ItemMenu = ({ style, children, label, categoryIcon, active, hasActiveChildren }) => /* @__PURE__ */ jsx(Stack, {
+		alignItems: "flex-start",
+		className: navigationStyle.itemMenuStack,
+		gap: 1,
+		justifyContent: "flex-start",
+		style,
+		children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(Menu, {
+			className: navigationStyle.itemMenuContainer,
+			disclosure: /* @__PURE__ */ jsx(Button, {
+				"aria-label": label,
+				sentiment: "neutral",
+				size: "small",
+				variant: hasActiveChildren ? "filled" : "ghost",
+				children: categoryIcon ? /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: 1,
+					justifyContent: "center",
+					children: categoryIcon
+				}) : /* @__PURE__ */ jsx(DotsHorizontalIcon, {})
+			}),
+			dynamicDomRendering: false,
+			placement: "right",
+			triggerMethod: "hover",
+			children: /* @__PURE__ */ jsx(Menu.Group, {
+				label,
+				children: /* @__PURE__ */ jsx(ItemProvider, { children })
+			})
+		}) : /* @__PURE__ */ jsx(Tooltip, {
+			placement: "right",
+			tabIndex: -1,
+			text: label,
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": label,
+				sentiment: "neutral",
+				size: "small",
+				variant: active ? "filled" : "ghost",
+				children: /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: 1,
+					justifyContent: "center",
+					children: categoryIcon !== null && categoryIcon !== void 0 ? categoryIcon : /* @__PURE__ */ jsx(OrganizationDashboardCategoryIcon, { variant: active ? "primary" : "neutral" })
+				})
+			})
+		})
+	});
+});
+
+//#endregion
+init_Menu();
+export { ItemMenu, init_Menu };

package/dist/components/compositions/Navigation/components/{ItemMenu.d.ts → Menu/MenuItem.d.ts}

@@ -1,4 +1,3 @@
-import type { ItemMenuItemType, ItemMenuType } from './ComponentsTypes';
-export declare const ItemMenu: ({ style, children, label, categoryIcon, active, hasActiveChildren, }: ItemMenuType) => import("react/jsx-runtime").JSX.Element;
+import type { ItemMenuItemType } from '../ComponentsTypes';
 export declare const ItemMenuItem: ({ active, shouldShowPinnedButton, disabled, href, onToggle, rel, style, target, hasActiveChildren, noExpand, labelDescription, label, badgeText, badgeSentiment, hasHrefAndNoChildren, pinTooltipLocale, isItemPinned, isPinDisabled, onClickPinUnpin, id, }: ItemMenuItemType) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ItemMenu.d.ts.map
+//# sourceMappingURL=MenuItem.d.ts.map

package/dist/components/compositions/Navigation/components/Menu/MenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/compositions/Navigation/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,eAAO,MAAM,YAAY,6TA4GxB,CAAA"}

package/dist/components/compositions/Navigation/components/{ItemMenu.js → Menu/MenuItem.js}

@@ -1,75 +1,25 @@
-import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
-import { Stack, init_Stack } from "../../../Stack/index.js";
-import { Tooltip, init_Tooltip } from "../../../Tooltip/index.js";
-import { Text, init_Text } from "../../../Text/index.js";
-import { init_NavigationProvider, useNavigation } from "../NavigationProvider.js";
-import { init_styles_css, navigationStyle } from "../styles.css.js";
-import { ItemBadge, ItemPinnedButton, init_ItemFragments } from "./ItemFragments.js";
-import { ItemProvider, init_ItemProvider } from "./ItemProvider.js";
-import { Button, init_Button } from "../../../Button/index.js";
-import { Menu, init_Menu } from "../../../Menu/index.js";
-import { Children } from "react";
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Stack/index.js";
+import { Text, init_Text } from "../../../../Text/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { Menu, init_Menu } from "../../../../Menu/index.js";
+import { ItemBadge, init_Badge } from "../Item/Badge.js";
+import { ItemPinnedButton, init_PinnedButton } from "../Item/PinnedButton.js";
 import { cn } from "@ultraviolet/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
-import { OrganizationDashboardCategoryIcon } from "@ultraviolet/icons/category/OrganizationDashboardCategoryIcon";
 
-//#region src/components/compositions/Navigation/components/ItemMenu.tsx
-var ItemMenu, ItemMenuItem;
-var init_ItemMenu = __esmMin(() => {
-	init_Button();
+//#region src/components/compositions/Navigation/components/Menu/MenuItem.tsx
+var ItemMenuItem;
+var init_MenuItem = __esmMin(() => {
 	init_Menu();
 	init_Stack();
 	init_Text();
-	init_Tooltip();
 	init_NavigationProvider();
 	init_styles_css();
-	init_ItemFragments();
-	init_ItemProvider();
-	ItemMenu = ({ style, children, label, categoryIcon, active, hasActiveChildren }) => /* @__PURE__ */ jsx(Stack, {
-		alignItems: "flex-start",
-		className: navigationStyle.itemMenuStack,
-		gap: 1,
-		justifyContent: "flex-start",
-		style,
-		children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(Menu, {
-			className: navigationStyle.itemMenuContainer,
-			disclosure: /* @__PURE__ */ jsx(Button, {
-				"aria-label": label,
-				sentiment: "neutral",
-				size: "small",
-				variant: hasActiveChildren ? "filled" : "ghost",
-				children: categoryIcon ? /* @__PURE__ */ jsx(Stack, {
-					alignItems: "center",
-					direction: "row",
-					gap: 1,
-					justifyContent: "center",
-					children: categoryIcon
-				}) : null
-			}),
-			dynamicDomRendering: false,
-			placement: "right",
-			triggerMethod: "hover",
-			children: /* @__PURE__ */ jsx(ItemProvider, { children })
-		}) : /* @__PURE__ */ jsx(Tooltip, {
-			placement: "right",
-			tabIndex: -1,
-			text: label,
-			children: /* @__PURE__ */ jsx(Button, {
-				"aria-label": label,
-				sentiment: "neutral",
-				size: "small",
-				variant: active ? "filled" : "ghost",
-				children: /* @__PURE__ */ jsx(Stack, {
-					alignItems: "center",
-					direction: "row",
-					gap: 1,
-					justifyContent: "center",
-					children: categoryIcon !== null && categoryIcon !== void 0 ? categoryIcon : /* @__PURE__ */ jsx(OrganizationDashboardCategoryIcon, { variant: active ? "primary" : "neutral" })
-				})
-			})
-		})
-	});
+	init_Badge();
+	init_PinnedButton();
 	ItemMenuItem = ({ active, shouldShowPinnedButton, disabled, href, onToggle, rel, style, target, hasActiveChildren, noExpand, labelDescription, label, badgeText, badgeSentiment, hasHrefAndNoChildren, pinTooltipLocale, isItemPinned, isPinDisabled, onClickPinUnpin, id }) => {
 		const context = useNavigation();
 		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
@@ -79,6 +29,7 @@ var init_ItemMenu = __esmMin(() => {
 			active,
 			borderless: true,
 			className: cn(navigationStyle.itemMenu, pinnedFeature && shouldShowPinnedButton ? navigationStyle.itemMenuPinned : ""),
+			"data-testid": id,
 			disabled,
 			href,
 			onClick: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(!!active),
@@ -144,5 +95,5 @@ var init_ItemMenu = __esmMin(() => {
 });
 
 //#endregion
-init_ItemMenu();
-export { ItemMenu, ItemMenuItem, init_ItemMenu };
+init_MenuItem();
+export { ItemMenuItem, init_MenuItem };

package/dist/components/compositions/Navigation/components/Menu/NestedMenu.d.ts

@@ -0,0 +1,3 @@
+import type { ItemMenuItemType, ItemMenuType } from '../ComponentsTypes';
+export declare const NestedMenu: ({ children, label, active, shouldShowPinnedButton, disabled, href, onToggle, rel, style, target, hasActiveChildren, noExpand, labelDescription, badgeText, badgeSentiment, hasHrefAndNoChildren, pinTooltipLocale, isItemPinned, isPinDisabled, onClickPinUnpin, id, }: ItemMenuType & ItemMenuItemType) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NestedMenu.d.ts.map

package/dist/components/compositions/Navigation/components/Menu/NestedMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestedMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/compositions/Navigation/components/Menu/NestedMenu.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAExE,eAAO,MAAM,UAAU,sVAyDtB,CAAA"}