@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/components/animatedTextReveal.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/animatedTextReveal
-*Captured:* 2026-03-06T10:40:38.063Z
+*Captured:* 2026-04-20T12:54:18.151Z
 
 AnimatedTextReveal displays text that smoothly reveals from below while a subtle shimmer effect runs across it. It’s designed for attention-grabbing messages or live-updating content, combining a primary reveal motion with an optional continuous shimmer highlight.
 
@@ -49,61 +49,59 @@ const phrases = [
     'Almost there...',
 ];
 
-export default () => {
-    return (
-        <div className='space-y-25'>
-            <div>
-                <FormLabel>Text with automatic cycling and animated gradient</FormLabel>
-                <Card className='display-flex flex-column gap-15'>
-                    <div>
-                        <div className='text-uppercase text-size-12'>Live stream</div>
-                    </div>
-                    <AnimatedTextReveal text={phrases} />
-                </Card>
-            </div>
-            <Divider />
-            <div>
-                <FormLabel>Text with animated gradient</FormLabel>
-                <Card className='display-flex flex-column gap-15'>
-                    <AnimatedTextReveal text='Processing your request...' shimmerDuration={2} shimmerSpread={10} />
-                </Card>
-            </div>
+export default () => (
+    <div className='space-y-25'>
+        <div>
+            <FormLabel>Text with automatic cycling and animated gradient</FormLabel>
+            <Card className='display-flex flex-column gap-15'>
+                <div>
+                    <div className='text-uppercase text-size-12'>Live stream</div>
+                </div>
+                <AnimatedTextReveal text={phrases} />
+            </Card>
+        </div>
+        <Divider />
+        <div>
+            <FormLabel>Text with animated gradient</FormLabel>
+            <Card className='display-flex flex-column gap-15'>
+                <AnimatedTextReveal text='Processing your request...' shimmerDuration={2} shimmerSpread={10} />
+            </Card>
+        </div>
 
-            <div>
-                <FormLabel>Text with automatic cycling but without animated gradient</FormLabel>
-                <Card className='display-flex flex-column gap-15'>
-                    <AnimatedTextReveal text={phrases} shimmer={false} />
-                </Card>
-            </div>
+        <div>
+            <FormLabel>Text with automatic cycling but without animated gradient</FormLabel>
+            <Card className='display-flex flex-column gap-15'>
+                <AnimatedTextReveal text={phrases} shimmer={false} />
+            </Card>
+        </div>
 
-            <div>
-                <FormLabel>Text with custom styling</FormLabel>
-                <Card className='display-flex flex-column gap-15'>
+        <div>
+            <FormLabel>Text with custom styling</FormLabel>
+            <Card className='display-flex flex-column gap-15'>
+                <AnimatedTextReveal
+                    text={phrases}
+                    textColor='dark'
+                    shimmerColor='lightest'
+                    className='text-size-16'
+                    interval={4}
+                />
+            </Card>
+        </div>
+        <div>
+            <FormLabel>Revealing text on a button</FormLabel>
+            <div className='max-width-150'>
+                <Button bsStyle='primary' block>
                     <AnimatedTextReveal
-                        text={phrases}
-                        textColor='dark'
-                        shimmerColor='lightest'
-                        className='text-size-16'
-                        interval={4}
+                        text={['Continue', 'Checking details...', 'Ready!']}
+                        textColor='white'
+                        shimmer={false}
+                        interval={3}
                     />
-                </Card>
-            </div>
-            <div>
-                <FormLabel>Revealing text on a button</FormLabel>
-                <div className='max-width-150'>
-                    <Button bsStyle='primary' block>
-                        <AnimatedTextReveal
-                            text={['Continue', 'Checking details...', 'Ready!']}
-                            textColor='white'
-                            shimmer={false}
-                            interval={3}
-                        />
-                    </Button>
-                </div>
+                </Button>
             </div>
         </div>
-    );
-};
+    </div>
+);
 ```
 
 #### HTML (html)
@@ -117,7 +115,7 @@ export default () => {
                 <div class="text-uppercase text-size-12">Live stream</div>
             </div>
             <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
-                <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.305126; transform: translateY(8.93817px);">System is thinking...</div>
+                <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.288906; transform: translateY(8.97363px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -129,7 +127,7 @@ export default () => {
         <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with animated gradient</div>
         <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
             <div class="position-relative" aria-live="polite" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
-                <div class="animated-text-reveal position-relative" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.305126; transform: translateY(8.93817px);">Processing your request...</div>
+                <div class="animated-text-reveal position-relative" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.288906; transform: translateY(8.97363px);">Processing your request...</div>
             </div>
         </div>
     </div>
@@ -137,7 +135,7 @@ export default () => {
         <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with automatic cycling but without animated gradient</div>
         <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
             <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
-                <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(3.47997px);">System is thinking...</div>
+                <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(3.53618px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -145,7 +143,7 @@ export default () => {
         <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with custom styling</div>
         <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
             <div class="position-relative text-size-16" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest);">
-                <div class="animated-text-reveal position-relative is-animated" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest); opacity: 0; transform: translateY(3.47997px);">System is thinking...</div>
+                <div class="animated-text-reveal position-relative is-animated" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest); opacity: 0; transform: translateY(3.53618px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -154,7 +152,7 @@ export default () => {
         <div class="max-width-150">
             <button type="button" class="btn btn-primary btn-block btn-component" tabindex="0">
                 <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter);">
-                    <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(3.47997px);">Continue</div>
+                    <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(3.53618px);">Continue</div>
                 </div>
             </button>
         </div>

package/dist/docs/components/animations.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/animations
-*Captured:* 2026-03-06T10:40:36.487Z
+*Captured:* 2026-04-20T12:54:16.658Z
 
 The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.
 
@@ -48,7 +48,7 @@ export default () => {
 #### HTML (html)
 
 ```html
-<div style="opacity: 0.885043;">
+<div style="opacity: 0.867982;">
     <div class="margin-10">
         <label>Some Data</label>
         <div>
@@ -160,13 +160,13 @@ export default () => (
     </div>
     <div style="opacity: 1;">
         <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0" stroke-dasharray="0.9119143352436367 1">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0" stroke-dasharray="0.9549258245679084 1">
             </path>
         </svg>
     </div>
     <div style="opacity: 1;">
         <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0" stroke-dasharray="0 1">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0" stroke-dasharray="0.053234423365211114 1">
             </path>
         </svg>
     </div>
@@ -175,11 +175,11 @@ export default () => (
 
 ### Example: Example 3
 
-Add Item Item K0ULQZ1G8I
+Add Item Item DT09A7QPUF
 
-Item YFOIO6AS7V
+Item ZQKIQI4TZM
 
-Item NYOXL5YGT2
+Item 0A2I1QXH6U
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
 
@@ -248,7 +248,7 @@ export default () => {
         <div style="height: auto;">
             <div style="opacity: 1;">
                 <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
-                    <div>Item K0ULQZ1G8I</div>
+                    <div>Item DT09A7QPUF</div>
                     <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                         <span class="rioglyph rioglyph-remove text-size-14">
                         </span>
@@ -259,7 +259,7 @@ export default () => {
         <div style="height: auto;">
             <div style="opacity: 1;">
                 <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
-                    <div>Item YFOIO6AS7V</div>
+                    <div>Item ZQKIQI4TZM</div>
                     <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                         <span class="rioglyph rioglyph-remove text-size-14">
                         </span>
@@ -270,7 +270,7 @@ export default () => {
         <div style="height: auto;">
             <div style="opacity: 1;">
                 <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
-                    <div>Item NYOXL5YGT2</div>
+                    <div>Item 0A2I1QXH6U</div>
                     <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                         <span class="rioglyph rioglyph-remove text-size-14">
                         </span>
@@ -286,17 +286,17 @@ export default () => {
 
 ### Example: Example 4
 
-Load Items Item BXSAR5YAW6
+Load Items Item 0S2VN6J807
 
-Item 4QIZ4N6WFF
+Item ZRWRDCD0Q9
 
-Item V4777RZUL9
+Item 1X4MFI3IX9
 
-Item WLLYXMKVY5
+Item SXIJGKC4VI
 
-Item BNCS1F6E9K
+Item 26LQYL9COP
 
-Item V7XVZMZFPR
+Item 5A3LANZFGS
 
 #### React (tsx)
 
@@ -363,7 +363,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item BXSAR5YAW6</span>
+                            <span>Item 0S2VN6J807</span>
                         </div>
                     </span>
                 </span>
@@ -375,7 +375,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 4QIZ4N6WFF</span>
+                            <span>Item ZRWRDCD0Q9</span>
                         </div>
                     </span>
                 </span>
@@ -387,7 +387,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item V4777RZUL9</span>
+                            <span>Item 1X4MFI3IX9</span>
                         </div>
                     </span>
                 </span>
@@ -399,7 +399,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item WLLYXMKVY5</span>
+                            <span>Item SXIJGKC4VI</span>
                         </div>
                     </span>
                 </span>
@@ -411,7 +411,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item BNCS1F6E9K</span>
+                            <span>Item 26LQYL9COP</span>
                         </div>
                     </span>
                 </span>
@@ -423,7 +423,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item V7XVZMZFPR</span>
+                            <span>Item 5A3LANZFGS</span>
                         </div>
                     </span>
                 </span>

package/dist/docs/components/appHeader.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/appHeader
-*Captured:* 2026-03-06T10:39:58.467Z
+*Captured:* 2026-04-20T12:53:34.945Z
 
 This is the header component for all services. All navigation link components that are passed into the header should be based on react-router
 
@@ -311,16 +311,8 @@ export default AppHeaderExample;
                     <li class="submodule " data-nav-item-key="D">
                         <a class="" href="#/4" data-discover="true">Test D</a>
                     </li>
-                    <li class="CollapsedDropdown dropdown ">
-                        <a id="basic-nav-dropdown" role="button" class="dropdown-toggle text-color-gray" aria-haspopup="true" aria-expanded="true">
-                            <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
-                            </span>
-                        </a>
-                        <ul class="dropdown-menu" role="menu" aria-labelledby="basic-nav-dropdown">
-                            <li class="submodule" data-nav-item-key="E">
-                                <a class="" href="#/5" data-discover="true">Test E</a>
-                            </li>
-                        </ul>
+                    <li class="submodule " data-nav-item-key="E">
+                        <a class="" href="#/5" data-discover="true">Test E</a>
                     </li>
                 </ul>
                 <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
@@ -381,6 +373,30 @@ import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
 import Notification from '@rio-cloud/rio-uikit/Notification';
 import Button from '@rio-cloud/rio-uikit/Button';
 
+const ServiceInfo = () => (
+    <ActionBarItem.List>
+        <ActionBarItem.ListItem icon='rioglyph-hand-right' onClick={() => Notification.info('Show welcome dialog')}>
+            <div className='display-flex align-items-center gap-5'>
+                <span>Welcome</span>
+                <span className='badge badge-primary'>1</span>
+            </div>
+        </ActionBarItem.ListItem>
+        <ActionBarItem.ListItem
+            icon='rioglyph-exclamation-sign'
+            onClick={() => Notification.info("Show what's new dialog")}
+        >
+            What's new?
+        </ActionBarItem.ListItem>
+        <ActionBarItem.ListItem icon='rioglyph-question-sign' onClick={() => Notification.info('Show features dialog')}>
+            Features
+        </ActionBarItem.ListItem>
+        <ActionBarItem.ListSeparator />
+        <ActionBarItem.ListItem icon='rioglyph-envelope' hasLink>
+            <Link to='/components/appHeader'>Feedback</Link>
+        </ActionBarItem.ListItem>
+    </ActionBarItem.List>
+);
+
 const ActionBarItemsExample = () => {
     const [showFeedbackNotification, setShowFeedbackNotification] = useState(false);
     const [feedbackButtonText, setFeedbackButtonText] = useState('Send feedback');
@@ -504,33 +520,6 @@ const ActionBarItemsExample = () => {
         </ActionBarItem>
     );
 
-    const ServiceInfo = () => (
-        <ActionBarItem.List>
-            <ActionBarItem.ListItem icon='rioglyph-hand-right' onClick={() => Notification.info('Show welcome dialog')}>
-                <div className='display-flex align-items-center gap-5'>
-                    <span>Welcome</span>
-                    <span className='badge badge-primary'>1</span>
-                </div>
-            </ActionBarItem.ListItem>
-            <ActionBarItem.ListItem
-                icon='rioglyph-exclamation-sign'
-                onClick={() => Notification.info("Show what's new dialog")}
-            >
-                What's new?
-            </ActionBarItem.ListItem>
-            <ActionBarItem.ListItem
-                icon='rioglyph-question-sign'
-                onClick={() => Notification.info('Show features dialog')}
-            >
-                Features
-            </ActionBarItem.ListItem>
-            <ActionBarItem.ListSeparator />
-            <ActionBarItem.ListItem icon='rioglyph-envelope' hasLink>
-                <Link to='/components/appHeader'>Feedback</Link>
-            </ActionBarItem.ListItem>
-        </ActionBarItem.List>
-    );
-
     const ServiceInfoComponent = (
         <ActionBarItem id='serviceInfo' className='myItem'>
             <ActionBarItem.Icon>

package/dist/docs/components/appLayout.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/appLayout
-*Captured:* 2026-03-06T10:40:01.158Z
+*Captured:* 2026-04-20T12:53:37.687Z
 
 The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
 
@@ -11,10 +11,6 @@ The ApplicationLayout components consists of three sub-components: ApplicationHe
 
 The ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.
 
-> Note: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragment> instead
-
-> Note: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <body> node.
-
 ## Default example
 
 ### Example: Example 1
@@ -1101,18 +1097,18 @@ Navigation 3
 
 4
 
-2
-2
-4
 4
+3
+2
+3
 
 Asset Group 6
-Vehicle-5041 Asset 1011
-Vehicle-5745 Asset 1000
-Vehicle-7271 Asset 1010
-Vehicle-7422 Asset 1005
-Vehicle-7892 Asset 1008
-Vehicle-8559 Asset 1001
+Vehicle-2146 Asset 1010
+Vehicle-2977 Asset 1006
+Vehicle-3782 Asset 1000
+Vehicle-3894 Asset 1002
+Vehicle-6158 Asset 1007
+Vehicle-9018 Asset 1009
 
 Ungrouped 6
 
@@ -1487,7 +1483,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                     </a>
                     <ul role="menu" class="dropdown-menu ModuleNavigation-dropdown-menu">
                         <li role="presentation">
-                            <iframe title="iframe" class="iFrameResizer" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 139px;">
+                            <iframe title="iframe" class="iFrameResizer" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 0px;">
                             </iframe>
                         </li>
                     </ul>
@@ -1602,22 +1598,22 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1640,7 +1636,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9711">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1650,27 +1646,27 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-van">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5041</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1011</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2146</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1010</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-bus">
+                                                    <span class="rioglyph rioglyph-truck">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5745</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2977</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1006</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1680,42 +1676,42 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7271</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1010</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3782</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-truck">
+                                                    <span class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7422</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1005</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3894</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1002</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-truck">
+                                                    <span class="rioglyph rioglyph-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7892</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1008</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6158</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1007</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1725,8 +1721,8 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-8559</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1001</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-9018</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1009</span>
                                                     </span>
                                                 </span>
                                             </div>

package/dist/docs/components/appNavigationBar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Navigation
 *Source:* https://uikit.developers.rio.cloud/#/components/appNavigationBar
-*Captured:* 2026-03-06T10:40:03.877Z
+*Captured:* 2026-04-20T12:53:39.908Z
 
 ## AppNavigationBar