@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

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-27T14:57:53.077Z
 
 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.316063; transform: translateY(8.93777px);">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.316063; transform: translateY(8.93777px);">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.36812px);">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.36812px);">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.36812px);">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-27T14:57:51.920Z
 
 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.893219;">
     <div class="margin-10">
         <label>Some Data</label>
         <div>
@@ -160,7 +160,7 @@ 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.9294828514393885 1">
             </path>
         </svg>
     </div>
@@ -175,11 +175,11 @@ export default () => (
 
 ### Example: Example 3
 
-Add Item Item K0ULQZ1G8I
+Add Item Item IAR07Q32FDL
 
-Item YFOIO6AS7V
+Item 8QCRTQ3YH2
 
-Item NYOXL5YGT2
+Item EFVUWAQJLM
 
 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 IAR07Q32FDL</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 8QCRTQ3YH2</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 EFVUWAQJLM</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 KDQ20F8ANB
 
-Item 4QIZ4N6WFF
+Item 0GHO5M48WH
 
-Item V4777RZUL9
+Item Y0653RI8HK
 
-Item WLLYXMKVY5
+Item YQM8A4TWMJ
 
-Item BNCS1F6E9K
+Item 6BTIZQ3HCS
 
-Item V7XVZMZFPR
+Item C6HLMLK7N1
 
 #### 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 KDQ20F8ANB</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 0GHO5M48WH</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 Y0653RI8HK</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 YQM8A4TWMJ</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 6BTIZQ3HCS</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 C6HLMLK7N1</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-27T14:57:09.682Z
 
 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-27T14:57:12.347Z
 
 The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
 
@@ -1101,20 +1101,16 @@ Navigation 3
 
 4
 
-2
-2
-4
+5
 4
+2
 
-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
+Asset Group 3
+Vehicle-6700 Asset 1001
+Vehicle-7557 Asset 1009
+Vehicle-7869 Asset 1000
 
-Ungrouped 6
+Ungrouped 8
 
 200
 
@@ -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>
@@ -1599,25 +1595,20 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                             </div>
                                             <div class="display-flex justify-content-between align-items-start width-100pct">
                                                 <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
-                                                    <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>
-                                                    </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>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">5</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 class="rioglyph rioglyph-bus text-size-16 margin-right-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-truck 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>
                                             </div>
@@ -1635,27 +1626,12 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Asset Group</span>
                                                     </span>
-                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9711">
-                                                <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-van">
-                                                    </span>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5041</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1011</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-7b7fd85d971">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1665,12 +1641,12 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5745</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6700</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1001</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-7b7fd85d979">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1680,42 +1656,12 @@ 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>
-                                                </span>
-                                            </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
-                                                <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>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7422</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1005</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7557</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1009</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
-                                                <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>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7892</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1008</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-7b7fd85d970">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1725,8 +1671,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-7869</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
                                                     </span>
                                                 </span>
                                             </div>
@@ -1742,7 +1688,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Ungrouped</span>
                                                     </span>
-                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>

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-27T14:57:14.864Z
 
 ## AppNavigationBar