@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/components/accentBar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/accentBar
-*Captured:* 2026-04-20T12:54:40.085Z
+*Captured:* 2026-05-06T12:14:16.220Z
 
 The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.
 

package/dist/docs/components/activity.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/activity
-*Captured:* 2026-04-20T12:54:38.261Z
+*Captured:* 2026-05-06T12:14:14.189Z
 
 ## Activity
 

package/dist/docs/components/analyticsAnalysisOverlay.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/analyticsAnalysisOverlay
-*Captured:* 2026-04-20T12:53:53.012Z
+*Captured:* 2026-05-06T12:13:29.726Z
 
 Development overlay for visualizing tracked GA elements directly in the viewport. It scans DOM nodes with tracking data attributes and overlays aggregated metrics from uploaded analytics CSV files. See the new helper demo for getTrackingAttributes.
 
@@ -11,6 +11,8 @@ Development overlay for visualizing tracked GA elements directly in the viewport
 
 Download the demo CSV and upload it in the draggable overlay banner to see metrics mapped to the tracked elements below.
 
+Download demo CSV
+
 ### Example: Example 1
 
 Card with visibility tracking

package/dist/docs/components/animatedNumber.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/animatedNumber
-*Captured:* 2026-04-20T12:54:16.658Z
+*Captured:* 2026-05-06T12:13:53.345Z
 
 ## AnimatedNumber
 
@@ -51,7 +51,7 @@ export default () => (
 <div>
     <label>Default AnimatedNumber</label>
     <div class="width-60 margin-bottom-20 text-right text-size-h1 text-color-info">
-        <span class="">25</span>
+        <span class="">24</span>
     </div>
     <label>AnimatedNumber with prefix and unit</label>
     <div class="width-100 margin-bottom-20 text-right text-size-h1 text-color-primary">

package/dist/docs/components/animatedTextReveal.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/animatedTextReveal
-*Captured:* 2026-04-20T12:54:18.151Z
+*Captured:* 2026-05-06T12:13:54.454Z
 
 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.
 
@@ -115,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.288906; transform: translateY(8.97363px);">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.296987; transform: translateY(8.93902px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -127,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.288906; transform: translateY(8.97363px);">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.296987; transform: translateY(8.93902px);">Processing your request...</div>
             </div>
         </div>
     </div>
@@ -135,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.53618px);">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.56435px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -143,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.53618px);">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.56435px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -152,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.53618px);">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.56435px);">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-04-20T12:54:16.658Z
+*Captured:* 2026-05-06T12:13:53.853Z
 
 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.867982;">
+<div style="opacity: 0.897449;">
     <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.9549258245679084 1">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0" stroke-dasharray="0.8898822093906347 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.053234423365211114 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 1">
             </path>
         </svg>
     </div>
@@ -175,11 +175,11 @@ export default () => (
 
 ### Example: Example 3
 
-Add Item Item DT09A7QPUF
+Add Item Item NT0067EDY8K
 
-Item ZQKIQI4TZM
+Item 7OCH1AZ4M6
 
-Item 0A2I1QXH6U
+Item NWYK28WEXM
 
 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 DT09A7QPUF</div>
+                    <div>Item NT0067EDY8K</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 ZQKIQI4TZM</div>
+                    <div>Item 7OCH1AZ4M6</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 0A2I1QXH6U</div>
+                    <div>Item NWYK28WEXM</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 0S2VN6J807
+Load Items Item VGIIB8OSZU
 
-Item ZRWRDCD0Q9
+Item LQCBFYXCYX
 
-Item 1X4MFI3IX9
+Item QNTAKZWZVE
 
-Item SXIJGKC4VI
+Item JR8BGIREBK
 
-Item 26LQYL9COP
+Item T8JQ51GSW4
 
-Item 5A3LANZFGS
+Item BHA9RW1WPO
 
 #### React (tsx)
 
@@ -363,7 +363,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 0S2VN6J807</span>
+                            <span>Item VGIIB8OSZU</span>
                         </div>
                     </span>
                 </span>
@@ -375,7 +375,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item ZRWRDCD0Q9</span>
+                            <span>Item LQCBFYXCYX</span>
                         </div>
                     </span>
                 </span>
@@ -387,7 +387,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 1X4MFI3IX9</span>
+                            <span>Item QNTAKZWZVE</span>
                         </div>
                     </span>
                 </span>
@@ -399,7 +399,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item SXIJGKC4VI</span>
+                            <span>Item JR8BGIREBK</span>
                         </div>
                     </span>
                 </span>
@@ -411,7 +411,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 26LQYL9COP</span>
+                            <span>Item T8JQ51GSW4</span>
                         </div>
                     </span>
                 </span>
@@ -423,7 +423,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 5A3LANZFGS</span>
+                            <span>Item BHA9RW1WPO</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-04-20T12:53:34.945Z
+*Captured:* 2026-05-06T12:13:11.635Z
 
 This is the header component for all services. All navigation link components that are passed into the header should be based on react-router
 

package/dist/docs/components/appLayout.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/appLayout
-*Captured:* 2026-04-20T12:53:37.687Z
+*Captured:* 2026-05-06T12:13:14.225Z
 
 The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
 
@@ -11,6 +11,10 @@ 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
@@ -1097,20 +1101,17 @@ Navigation 3
 
 4
 
-4
-3
+5
 2
-3
+1
 
-Asset Group 6
-Vehicle-2146 Asset 1010
-Vehicle-2977 Asset 1006
-Vehicle-3782 Asset 1000
-Vehicle-3894 Asset 1002
-Vehicle-6158 Asset 1007
-Vehicle-9018 Asset 1009
+Asset Group 4
+Vehicle-5592 Asset 1000
+Vehicle-6497 Asset 1003
+Vehicle-9257 Asset 1006
+Vehicle-9265 Asset 1002
 
-Ungrouped 6
+Ungrouped 4
 
 200
 
@@ -1596,14 +1597,9 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                             <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">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 class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">3</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">
@@ -1611,9 +1607,9 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                         <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 class="rioglyph rioglyph-truck text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1631,41 +1627,11 @@ 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">4</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-7b7fd85d9710">
-                                                <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-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-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-truck">
-                                                    </span>
-                                                    <span class="TreeLabelNameText">
-                                                        <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-7b7fd85d970">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
@@ -1673,30 +1639,30 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-bus">
+                                                    <span class="rioglyph rioglyph-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3782</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5592</span>
                                                         <span class="TreeLabelNameTextSubline">Asset 1000</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
                                                 <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-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3894</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1002</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6497</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1003</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
+                                            <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">
@@ -1706,12 +1672,12 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6158</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1007</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-9257</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1006</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
+                                            <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">
@@ -1721,8 +1687,8 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-9018</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1009</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-9265</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1002</span>
                                                     </span>
                                                 </span>
                                             </div>
@@ -1738,7 +1704,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">4</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-04-20T12:53:39.908Z
+*Captured:* 2026-05-06T12:13:16.761Z
 
 ## AppNavigationBar
 

package/dist/docs/components/areaCharts.md

@@ -3,10 +3,12 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/areaCharts
-*Captured:* 2026-04-20T12:55:30.671Z
+*Captured:* 2026-05-06T12:15:06.413Z
 
 ## AreaChart
 
+> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.
+
 ### Example: Example 1
 
 Simple AreaChart
@@ -112,7 +114,7 @@ const data: CustomData[] = [
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r0:">
-                                        <rect x="45" y="0" width="83.4146754519315" height="124">
+                                        <rect x="45" y="0" width="78.86311652275779" height="124">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -457,7 +459,7 @@ const data: CustomData[] = [
     <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
         <div style="width: 0px; height: 0px; overflow: visible;">
             <div width="876" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; height: 268px;">
-                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(440.844px, 138px);">
+                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
                     <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                         <p class="recharts-tooltip-label" style="margin: 0px;">
                         </p>
@@ -541,7 +543,7 @@ const data: CustomData[] = [
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r1:">
-                                        <rect x="75" y="0" width="656.110213211188" height="224">
+                                        <rect x="75" y="0" width="651.6749428687003" height="224">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -559,7 +561,7 @@ const data: CustomData[] = [
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r2:">
-                                        <rect x="75" y="0" width="656.110213211188" height="224">
+                                        <rect x="75" y="0" width="651.6749428687003" height="224">
                                         </rect>
                                     </clipPath>
                                 </defs>

package/dist/docs/components/aspectRatioPlaceholder.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/aspectRatioPlaceholder
-*Captured:* 2026-04-20T12:54:39.835Z
+*Captured:* 2026-05-06T12:14:15.868Z
 
 Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.