@ultraviolet/ui 3.13.1 → 3.15.0

package/dist/compositions/Navigation/NavigationContent.js

@@ -2,17 +2,20 @@
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack, init_Stack } from "../../components/Stack/index.js";
 import { init_constants } from "./constants.js";
+import { init_variables_css, widthNavigationContainer, widthNavigationContainerDuration, widthNavigationContainerExpanded } from "./variables.css.js";
 import { init_NavigationProvider, useNavigation } from "./NavigationProvider.js";
 import { init_styles_css, navigationStyle } from "./styles.css.js";
 import { Footer, init_Footer } from "./Footer.js";
 import { Header, init_Header } from "./Header.js";
-import { init_variables_css, widthNavigationContainer } from "./variables.css.js";
 import { useEffect, useRef } from "react";
 import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { assignInlineVars, setElementVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/compositions/Navigation/NavigationContent.tsx
+function clamp(min, value, max) {
+	return Math.min(max, Math.max(min, value));
+}
 var NavigationContent;
 var init_NavigationContent = __esmMin(() => {
 	init_Stack();
@@ -25,7 +28,7 @@ var init_NavigationContent = __esmMin(() => {
 	NavigationContent = ({ children, logo, onWidthResize, className, "data-testid": dataTestId, id, onToggleExpand }) => {
 		const context = useNavigation();
 		if (!context) throw new Error("Navigation should be inside NavigationProvider to use it properly.");
-		const { setWidth, width, expanded, toggleExpand, animation, navigationRef, allowNavigationResize, shouldAnimate } = context;
+		const { setWidth, width, expanded, toggleExpand, navigationRef, allowNavigationResize, shouldAnimate } = context;
 		const sliderRef = useRef(null);
 		const contentRef = useRef(null);
 		useEffect(() => {
@@ -36,22 +39,25 @@ var init_NavigationContent = __esmMin(() => {
 			const mouseMove = (event) => {
 				if (prevX !== void 0) {
 					var _navRect$width;
-					const newWidth = ((_navRect$width = navRect === null || navRect === void 0 ? void 0 : navRect.width) !== null && _navRect$width !== void 0 ? _navRect$width : 0) + (event.clientX - prevX);
-					if (navigationRef.current && expanded) navigationRef.current.style.width = `${newWidth}px`;
-					if (newWidth <= 220) shouldCollapseOnMouseUp = true;
-					else shouldCollapseOnMouseUp = false;
-					if (newWidth >= 67 && !expanded) shouldExpandOnMouseUp = true;
-					else shouldExpandOnMouseUp = false;
+					const newWidth = clamp(220, ((_navRect$width = navRect === null || navRect === void 0 ? void 0 : navRect.width) !== null && _navRect$width !== void 0 ? _navRect$width : 0) + (event.clientX - prevX), 320);
+					if (navigationRef.current && expanded) {
+						navigationRef.current.style.width = `${newWidth}px`;
+						setElementVars(navigationRef.current, { [widthNavigationContainerExpanded]: `${newWidth}px` });
+					}
+					shouldCollapseOnMouseUp = newWidth <= 220;
+					shouldExpandOnMouseUp = !expanded && newWidth >= 64;
 				}
 			};
 			const mousedown = (event) => {
 				var _navigationRef$curren;
 				prevX = event.clientX;
 				navRect = (_navigationRef$curren = navigationRef.current) === null || _navigationRef$curren === void 0 ? void 0 : _navigationRef$curren.getBoundingClientRect();
+				if (navigationRef.current) setElementVars(navigationRef.current, { [widthNavigationContainerDuration]: "0" });
 				const mouseup = () => {
 					if (shouldCollapseOnMouseUp || shouldExpandOnMouseUp) {
 						toggleExpand();
 						onToggleExpand === null || onToggleExpand === void 0 || onToggleExpand(!expanded);
+						if (navigationRef.current) setElementVars(navigationRef.current, { [widthNavigationContainerExpanded]: `${width}px` });
 					}
 					if (navigationRef.current) {
 						if (!(shouldCollapseOnMouseUp || shouldExpandOnMouseUp)) {
@@ -59,6 +65,7 @@ var init_NavigationContent = __esmMin(() => {
 							setWidth === null || setWidth === void 0 || setWidth(navigationRef.current.offsetWidth);
 						}
 						if (!expanded) navigationRef.current.style.width = "";
+						setElementVars(navigationRef.current, { [widthNavigationContainerDuration]: `${shouldAnimate ? 250 : 0}ms` });
 					}
 					document.removeEventListener("mousemove", mouseMove);
 					window.removeEventListener("mouseup", mouseup);
@@ -77,23 +84,26 @@ var init_NavigationContent = __esmMin(() => {
 			onToggleExpand,
 			onWidthResize,
 			setWidth,
-			toggleExpand
+			toggleExpand,
+			shouldAnimate,
+			width
 		]);
 		return /* @__PURE__ */ jsxs("nav", {
 			className: cn(className, navigationStyle.navigation),
 			"data-testid": dataTestId,
 			id,
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: navigationStyle.container({
-					animation: shouldAnimate ? animation : void 0,
-					expanded
-				}),
+				className: navigationStyle.container(),
 				ref: navigationRef,
-				style: assignInlineVars({ [widthNavigationContainer]: `${width}px` }),
+				style: assignInlineVars({
+					[widthNavigationContainer]: `${expanded ? width : 64}px`,
+					[widthNavigationContainerExpanded]: `${width}px`,
+					[widthNavigationContainerDuration]: `${shouldAnimate ? 250 : 0}ms`
+				}),
 				children: [logo ? /* @__PURE__ */ jsx(Header, { logo }) : null, /* @__PURE__ */ jsxs("div", {
-					className: cn(navigationStyle.contentContainer, expanded ? "" : navigationStyle.contentContainerCollapsed),
+					className: cn(navigationStyle.contentContainer),
 					children: [/* @__PURE__ */ jsx(Stack, {
-						className: navigationStyle.content,
+						className: navigationStyle.content({ collapsed: !expanded }),
 						gap: .25,
 						ref: contentRef,
 						children

package/dist/compositions/Navigation/NavigationProvider.d.ts

@@ -1,6 +1,6 @@
+import type { Dispatch, ReactNode, RefObject } from 'react';
 import NavigationLocales from './locales/en';
 import type { PinUnPinType } from './types';
-import type { Dispatch, ReactNode, RefObject } from 'react';
 type Item = {
     label: string;
     active?: boolean;
@@ -11,7 +11,9 @@ type Items = Record<string, Item>;
 type AnimationType = 'simple' | 'complex';
 type ContextProps = {
     expanded: boolean;
-    toggleExpand: (toggle?: boolean) => void;
+    toggleExpand: (toggle?: boolean, options?: {
+        immediate?: boolean;
+    }) => void;
     animation: boolean | 'expand' | 'collapse';
     pinnedFeature?: boolean;
     onClickPinUnpin?: (pinned: string[]) => void;
@@ -85,10 +87,11 @@ type NavigationProviderProps = {
     animation?: boolean;
     /**
      * type of animation
+     * @deprecated use the `animation` prop to enable or disable the animation completely. This one has no effect.
      */
     animationType?: AnimationType;
     showHide?: 'show' | 'hide';
 };
-export declare const NavigationProvider: ({ children, pinnedFeature, initialPinned, initialExpanded, locales, pinLimit, onExpandChange, initialWidth, initialAllowNavigationResize, animation: shouldAnimate, animationType, showHide, }: NavigationProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationProvider: ({ children, pinnedFeature, initialPinned, initialExpanded, locales, pinLimit, onExpandChange, initialWidth, initialAllowNavigationResize, animation: animationEnabled, animationType, showHide, }: NavigationProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=NavigationProvider.d.ts.map

package/dist/compositions/Navigation/NavigationProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationProvider.d.ts","sourceRoot":"","sources":["../../../src/compositions/Navigation/NavigationProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NavigationProvider.d.ts","sourceRoot":"","sources":["../../../src/compositions/Navigation/NavigationProvider.tsx"],"names":[],"mappings":"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"}

package/dist/compositions/Navigation/NavigationProvider.js

@@ -1,16 +1,20 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
-import { init_constants } from "./constants.js";
+import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.128.0/helpers/objectSpread2.js";
+import { ANIMATION_EASING, init_constants } from "./constants.js";
 import en_default, { init_en } from "./locales/en.js";
+import { init_variables_css, widthNavigationContainerDuration } from "./variables.css.js";
 import { createContext, useCallback, useContext, useMemo, useReducer, useRef, useState } from "react";
+import { setElementVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
+import { useFlip, usePrefersReducedMotion } from "@ultraviolet/animations";
 
 //#region src/compositions/Navigation/NavigationProvider.tsx
 var NavigationContext, useNavigation, NavigationProvider;
 var init_NavigationProvider = __esmMin(() => {
 	init_constants();
 	init_en();
+	init_variables_css();
 	init_objectSpread2();
 	NavigationContext = createContext({
 		allowNavigationResize: true,
@@ -29,34 +33,54 @@ var init_NavigationProvider = __esmMin(() => {
 		setPinnedItems: () => {},
 		setWidth: () => {},
 		shouldAnimate: true,
+		/**
+		* This function will trigger the expand/collapse of the navigation and
+		* will also trigger the animation
+		*/
 		toggleExpand: () => {},
 		unpinItem: () => [],
 		width: 280
 	});
 	useNavigation = () => useContext(NavigationContext);
-	NavigationProvider = ({ children, pinnedFeature = false, initialPinned, initialExpanded = true, locales = en_default, pinLimit = 7, onExpandChange, initialWidth = 280, initialAllowNavigationResize = true, animation: shouldAnimate = true, animationType, showHide }) => {
+	NavigationProvider = ({ children, pinnedFeature = false, initialPinned, initialExpanded = true, locales = en_default, pinLimit = 7, onExpandChange, initialWidth = 280, initialAllowNavigationResize = true, animation: animationEnabled = true, animationType, showHide }) => {
 		const [expanded, setExpanded] = useState(initialExpanded);
 		const [pinnedItems, setPinnedItems] = useState(initialPinned !== null && initialPinned !== void 0 ? initialPinned : []);
+		const prefersReducedMotion = usePrefersReducedMotion();
+		const shouldAnimate = animationEnabled && !prefersReducedMotion;
 		const [animation, setAnimation] = useState(false);
 		const [width, setWidth] = useState(initialWidth);
 		const [allowNavigationResize, setAllowNavigationResize] = useState(initialAllowNavigationResize);
 		const [items, registerItem] = useReducer((oldState, newState) => _objectSpread2(_objectSpread2({}, oldState), newState), {});
 		const navigationRef = useRef(null);
-		const toggleExpand = useCallback((toggle) => {
+		const { prepareAnimation, animate } = useFlip(navigationRef, {
+			duration: 250,
+			easing: ANIMATION_EASING
+		});
+		const toggleExpand = useCallback((toggle, options) => {
 			if (typeof toggle !== "boolean" && toggle !== void 0) throw new Error("toggleExpand only accepts boolean or undefined as parameter. You most likely did <button onClick={toggleExpand}> instead of <button onClick={() => toggleExpand()}>");
 			if (toggle !== void 0 && toggle === expanded) return;
-			onExpandChange === null || onExpandChange === void 0 || onExpandChange(!expanded);
-			if (navigationRef.current) navigationRef.current.style.width = "";
-			if (shouldAnimate) {
-				setAnimation(expanded ? "collapse" : "expand");
-				setTimeout(() => {
-					setExpanded(toggle !== null && toggle !== void 0 ? toggle : !expanded);
+			const isNowExpanded = toggle !== null && toggle !== void 0 ? toggle : !expanded;
+			const immediate = options === null || options === void 0 ? void 0 : options.immediate;
+			onExpandChange === null || onExpandChange === void 0 || onExpandChange(!isNowExpanded);
+			setExpanded(isNowExpanded);
+			if (navigationRef.current) {
+				navigationRef.current.style.width = "";
+				setElementVars(navigationRef.current, { [widthNavigationContainerDuration]: `${shouldAnimate && !immediate ? 250 : 0}ms` });
+			}
+			if (!shouldAnimate || immediate) return;
+			prepareAnimation();
+			setAnimation(isNowExpanded ? "expand" : "collapse");
+			requestAnimationFrame(() => {
+				animate().then(() => {
+					if (navigationRef.current) setElementVars(navigationRef.current, { [widthNavigationContainerDuration]: `${shouldAnimate ? 250 : 0}ms` });
 					setAnimation(false);
-				}, 250);
-			} else setExpanded(toggle !== null && toggle !== void 0 ? toggle : !expanded);
+				}).catch(() => {});
+			});
 		}, [
 			expanded,
 			onExpandChange,
+			prepareAnimation,
+			animate,
 			shouldAnimate
 		]);
 		const pinItem = useCallback((item) => {

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

@@ -1,6 +1,6 @@
+import type { ComponentProps, CSSProperties, DragEvent, ElementType, ReactNode } from 'react';
 import type { Badge } from '../../../components/Badge';
 import type { ItemType, PinUnPinType } from '../types';
-import type { ComponentProps, CSSProperties, DragEvent, ElementType, ReactNode } from 'react';
 export type ItemExpandedType = {
     categoryIcon: ReactNode;
     containerTag: ElementType;
@@ -12,6 +12,7 @@ export type ItemExpandedType = {
     shouldShowPinnedButton: boolean;
     children: ReactNode;
     dataTestId?: string;
+    dataFlipId?: string | null;
     type: ItemType;
     href?: HTMLAnchorElement['href'];
     rel?: HTMLAnchorElement['rel'];
@@ -39,6 +40,10 @@ export type ItemMenuType = {
     hasActiveChildren: boolean;
     categoryIcon?: ReactNode;
     active?: boolean;
+    /**
+     * @private
+     */
+    'data-flip-id'?: string;
 };
 export type ItemMenuItemType = {
     active?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentsTypes.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/ComponentsTypes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComponentsTypes.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/ComponentsTypes.ts"],"names":[],"mappings":"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"}

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

@@ -5,6 +5,6 @@ type GroupProps = {
     style?: CSSProperties;
     additionalData?: ReactNode;
 };
-export declare const Group: ({ children, label, style, additionalData, }: GroupProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Group: ({ children, label, style, additionalData }: GroupProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=Group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/Group.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,cAAc,CAAC,EAAE,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,KAAK,gDAKf,UAAU,mDA4CZ,CAAA"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/Group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMrD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,cAAc,CAAC,EAAE,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,KAAK,+CAAgD,UAAU,mDAuC3E,CAAA"}

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

@@ -1,11 +1,10 @@
 'use client';
 import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2, init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
 import { Stack, init_Stack } from "../../../components/Stack/index.js";
 import { Text, init_Text } from "../../../components/Text/index.js";
 import { init_NavigationProvider, useNavigation } from "../NavigationProvider.js";
 import { init_styles_css, navigationStyle } from "../styles.css.js";
-import { Children } from "react";
+import { Children, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/compositions/Navigation/components/Group.tsx
@@ -15,30 +14,30 @@ var init_Group = __esmMin(() => {
 	init_Text();
 	init_NavigationProvider();
 	init_styles_css();
-	init_objectSpread2();
 	Group = ({ children, label, style, additionalData }) => {
 		const context = useNavigation();
+		const id = useId();
 		if (!context) throw new Error("Navigation.Group can only be used inside a NavigationProvider.");
-		const { expanded, animation, animationType } = context;
-		const isDiplay = !animation && expanded;
-		if (Children.count(children) > 0) return /* @__PURE__ */ jsx("div", {
-			style: _objectSpread2({ width: animation ? "100%" : void 0 }, style),
-			children: /* @__PURE__ */ jsxs(Stack, {
-				className: navigationStyle.groupStack,
-				direction: "column",
-				children: [isDiplay ? /* @__PURE__ */ jsx(Text, {
-					as: "span",
-					className: navigationStyle.groupText({ animation: animationType === "complex" ? animation : false }),
-					prominence: "weak",
-					sentiment: "neutral",
-					variant: "bodySmallStrong",
-					children: additionalData ? /* @__PURE__ */ jsxs(Stack, {
-						direction: "row",
-						justifyContent: "space-between",
-						children: [label, additionalData]
-					}) : label
-				}) : null, children]
-			})
+		const { expanded, animation } = context;
+		if (Children.count(children) > 0) return /* @__PURE__ */ jsxs(Stack, {
+			gap: .25,
+			direction: "column",
+			style,
+			"data-flip-id": id,
+			className: navigationStyle.groupStack,
+			children: [expanded ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				className: navigationStyle.groupText({ animation: animation === "expand" ? "expand" : void 0 }),
+				prominence: "weak",
+				sentiment: "neutral",
+				variant: "bodySmallStrong",
+				children: additionalData ? /* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					alignItems: "center",
+					justifyContent: "space-between",
+					children: [label, additionalData]
+				}) : label
+			}) : null, children]
 		});
 		return null;
 	};

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

@@ -1,5 +1,3 @@
 import type { ItemExpandedType } from '../ComponentsTypes';
-export declare const ItemBadge: ({ badgeText, animation, disabled, badgeSentiment, }: Pick<ItemExpandedType, 'badgeText' | 'badgeSentiment' | 'disabled'> & {
-    animation: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ItemBadge: ({ badgeText, disabled, badgeSentiment, }: Pick<ItemExpandedType, 'badgeText' | 'badgeSentiment' | 'disabled'>) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,eAAO,MAAM,SAAS,wDAKnB,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,CAAC,GAAG;IACvE,SAAS,EAAE,OAAO,CAAA;CACnB,mDAWS,CAAA"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,eAAO,MAAM,SAAS,6CAInB,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,CAAC,mDAW5D,CAAA"}

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

@@ -8,7 +8,7 @@ var ItemBadge;
 var init_Badge = __esmMin(() => {
 	init_Badge$1();
 	init_styles_css();
-	ItemBadge = ({ badgeText, animation, disabled, badgeSentiment }) => badgeText && !animation ? /* @__PURE__ */ jsx(Badge, {
+	ItemBadge = ({ badgeText, disabled, badgeSentiment }) => badgeText ? /* @__PURE__ */ jsx(Badge, {
 		className: navigationStyle.itemBadge,
 		disabled,
 		prominence: "strong",

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

@@ -1 +1 @@
-{"version":3,"file":"Children.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Children.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,eAAO,MAAM,YAAY,oDAKtB,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;IAC5D,gBAAgB,EAAE,OAAO,CAAA;CAC1B,4CAsDA,CAAA"}
+{"version":3,"file":"Children.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Children.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAI1D,eAAO,MAAM,YAAY,oDAKtB,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;IAC5D,gBAAgB,EAAE,OAAO,CAAA;CAC1B,4CA0BA,CAAA"}

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

@@ -12,22 +12,20 @@ var init_Children = __esmMin(() => {
 	init_Expandable();
 	init_Stack();
 	init_NavigationProvider();
-	init_styles_css();
 	init_ItemProvider();
+	init_styles_css();
 	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;
+		if (!useNavigation()) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
 		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,
+			gap: .25,
+			className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack,
 			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,
+				gap: .25,
+				className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack,
 				children
 			})
 		}) }) });

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

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,eAAO,MAAM,WAAW,8GAUrB,IAAI,CACL,gBAAgB,EACd,UAAU,GACV,QAAQ,GACR,cAAc,GACd,MAAM,GACN,OAAO,GACP,mBAAmB,GACnB,kBAAkB,GAClB,UAAU,GACV,UAAU,CACb,4CAmFA,CAAA"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Content.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAI1D,eAAO,MAAM,WAAW,8GAUrB,IAAI,CACL,gBAAgB,EACd,UAAU,GACV,QAAQ,GACR,cAAc,GACd,MAAM,GACN,OAAO,GACP,mBAAmB,GACnB,kBAAkB,GAClB,UAAU,GACV,UAAU,CACb,4CAkEA,CAAA"}

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

@@ -14,8 +14,8 @@ var init_Content = __esmMin(() => {
 	init_Stack();
 	init_Text();
 	init_NavigationProvider();
-	init_styles_css();
 	init_ItemProvider();
+	init_styles_css();
 	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.");
@@ -40,10 +40,11 @@ var init_Content = __esmMin(() => {
 					sentiment: "neutral",
 					size: "small"
 				}) : null,
-				/* @__PURE__ */ jsxs(Stack, { children: [animation ? null : /* @__PURE__ */ jsxs(Text, {
+				/* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsxs(Text, {
 					as: "span",
 					className: navigationStyle.itemWrapText({
 						disabled,
+						animation,
 						weak: hasActiveChildren && !noExpand && !disabled && !!active
 					}),
 					"data-animation": animation,
@@ -56,10 +57,11 @@ var init_Content = __esmMin(() => {
 						className: navigationStyle.itemPadded,
 						children: labelDescription
 					}) : null]
-				}), subLabel && !animation ? /* @__PURE__ */ jsx(Text, {
+				}), subLabel && expanded ? /* @__PURE__ */ jsx(Text, {
 					as: "span",
 					className: navigationStyle.itemWrapText({
 						disabled,
+						animation,
 						weak: hasActiveChildren && !noExpand && !disabled && !!active
 					}),
 					"data-animation": animation,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Item.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AACzD,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,uSA0BZ,SAAS,oDA4Qb,CAAA"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Item.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7F,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAIzD,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAYzD,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,uSA0BZ,SAAS,oDA6Ob,CAAA"}

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

@@ -20,12 +20,12 @@ var init_Item = __esmMin(() => {
 	init_Stack();
 	init_Tooltip();
 	init_NavigationProvider();
-	init_styles_css();
 	init_Menu();
 	init_MenuItem();
 	init_NestedMenu();
 	init_ItemExpanded();
 	init_ItemProvider();
+	init_styles_css();
 	onDragStopTrigger = (event) => {
 		const element = event.currentTarget;
 		element.style.opacity = "1";
@@ -34,7 +34,7 @@ var init_Item = __esmMin(() => {
 		const context = useNavigation();
 		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
 		const hasParents = !!useContext(ItemContext);
-		const { expanded, locales, pinnedFeature, pinnedItems, pinLimit, animation, registerItem, shouldAnimate, animationType, showHide } = context;
+		const { expanded, locales, pinnedFeature, pinnedItems, pinLimit, registerItem, showHide } = context;
 		const makeRegisterRef = useRef(null);
 		useEffect(() => {
 			makeRegisterRef.current = () => registerItem({ [id]: {
@@ -113,14 +113,14 @@ var init_Item = __esmMin(() => {
 			locales
 		]);
 		if (!alwaysVisible && showHide === "hide") return null;
-		const computedAnimation = animation === "collapse" ? "collapse" : "expand";
-		if (expanded || !expanded && animation === "expand") return /* @__PURE__ */ jsx(ItemExpanded, {
+		if (expanded) return /* @__PURE__ */ jsx(ItemExpanded, {
 			active,
 			badgeSentiment,
 			badgeText,
 			categoryIcon,
 			containerTag,
 			dataTestId,
+			dataFlipId: !hasParents && categoryIcon ? id : null,
 			disabled,
 			hasActiveChildren,
 			hasPinnedFeatureAndNoChildren,
@@ -148,6 +148,7 @@ var init_Item = __esmMin(() => {
 		if (categoryIcon || Children.count(children) > 0 && !hasParents) return /* @__PURE__ */ jsx(ItemMenu, {
 			active,
 			categoryIcon,
+			"data-flip-id": categoryIcon ? id : void 0,
 			hasActiveChildren,
 			label,
 			style,
@@ -202,27 +203,20 @@ var init_Item = __esmMin(() => {
 			placement: "right",
 			text: label,
 			children: /* @__PURE__ */ jsx(Stack, {
-				alignItems: "flex-start",
-				className: navigationStyle.itemMenuStack,
+				alignItems: "center",
+				"data-flip-id": categoryIcon ? id : void 0,
 				gap: 1,
 				justifyContent: "flex-start",
 				children: /* @__PURE__ */ jsx(Stack, {
 					alignItems: "center",
 					as: containerTag,
-					className: cn(navigationStyle.itemContainer({ disabled }), navigationStyle.itemContainerAnimated({
-						animated: shouldAnimate && animationType === "complex",
-						animation: computedAnimation
-					})),
+					className: cn(navigationStyle.itemContainer({ disabled })),
 					gap: 1,
 					href,
 					justifyContent: "center",
 					rel,
 					target,
 					children: /* @__PURE__ */ jsx(OpenInNewIcon, {
-						className: navigationStyle.itemAnimatedIcon({
-							animated: shouldAnimate && animationType === "complex",
-							animation: computedAnimation
-						}),
 						prominence: "weak",
 						sentiment: "neutral"
 					})

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

@@ -1,3 +1,3 @@
 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;
+export declare const ItemExpanded: ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, dataFlipId, 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/compositions/Navigation/components/Item/ItemExpanded.d.ts.map

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