@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/components/barList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#/components/barList
-*Captured:* 2026-03-06T10:40:31.259Z
+*Captured:* 2026-04-20T12:54:09.167Z
 
 ## BarList
 
@@ -134,21 +134,21 @@ const transportData = [
             <div class="display-flex justify-content-between gap-15">
                 <div class="width-100pct space-y-5">
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.0444%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.7179%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 28.9962%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 29.763%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <div class="text-color-darker">Warehouse efficiency</div>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.6839%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 13.4309%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
@@ -193,21 +193,21 @@ const transportData = [
             <div class="display-flex justify-content-between gap-15 flex-row-reverse gap-10">
                 <div class="width-100pct space-y-5">
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.0444%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.7179%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 28.9962%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 29.763%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <div class="text-color-darker">Warehouse efficiency</div>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.6839%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 13.4309%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
@@ -375,14 +375,14 @@ const transportData = [
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.7735%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.1965%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">Stored in warehouse</div>
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 93.1069%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 90.9271%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">Shipped packages</div>

package/dist/docs/components/basicMap.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/basicMap
-*Captured:* 2026-03-06T10:41:15.195Z
+*Captured:* 2026-04-20T12:55:13.918Z
 
 The following map shows labels for locale de
 
@@ -11,7 +11,16 @@ The following map shows labels for locale de
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
 
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 
@@ -22,18 +31,16 @@ import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../u
 
 const position = { lat: 48.1351, lng: 11.582 };
 
-const MapExample = () => {
-    return (
-        <div className='height-300'>
-            <Map
-                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-                center={position}
-                zoom={10}
-                hideMapSettings
-            />
-        </div>
-    );
-};
+const MapExample = () => (
+    <div className='height-300'>
+        <Map
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            center={position}
+            zoom={10}
+            hideMapSettings
+        />
+    </div>
+);
 
 export default MapExample;
 ```
@@ -42,7 +49,16 @@ export default MapExample;
 
 ### Example: Example 2
 
+Terms of use © 1987–2026 HERE
+
+10 km
 
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 
@@ -52,19 +68,17 @@ import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../u
 
 const position = { lat: 48.1351, lng: 11.582 };
 
-const MapWithScaleBarExample = () => {
-    return (
-        <div className='height-300'>
-            <Map
-                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-                center={position}
-                zoom={10}
-                hideMapSettings
-                showScaleBar
-            />
-        </div>
-    );
-};
+const MapWithScaleBarExample = () => (
+    <div className='height-300'>
+        <Map
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            center={position}
+            zoom={10}
+            hideMapSettings
+            showScaleBar
+        />
+    </div>
+);
 
 export default MapWithScaleBarExample;
 ```
@@ -73,7 +87,16 @@ export default MapWithScaleBarExample;
 
 ### Example: Example 3
 
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Ansicht auswählen
+Kartenansicht
+Satellit
 
+Verkehrslage
+Verkehrsstörungen anzeigen
 
 #### React (tsx)
 
@@ -83,19 +106,17 @@ import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../u
 
 const position = { lat: 48.1351, lng: 11.582 };
 
-const MapLocalizationExample = () => {
-    return (
-        <div className='height-300'>
-            <Map
-                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-                language='de'
-                center={position}
-                zoom={10}
-                hideMapSettings
-            />
-        </div>
-    );
-};
+const MapLocalizationExample = () => (
+    <div className='height-300'>
+        <Map
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            language='de'
+            center={position}
+            zoom={10}
+            hideMapSettings
+        />
+    </div>
+);
 
 export default MapLocalizationExample;
 ```

package/dist/docs/components/bottomSheet.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/bottomSheet
-*Captured:* 2026-03-06T10:40:01.800Z
+*Captured:* 2026-04-20T12:53:36.995Z
 
 The TimedBottomSheet is a wrapper component for the BottomSheet that allows to control it's visibility via timers and to use the localStorage to save user interaction for handling it's visibility.
 
@@ -199,7 +199,7 @@ export default () => {
 #### HTML (html)
 
 ```html
-<div data-capture-callout="true">
+<div>
     <p class="margin-top-0">This demonstrates a bottom sheet use case on <b>mobile. </b>This can be used for providing additional information on mobile instead of using a sidebar, onboarding, alternative for dialogs etc.</p>
     <p>
         <span class="label label-info label-condensed margin-right-5">Note</span>This example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.

package/dist/docs/components/button.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/button
-*Captured:* 2026-03-06T10:40:07.427Z
+*Captured:* 2026-04-20T12:53:42.791Z
 
 The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
 
@@ -258,6 +258,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -350,7 +351,7 @@ export default () => (
 #### HTML (html)
 
 ```html
-<div data-capture-callout="true">
+<div>
     <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Buttons with link styles</div>
     <div class="btn-toolbar">
         <button type="button" class="btn btn-primary btn-link btn-component" tabindex="0">
@@ -398,6 +399,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -580,6 +582,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -710,6 +713,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -997,6 +1001,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -1145,6 +1150,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 

package/dist/docs/components/buttonToolbar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/buttonToolbar
-*Captured:* 2026-03-06T10:40:03.868Z
+*Captured:* 2026-04-20T12:53:39.437Z
 
 The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.
 

package/dist/docs/components/calendarStripe.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/calendarStripe
-*Captured:* 2026-03-06T10:40:56.891Z
+*Captured:* 2026-04-20T12:54:42.523Z
 
 A headless component where you provide a function that renders the UI for every day to be displayed.
 
@@ -11,17 +11,17 @@ A headless component where you provide a function that renders the UI for every
 
 ### Example: Example 1
 
-Saturday
-7 March 2026
+Tuesday
+21 April 2026
 
-Sunday
-8 March 2026
+Wednesday
+22 April 2026
 
-Monday
-9 March 2026
+Thursday
+23 April 2026
 
-Tuesday
-10 March 2026
+Friday
+24 April 2026
 
 #### React (tsx)
 
@@ -113,11 +113,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
             <div style="opacity: 1; transform: none;">
                 <div class="display-flex space-x--1 user-select-none">
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Saturday</div>
-                                    <div class="text-size-16 text-medium">7 March 2026</div>
+                                    <div>Tuesday</div>
+                                    <div class="text-size-16 text-medium">21 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -125,11 +125,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Sunday</div>
-                                    <div class="text-size-16 text-medium">8 March 2026</div>
+                                    <div>Wednesday</div>
+                                    <div class="text-size-16 text-medium">22 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -140,8 +140,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Monday</div>
-                                    <div class="text-size-16 text-medium">9 March 2026</div>
+                                    <div>Thursday</div>
+                                    <div class="text-size-16 text-medium">23 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -152,8 +152,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Tuesday</div>
-                                    <div class="text-size-16 text-medium">10 March 2026</div>
+                                    <div>Friday</div>
+                                    <div class="text-size-16 text-medium">24 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -192,36 +192,28 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 
 ### Example: Example 2
 
-Mar
-7
+Apr
+21
 2026
 
-Mar
-8
+Apr
+22
 2026
 
-Mar
-9
+Apr
+23
 2026
 
-Mar
-10
+Apr
+24
 2026
 
-Mar
-11
+Apr
+25
 2026
 
-Mar
-12
-2026
-
-Mar
-13
-2026
-
-Mar
-14
+Apr
+26
 2026
 
 Set to January Toggle Weekends
@@ -345,19 +337,19 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
             <div style="opacity: 1; transform: none;">
                 <div class="display-flex space-x--1 user-select-none">
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">7</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">21</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">8</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">22</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -365,8 +357,8 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">9</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">23</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -374,26 +366,26 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">10</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">24</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">11</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">25</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">12</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">26</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -401,26 +393,26 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">13</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">27</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">14</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">28</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">15</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">29</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -428,8 +420,8 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Mar</div>
-                                <div class="text-size-h3 line-height-h3">16</div>
+                                <div class="text-size-12 line-height-12">Apr</div>
+                                <div class="text-size-h3 line-height-h3">30</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>

package/dist/docs/components/card.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/card
-*Captured:* 2026-03-06T10:40:37.908Z
+*Captured:* 2026-04-20T12:54:18.306Z
 
 The Card is a utility component designed to simplify usage of default card styling.
 

package/dist/docs/components/carousel.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/carousel
-*Captured:* 2026-03-06T10:40:38.118Z
+*Captured:* 2026-04-20T12:54:19.488Z
 
 ## Carousel
 

package/dist/docs/components/chartColors.md

@@ -3,14 +3,12 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/chartColors
-*Captured:* 2026-03-06T10:41:23.285Z
+*Captured:* 2026-04-20T12:55:29.347Z
 
 The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.
 
 ## Chart Colors
 
-> Note: The warmup and coldplay colors are to be preferred. Other colors may be used as fallback.
-
 ### Example: Example 1
 
 Warmup colors

package/dist/docs/components/chartsGettingStarted.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/chartsGettingStarted
-*Captured:* 2026-03-06T10:41:22.405Z
+*Captured:* 2026-04-20T12:55:27.951Z
 
 The UIKIT chart components are simple wrapper components for the Recharts charting library.
 
@@ -21,8 +21,6 @@ However, we recommend tree-shaking the UIKIT, which means the components you do
 
 import PieChart from '@rio-cloud/rio-uikit/PieChart';
 
-> 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.
-
 ## Ideas for better data visualization
 
 Consider some of the ideas and tips listed on that article: https://uxdesign.cc/20-ideas-for-better-data-visualization-73f7e3c2782d