@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/accentBar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/accentBar
-*Captured:* 2026-01-07T12:11:49.911Z
+*Captured:* 2026-02-03T14:04:55.940Z
 
 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.
 
@@ -79,7 +79,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
 | circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
 | className | string | — | Additional class names passed to the actual element. |
 
@@ -232,7 +232,7 @@ const getStatusColor = (status: string) => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
 | circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
 | className | string | — | Additional class names passed to the actual element. |
 
@@ -441,7 +441,7 @@ const getStatusColor = (status: string) => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
 | circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
 | className | string | — | Additional class names passed to the actual element. |
 
@@ -577,6 +577,6 @@ const getRiskColor = (riskLevel: string) => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
 | circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
 | className | string | — | Additional class names passed to the actual element. |

package/dist/docs/components/activity.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/activity
-*Captured:* 2026-01-07T12:11:48.559Z
+*Captured:* 2026-02-03T14:04:54.335Z
 
 ## Activity
 
@@ -322,9 +322,9 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| activity | String | — | Defines the type of activity. Possible values are: Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING. |
-| duration | String / Node | — | The actual duration value to be shown. |
-| isOutdated | Boolean | false | Indicated whether the activity is outdated. |
-| bsSize | String | — | Define how large the component should be rendered. Possible values are: Activity.SIZE_SM, Activity.SIZE_LG or Activity.SIZE_XL. |
-| onClick | Function | () => {} | Callback function for when the component is clicked. |
-| className | String | — | Additional classes for the wrapper element. |
+| activity | ActivityStatus | — | Defines the type of activity. Possible values are Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING. |
+| bsSize | ActivitySize | — | Define how large the component should be rendered. Possible values are Activity.SIZE_SM, Activity.SIZE_LG or Activity.SIZE_XL. |
+| duration | string \| ReactNode | — | The actual duration value to be shown. |
+| isOutdated | boolean | false | Indicates whether the activity is outdated. |
+| onClick | VoidFunction | — | Callback function for when the component is clicked. |
+| className | string | — | Additional classes for the wrapper element. |

package/dist/docs/components/animatedNumber.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animatedNumber
-*Captured:* 2026-01-07T12:11:33.899Z
+*Captured:* 2026-02-03T14:04:38.677Z
 
 ## AnimatedNumber
 
@@ -59,7 +59,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="">26</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">
@@ -78,11 +78,11 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| start | Number | — | The start value. |
-| end | Number | — | The end value. |
-| prefix | String | — | A prefix to be added to the final string. |
-| unit | String | — | A unit suffix to be added to the final string. |
-| speed | Number | 10 | The speed in milliseconds to count up or down. |
-| decreasing | Boolean | false | Enables to count backwards. |
-| onEnd | Function | — | Callback function to be invoked when the end value is reached. |
-| className | String | — | Additional classes to be set on the wrapping element. |
+| start | number | — | The start value. |
+| end | number | — | The end value. |
+| prefix | string | — | A prefix to be added to the final string. |
+| unit | string | — | A unit suffix to be added to the final string. |
+| speed | number | 10 | The speed in milliseconds to count up or down. |
+| decreasing | boolean | false | Enables to count backwards. |
+| onEnd | VoidFunction | — | Callback function to be invoked when the end value is reached. |
+| className | string | — | Additional classes to be set on the wrapping element. |

package/dist/docs/components/animatedTextReveal.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animatedTextReveal
-*Captured:* 2026-01-07T12:11:35.101Z
+*Captured:* 2026-02-03T14:04:39.333Z
 
 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.
 
@@ -136,7 +136,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.347296; transform: translateY(8.69958px);">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.331249; transform: translateY(8.78522px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -148,7 +148,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.347296; transform: translateY(8.69958px);">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.331249; transform: translateY(8.78522px);">Processing your request...</div>
             </div>
         </div>
     </div>
@@ -156,7 +156,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.36812px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -164,7 +164,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.36812px);">System is thinking...</div>
             </div>
         </div>
     </div>
@@ -173,7 +173,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.36812px);">Continue</div>
                 </div>
             </button>
         </div>
@@ -185,24 +185,24 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| text | String \| String[] | — | Text content to display. Accepts a string or an array of phrases that are revealed and cycled through automatically. |
-| duration | Number | 0.4 | Reveal animation duration in seconds. |
-| delay | Number | 0 | Reveal animation delay before starting, in seconds. |
-| interval | Number | 3 | Interval time between phrase transitions when multiple texts are provided, in seconds. |
-| distance | Number | 10 | Vertical offset in pixels from which the text reveals upward. |
-| ease | "linear" \| "easeIn" \| "easeOut" \| "easeInOut" | "easeOut" | Easing function applied to the reveal motion. |
-| startOnView | Boolean | true | Whether the animation should only start once the component enters the viewport when scrolling. |
-| once | Boolean | false | If true, the reveal animation runs only once per mount when the component enters the viewport. |
-| inViewMargin | String | — | Optional root margin passed to the intersection observer for in-view detection (e.g., "0px 0px -10% 0px"). See motion/react for more details |
-| shimmer | Boolean | true | Enables or disables the shimmer highlight effect across the text. |
-| shimmerDuration | Number | 5 | Duration of one shimmer loop in seconds. |
-| shimmerDelay | Number | 0 | Delay before the shimmer effect starts, in seconds. |
-| shimmerSpread | Number | 8 | Multiplier controlling the width of the shimmer highlight band. |
-| shimmerRepeat | Boolean | true | If true, the shimmer animation loops infinitely. |
-| shimmerColor | "black" \| "darkest" \| "darker" \| "dark" \| "gray" \| "light" \| "lighter" \| "lightest" \| "white" | — | The color of the shimmer highlight band. |
-| textColor | "black" \| "darkest" \| "darker" \| "dark" \| "gray" \| "light" \| "lighter" \| "lightest" \| "white" \| "primary" \| "secondary" \| "info" \| "warning" \| "danger" \| "success" | — | Base color of the text. |
-| innerClassName | String | — | Additional classNames set on the inner element. |
-| className | String | — | Additional class names to apply to the wrapper element. |
+| text | string \| string[] | — | Text content to display. Accepts a string or an array of phrases that are revealed and cycled through automatically. |
+| duration | number | 0.4 | Reveal animation duration in seconds. |
+| delay | number | 0 | Reveal animation delay before starting, in seconds. |
+| interval | number | 3 | Interval time between phrase transitions when multiple texts are provided, in seconds. |
+| distance | number | 10 | Vertical offset in pixels from which the text reveals upward. |
+| ease | 'linear' \| 'easeIn' \| 'easeOut' \| 'easeInOut' | 'easeOut' | Easing function applied to the reveal motion. |
+| startOnView | boolean | true | Whether the animation should only start once the component enters the viewport when scrolling. |
+| once | boolean | false | If true, the reveal animation runs only once per mount when the component enters the viewport. |
+| inViewMargin | UseInViewOptions['margin'] | — | Optional root margin passed to the intersection observer for in-view detection (e.g., "0px 0px -10% 0px"). |
+| shimmer | boolean | true | Enables or disables the shimmer highlight effect across the text. |
+| shimmerDuration | number | 5 | Duration of one shimmer loop in seconds. |
+| shimmerDelay | number | 0 | Delay before the shimmer effect starts, in seconds. |
+| shimmerSpread | number | 8 | Multiplier controlling the width of the shimmer highlight band. |
+| shimmerRepeat | boolean | true | If true, the shimmer animation loops infinitely. |
+| shimmerColor | 'black' \| 'darkest' \| 'darker' \| 'dark' \| 'gray' \| 'light' \| 'lighter' \| 'lightest' \| 'white' | 'lighter' | The color of the shimmer highlight band. |
+| textColor | 'black' \| 'darkest' \| 'darker' \| 'dark' \| 'gray' \| 'light' \| 'lighter' \| 'lightest' \| 'white' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'danger' \| 'success' | 'darkest' | Base color of the text. |
+| innerClassName | string | — | Additional classNames set on the inner element. |
+| className | string | — | Additional classNames set on the wrapper element. |
 
 ### Example: Status
 
@@ -232,7 +232,6 @@ import AnimatedTextReveal from '@rio-cloud/rio-uikit/AnimatedTextReveal';
 import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
 import Divider from '@rio-cloud/rio-uikit/Divider';
 import Button from '@rio-cloud/rio-uikit/Button';
-import Fade from '@rio-cloud/rio-uikit/Fade';
 
 type StatusKey = 'idle' | 'connecting' | 'syncing' | 'done';
 
@@ -361,21 +360,21 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| text | String \| String[] | — | Text content to display. Accepts a string or an array of phrases that are revealed and cycled through automatically. |
-| duration | Number | 0.4 | Reveal animation duration in seconds. |
-| delay | Number | 0 | Reveal animation delay before starting, in seconds. |
-| interval | Number | 3 | Interval time between phrase transitions when multiple texts are provided, in seconds. |
-| distance | Number | 10 | Vertical offset in pixels from which the text reveals upward. |
-| ease | "linear" \| "easeIn" \| "easeOut" \| "easeInOut" | "easeOut" | Easing function applied to the reveal motion. |
-| startOnView | Boolean | true | Whether the animation should only start once the component enters the viewport when scrolling. |
-| once | Boolean | false | If true, the reveal animation runs only once per mount when the component enters the viewport. |
-| inViewMargin | String | — | Optional root margin passed to the intersection observer for in-view detection (e.g., "0px 0px -10% 0px"). See motion/react for more details |
-| shimmer | Boolean | true | Enables or disables the shimmer highlight effect across the text. |
-| shimmerDuration | Number | 5 | Duration of one shimmer loop in seconds. |
-| shimmerDelay | Number | 0 | Delay before the shimmer effect starts, in seconds. |
-| shimmerSpread | Number | 8 | Multiplier controlling the width of the shimmer highlight band. |
-| shimmerRepeat | Boolean | true | If true, the shimmer animation loops infinitely. |
-| shimmerColor | "black" \| "darkest" \| "darker" \| "dark" \| "gray" \| "light" \| "lighter" \| "lightest" \| "white" | — | The color of the shimmer highlight band. |
-| textColor | "black" \| "darkest" \| "darker" \| "dark" \| "gray" \| "light" \| "lighter" \| "lightest" \| "white" \| "primary" \| "secondary" \| "info" \| "warning" \| "danger" \| "success" | — | Base color of the text. |
-| innerClassName | String | — | Additional classNames set on the inner element. |
-| className | String | — | Additional class names to apply to the wrapper element. |
+| text | string \| string[] | — | Text content to display. Accepts a string or an array of phrases that are revealed and cycled through automatically. |
+| duration | number | 0.4 | Reveal animation duration in seconds. |
+| delay | number | 0 | Reveal animation delay before starting, in seconds. |
+| interval | number | 3 | Interval time between phrase transitions when multiple texts are provided, in seconds. |
+| distance | number | 10 | Vertical offset in pixels from which the text reveals upward. |
+| ease | 'linear' \| 'easeIn' \| 'easeOut' \| 'easeInOut' | 'easeOut' | Easing function applied to the reveal motion. |
+| startOnView | boolean | true | Whether the animation should only start once the component enters the viewport when scrolling. |
+| once | boolean | false | If true, the reveal animation runs only once per mount when the component enters the viewport. |
+| inViewMargin | UseInViewOptions['margin'] | — | Optional root margin passed to the intersection observer for in-view detection (e.g., "0px 0px -10% 0px"). |
+| shimmer | boolean | true | Enables or disables the shimmer highlight effect across the text. |
+| shimmerDuration | number | 5 | Duration of one shimmer loop in seconds. |
+| shimmerDelay | number | 0 | Delay before the shimmer effect starts, in seconds. |
+| shimmerSpread | number | 8 | Multiplier controlling the width of the shimmer highlight band. |
+| shimmerRepeat | boolean | true | If true, the shimmer animation loops infinitely. |
+| shimmerColor | 'black' \| 'darkest' \| 'darker' \| 'dark' \| 'gray' \| 'light' \| 'lighter' \| 'lightest' \| 'white' | 'lighter' | The color of the shimmer highlight band. |
+| textColor | 'black' \| 'darkest' \| 'darker' \| 'dark' \| 'gray' \| 'light' \| 'lighter' \| 'lightest' \| 'white' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'danger' \| 'success' | 'darkest' | Base color of the text. |
+| innerClassName | string | — | Additional classNames set on the inner element. |
+| className | string | — | Additional classNames set on the wrapper element. |

package/dist/docs/components/animations.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/animations
-*Captured:* 2026-01-07T12:11:35.058Z
+*Captured:* 2026-02-03T14:04:39.064Z
 
 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.
 
@@ -53,7 +53,7 @@ export default () => {
 #### HTML (html)
 
 ```html
-<div style="opacity: 0.880618;">
+<div style="opacity: 0.891318;">
     <div class="margin-10">
         <label>Some Data</label>
         <div>
@@ -74,6 +74,7 @@ export default () => {
 
 ```tsx
 import { motion } from '@rio-cloud/rio-uikit/motion';
+import type { ComponentProps } from 'react';
 
 const icons = {
     check: {
@@ -87,7 +88,14 @@ const icons = {
     },
 };
 
-const AnimatedIcon = props => {
+type IconName = keyof typeof icons;
+
+type AnimatedIconProps = ComponentProps<'svg'> & {
+    icon?: IconName;
+    delay?: number;
+};
+
+const AnimatedIcon = (props: AnimatedIconProps) => {
     const { icon = 'check', delay = 0.2, ...remainingProps } = props;
     return (
         <svg
@@ -161,13 +169,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="0px" stroke-dasharray="0.9387635586608667px 1px">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.8869888990011532px 1px">
             </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="0px" stroke-dasharray="0.003376702225068584px 1px">
+            <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="0px" stroke-dasharray="0px 1px">
             </path>
         </svg>
     </div>
@@ -176,21 +184,21 @@ export default () => (
 
 ### Example: Example 3
 
-Add ItemItem YUWCXY4QCL
+Add ItemItem SAY31NI9JY
 
-Item 18Z0QVGEMQ
+Item 3Y845VKS7Q
 
-Item KQ9QJ25F3B
+Item 2TR06HFALV
 
 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.
 
 #### Summary
 
-Add ItemItem YUWCXY4QCL
+Add ItemItem SAY31NI9JY
 
-Item 18Z0QVGEMQ
+Item 3Y845VKS7Q
 
-Item KQ9QJ25F3B
+Item 2TR06HFALV
 
 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.
 
@@ -205,13 +213,13 @@ import Button from '@rio-cloud/rio-uikit/Button';
 import { dummyText } from '../../../utils/data';
 
 const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
-const generateItems = length => Array.from({ length }, () => getRandomString());
+const generateItems = (length: number) => Array.from({ length }, () => getRandomString());
 
 export default () => {
     const [items, setItems] = useState([...generateItems(3)]);
 
     const handleAddItem = () => setItems(items => [...items, getRandomString()]);
-    const handleRemoveItem = item => setItems(items => items.filter(i => i !== item));
+    const handleRemoveItem = (item: string) => setItems(items => items.filter(i => i !== item));
 
     return (
         <div>
@@ -259,7 +267,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 YUWCXY4QCL</div>
+                    <div>Item SAY31NI9JY</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 +278,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 18Z0QVGEMQ</div>
+                    <div>Item 3Y845VKS7Q</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>
@@ -281,7 +289,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 KQ9QJ25F3B</div>
+                    <div>Item 2TR06HFALV</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>
@@ -297,31 +305,31 @@ export default () => {
 
 ### Example: Example 4
 
-Load ItemsItem 4NYRNZDOEAJ
+Load ItemsItem Y3E1PAWU4G
 
-Item 9XGVIHIZDRK
+Item 03RN4LBQUH
 
-Item ZP0PGXK14B
+Item RNLIJUFWD1
 
-Item N4PC0EB2RM
+Item USNNCEUF3C
 
-Item KO6IY6WXTC
+Item S6FC5S6QMJ
 
-Item KC0LC7DH2MH
+Item 01C0J9EA59
 
 #### Summary
 
-Load ItemsItem 4NYRNZDOEAJ
+Load ItemsItem Y3E1PAWU4G
 
-Item 9XGVIHIZDRK
+Item 03RN4LBQUH
 
-Item ZP0PGXK14B
+Item RNLIJUFWD1
 
-Item N4PC0EB2RM
+Item USNNCEUF3C
 
-Item KO6IY6WXTC
+Item S6FC5S6QMJ
 
-Item KC0LC7DH2MH
+Item 01C0J9EA59
 
 #### React (tsx)
 
@@ -388,7 +396,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 4NYRNZDOEAJ</span>
+                            <span>Item Y3E1PAWU4G</span>
                         </div>
                     </span>
                 </span>
@@ -400,7 +408,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item 9XGVIHIZDRK</span>
+                            <span>Item 03RN4LBQUH</span>
                         </div>
                     </span>
                 </span>
@@ -412,7 +420,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item ZP0PGXK14B</span>
+                            <span>Item RNLIJUFWD1</span>
                         </div>
                     </span>
                 </span>
@@ -424,7 +432,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item N4PC0EB2RM</span>
+                            <span>Item USNNCEUF3C</span>
                         </div>
                     </span>
                 </span>
@@ -436,7 +444,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item KO6IY6WXTC</span>
+                            <span>Item S6FC5S6QMJ</span>
                         </div>
                     </span>
                 </span>
@@ -448,7 +456,7 @@ export default () => {
                 <span class="checkbox-text">
                     <span>
                         <div class="display-flex gap-5">
-                            <span>Item KC0LC7DH2MH</span>
+                            <span>Item 01C0J9EA59</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-01-07T12:11:05.673Z
+*Captured:* 2026-02-03T14:04:05.995Z
 
 This is the header component for all services. All navigation link components that are passed into the header should be based on react-router
 
@@ -363,24 +363,11 @@ export default AppHeaderExample;
 </div>
 ```
 
-#### Props
+#### Props (json)
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| label | Node | — | The service name shown as the navigator dropdown label. |
-| homeRoute | Node | — | The home URL that shall be used for the home button. Pass a react-router-dom NavLink as homeRoute into the header. For example: <NavLink to='https://home.rio.cloud' /> |
-| showHomeIcon | Boolean | true | Defines to either show the home icon or the RIO logo as brand logo. |
-| appNavigator | Node | — | The component for the navigation between apps which will be shown inside the main dropdown. Platform apps may use the default AppNavigator but there are also other cases like support apps where it's just a simple list In this case, use the prop appMenuItems. If no appNavigator is defined, the dropdown menu will not be rendered. |
-| appNavigatorClassName | String | — | Additional class names that are added to the appNavigator. |
-| appMenuItems | Array | — | List of application navigation link components. |
-| └key | String | — | Unique key for the navigation component. |
-| └route | Node | — | The navigation link component used for rendering the name and for routing. For example: <NavLink to='/app1'>{'App 1'}</NavLink> |
-| navItems | Array | — | List of sub-module navigation component of an app. Items collapse into a dropdown if remaining space in the header is not sufficient. |
-| └key | String | — | Unique key for the sub-module navigation component of an app. |
-| └route | Node | — | The navigation link component used for rendering the name and for routing. For example: <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink> |
-| actionBarItems | Array of Nodes | [] | List of external smart components like the rio-accountmenu or application owned components such as a ServiceInfo icon. These components are based on the ActionBarItem |
-| onToggleAppMenu | (isOpen: boolean) => void | — | Callback function triggered when the application menu is open or closed. |
-| className | String | — | Additional class names that are added to the wrapper component. |
+```json
+<NavLink to='https://home.rio.cloud' />
+```
 
 ## ActionBarItem
 
@@ -690,14 +677,12 @@ export default ActionBarItemsExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | The id is used to identify the item in the DOM. If not provided, a random id is used instead. |
-| title | String | — | The title property for the sub component ActionBarItem.Popover. This can be a String or another component as well as a React-Intl component. |
-| className | String | — | Additional class names that are added to the respective component. It can be defined for the parent and all sub components. |
-| mobileDialogBodyClassName | String | — | Additional class names that are added to dialog fallback modal-body element. |
-| hidePopoverOnClick | Boolean | true | Defined if the popover should close when any child element is being clicked. |
-| popoverWidth | Number | 250 | Possible values are: 100, 150, 200, 250, 300, 350, 400, 450 or 500 |
-| useOffscreen | Boolean | — | Set on ActionBarItem.Popover in order to render the Popover content in the offscreen to have it in place and loaded when the Popover is shown. This flag ignored for mobile, in order to save energy. |
-| children | any | — | Any component given to the sub components will be within the respective area. NoteChild elements for ActionItemBar.Icon such as rioglyph or svg icons that shall be shown as icon in the header must have set the class icon |
+| id | string | — | The id is used to identify the item in the DOM. If not provided, a random id is used instead. |
+| title | string \| React.ReactNode | — | The title property for the sub-component ActionBarItem.Popover. This can be a String or another component as well as a React-Intl component. |
+| className | string | — | Additional class names that are added to the respective component. It can be defined for the parent and all sub-components. |
+| hidePopoverOnClick | boolean | true | Defines if the popover should close when any child element is being clicked. |
+| popoverWidth | ActionBarItemPopoverWidth | 250 | Possible values are 100, 150, 200, 250, 300, 350, 400, 450 or 500. |
+| mobileDialogBodyClassName | string | — | Additional class names that are added to dialog fallback modal-body element. |
 
 #### Props: ActionBarItem.List
 
@@ -705,7 +690,7 @@ export default ActionBarItemsExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the wrapping list item component. |
+| className | string | — | Additional class names that are added to the wrapping list item component. |
 
 #### Props: ActionBarItem.ListItem
 
@@ -713,10 +698,10 @@ export default ActionBarItemsExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| hasLink | Boolean | — | Set it to true when you want to use the item as link item. In case, please use the Link component from react-router-dom instead of an anchor tag to prevent side effects when automatically closing the popover. |
-| icon | String | — | The name of the icon to be used for the item. |
-| onClick | Function | — | Callback function to be triggered when the internal button of a list item is clicked. Note: When no callback function is provided, the children are rendered as is without wrapping them in a button. |
-| className | String | — | Additional class names that are added to the wrapping list item component. |
+| hasLink | boolean | — | Set it to true when you want to use the item as link item. In this case, please use the Link component from react-router-dom instead of an anchor tag to prevent side effects when automatically closing the popover. |
+| icon | string | — | The name of the icon to be used for the item. |
+| onClick | VoidFunction | — | Callback function to be triggered when the internal button of a list item is clicked. Note: When no callback function is provided, the children are rendered as is without wrapping them in a button. |
+| className | string | — | Additional class names that are added to the wrapping list item component. |
 
 #### Props: ActionBarItem.ListSeparator
 
@@ -724,7 +709,7 @@ export default ActionBarItemsExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the wrapping list item component. |
+| className | string | — | Additional class names that are added to the wrapping list item component. |
 
 #### Props: ActionBarItem.Popover
 
@@ -732,6 +717,6 @@ export default ActionBarItemsExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| title | String / Node | — | The popover title. |
-| useOffscreen | Boolean | false | Define whether the popover content shall be rendered behind the scene to pre-load content or to avoid unmounting the content component |
-| className | String | — | Additional class names that are added to the popover content. |
+| title | string \| ReactNode | — | The popover title. |
+| useOffscreen | boolean | — | Define whether the popover content shall be rendered behind the scene. This allows to preload content or to avoid unmounting the content component. |
+| className | string | — | Additional class names that are added to the popover content. |