@rio-cloud/uikit-mcp 1.1.10 → 1.1.11

package/dist/docs/components/autosuggests.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#/components/autosuggests
-*Captured:* 2026-04-20T12:53:56.984Z
+*Captured:* 2026-04-27T14:57:32.168Z
 
 For a more flexible and smart search we highly recommend using fuse.js as searching algorithm.For more information on how to configure it, see: https://fusejs.io
 

package/dist/docs/components/avatar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/avatar
-*Captured:* 2026-04-20T12:54:42.126Z
+*Captured:* 2026-04-27T14:58:16.613Z
 
 The Avatar is a small component designed to render a users image, the initials of the users name or an icon.
 

package/dist/docs/components/banner.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/banner
-*Captured:* 2026-04-20T12:54:20.595Z
+*Captured:* 2026-04-27T14:57:55.651Z
 
 Convey information or prompt action through in-line banners, ideal for educational content, updates, or announcements.
 
@@ -68,7 +68,7 @@ export default () => {
         <div style="position: relative;">
             <div class="bg-white rounded border shadow-default padding-20 Banner display-flex text-color-darker overflow-hidden position-relative">
                 <div class="flex-1-1 overflow-hidden">
-                    <div style="opacity: 0; transform: translateX(20.2426px);">
+                    <div style="opacity: 0; transform: translateX(19.1031px);">
                         <div class="display-flex align-items-start align-items-center-ls width-100pct gap-15 ">
                             <div class="BannerIcon flex-0 margin-x-5 min-width-25 ">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="80" height="60" viewBox="0 0 773 612" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/">

package/dist/docs/components/barCharts.md

@@ -3,10 +3,12 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/barCharts
-*Captured:* 2026-04-20T12:55:38.181Z
+*Captured:* 2026-04-27T14:59:18.361Z
 
 ## BarChart
 
+> 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: Simple horizontal BarChart
 
 Simple horizontal BarChart
@@ -366,7 +368,7 @@ const data = [
     <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="468" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 468px; 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(444px, 48px);">
+                <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>

package/dist/docs/components/barList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#/components/barList
-*Captured:* 2026-04-20T12:54:09.167Z
+*Captured:* 2026-04-27T14:57:44.196Z
 
 ## 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.7179%;">
+                        <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: 49.4673%;">
                         </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: 29.763%;">
+                        <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: 31.4876%;">
                         </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: 13.4309%;">
+                        <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: 15.2012%;">
                         </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.7179%;">
+                        <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: 49.4673%;">
                         </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: 29.763%;">
+                        <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: 31.4876%;">
                         </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: 13.4309%;">
+                        <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: 15.2012%;">
                         </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>
@@ -368,21 +368,21 @@ 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: 14.1176%;">
+                <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: 14.1044%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">In transit</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: 48.1965%;">
+                <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: 47.6604%;">
                 </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: 90.9271%;">
+                <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: 89.084%;">
                 </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-04-20T12:55:13.918Z
+*Captured:* 2026-04-27T14:58:49.520Z
 
 The following map shows labels for locale de
 
@@ -45,6 +45,50 @@ const MapExample = () => (
 export default MapExample;
 ```
 
+#### Props: Map props
+
+### Map props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| credentials | MapCredentials | — | HERE credentials used to initialize the map platform. |
+| height | number | — | Height of the map container. |
+| width | number | — | Width of the map container. |
+| language | string | 'en' | Language used for HERE map labels and controls. |
+| center | Position | — | Initial center position of the map. |
+| zoom | number | — | Initial or controlled zoom level of the map. |
+| boundingBox | BoundingBox | — | Bounding box that should be fitted by the map view. |
+| disableMapEvents | boolean | — | Disables HERE map events entirely. |
+| disableBehavior | boolean | false | Disables the default HERE map behavior such as pan and zoom interaction. |
+| disableZoomMomentum | boolean | true | Disables HERE zoom momentum to reduce scroll inertia on zoom. |
+| eventListenerMap | EventListenerMap | — | Event listeners attached to the HERE map instance. |
+| hideMapSettings | boolean | — | Legacy prop for hiding map settings. |
+| hideClusterSettings | boolean | false | Hides the cluster settings entry in the map settings UI. |
+| hideMapLayerSettings | boolean | false | Hides the map layer settings entry in the map settings UI. |
+| mapType | MapType | Map.TYPE_DEFAULT | Base map type to render. |
+| mapLayer | MapLayer[] | [] | Active overlay layers such as traffic or incidents. |
+| showCluster | boolean | true | Controls whether marker clustering is enabled. |
+| showScaleBar | boolean | false | Shows the HERE scale bar. |
+| onMapTypeChange | (type: MapType, previousType?: MapType) => void | — | Callback fired when the map type changes. |
+| onMapLayerChange | (activeLayer: MapLayer[], previousLayer?: MapLayer[]) => void | — | Callback fired when the active map layers change. |
+| onShowClusterChange | (show: boolean) => void | — | Callback fired when the cluster visibility changes. |
+| onZoomIn | (zoom: number) => void | — | Callback fired when zooming in via the built-in zoom controls. |
+| onZoomOut | (zoom: number) => void | — | Callback fired when zooming out via the built-in zoom controls. |
+| onIncidentsChange | (incidentsResult: MapIncidents) => void | — | Callback used by incidents overlays to report fetched incidents. |
+| mapSettingsTooltip | string \| React.ReactNode | — | Tooltip content for the map settings entry. |
+| mapSettings | React.ReactNode | — | Custom settings UI rendered on top of the map. |
+| zoomAnimation | boolean | false | Enables animation when zoom or center changes are applied programmatically. |
+| maxViewportHistoryEntries | number | 5 | Maximum number of previous map viewports stored for viewport history. |
+| enableWebGL | boolean | true | Enables the WebGL/HARP rendering engine where supported. |
+| enableDevicePixelRatio | boolean | true | Uses window.devicePixelRatio for map rendering. |
+| enableMarkerIconCache | boolean | true | Enables caching for generated marker icons. |
+| enableFractionalZoom | boolean | false | Keeps HERE fractional zoom enabled for smoother trackpad and wheel zoom interaction. |
+| disableMarkerPointerEventsWhileZooming | boolean | false | Temporarily disables marker pointer events during zoom interactions to reduce DOM hit-testing overhead. |
+| pixelRatio | number | — | Fallback pixel ratio used when device pixel ratio support is disabled. |
+| minZoom | number | — | Minimum allowed zoom level. |
+| maxZoom | number | — | Maximum allowed zoom level. |
+| children | React.ReactNode \| ((api: MapApi, incidents?: MapIncidents) => React.ReactNode) | — | Map content or a render function receiving the map API. |
+
 ## Map with ScaleBar
 
 ### Example: Example 2

package/dist/docs/components/bottomSheet.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/bottomSheet
-*Captured:* 2026-04-20T12:53:36.995Z
+*Captured:* 2026-04-27T14:57:11.981Z
 
 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.
 

package/dist/docs/components/button.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/button
-*Captured:* 2026-04-20T12:53:42.791Z
+*Captured:* 2026-04-27T14:57:17.565Z
 
 The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
 

package/dist/docs/components/buttonToolbar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/buttonToolbar
-*Captured:* 2026-04-20T12:53:39.437Z
+*Captured:* 2026-04-27T14:57:14.185Z
 
 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-04-20T12:54:42.523Z
+*Captured:* 2026-04-27T14:58:16.887Z
 
 A headless component where you provide a function that renders the UI for every day to be displayed.
 
@@ -12,16 +12,16 @@ A headless component where you provide a function that renders the UI for every
 ### Example: Example 1
 
 Tuesday
-21 April 2026
+28 April 2026
 
 Wednesday
-22 April 2026
+29 April 2026
 
 Thursday
-23 April 2026
+30 April 2026
 
 Friday
-24 April 2026
+1 May 2026
 
 #### React (tsx)
 
@@ -117,7 +117,7 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                             <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">21 April 2026</div>
+                                    <div class="text-size-16 text-medium">28 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -129,7 +129,7 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                             <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>Wednesday</div>
-                                    <div class="text-size-16 text-medium">22 April 2026</div>
+                                    <div class="text-size-16 text-medium">29 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -141,7 +141,7 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                             <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>Thursday</div>
-                                    <div class="text-size-16 text-medium">23 April 2026</div>
+                                    <div class="text-size-16 text-medium">30 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -153,7 +153,7 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                             <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>Friday</div>
-                                    <div class="text-size-16 text-medium">24 April 2026</div>
+                                    <div class="text-size-16 text-medium">1 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -193,27 +193,31 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 ### Example: Example 2
 
 Apr
-21
+28
 2026
 
 Apr
-22
+29
 2026
 
 Apr
-23
+30
 2026
 
-Apr
-24
+May
+1
 2026
 
-Apr
-25
+May
+2
 2026
 
-Apr
-26
+May
+3
+2026
+
+May
+4
 2026
 
 Set to January Toggle Weekends
@@ -340,7 +344,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">21</div>
+                                <div class="text-size-h3 line-height-h3">28</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -349,7 +353,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">22</div>
+                                <div class="text-size-h3 line-height-h3">29</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -358,7 +362,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">23</div>
+                                <div class="text-size-h3 line-height-h3">30</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -366,8 +370,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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">24</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">1</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -375,8 +379,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 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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">25</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">2</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -384,8 +388,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 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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">26</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">3</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -393,8 +397,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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">27</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">4</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -402,8 +406,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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">28</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">5</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -411,8 +415,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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">29</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">6</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -420,8 +424,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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">30</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">7</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-04-20T12:54:18.306Z
+*Captured:* 2026-04-27T14:57:53.529Z
 
 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-04-20T12:54:19.488Z
+*Captured:* 2026-04-27T14:57:54.411Z
 
 ## Carousel
 

package/dist/docs/components/chartColors.md

@@ -3,12 +3,14 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/chartColors
-*Captured:* 2026-04-20T12:55:29.347Z
+*Captured:* 2026-04-27T14:59:09.998Z
 
 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-04-20T12:55:27.951Z
+*Captured:* 2026-04-27T14:59:09.074Z
 
 The UIKIT chart components are simple wrapper components for the Recharts charting library.
 
@@ -21,6 +21,8 @@ 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

package/dist/docs/components/chat.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#/components/chat
-*Captured:* 2026-04-20T12:55:01.046Z
+*Captured:* 2026-04-27T14:58:35.540Z
 
 The chat component is a pure CSS component.
 
@@ -445,7 +445,7 @@ export default () => {
 
 ```html
 <div class="display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden">
-    <div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -41.5391px; transform: none;">
+    <div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -1.74902px; transform: none;">
         <div class="rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth">Older messages</div>
     </div>
     <div class="scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">

package/dist/docs/components/checkbox.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/checkbox
-*Captured:* 2026-04-20T12:53:42.911Z
+*Captured:* 2026-04-27T14:57:17.951Z
 
 ## Checkbox
 
@@ -402,6 +402,8 @@ export default () => {
 
 ## Custom card example
 
+> Note: When using the custom option, make sure to wrap the children with the class name checkbox-text-wrapper. For using the checkbox tick, use an element with class name checkbox-text.
+
 ### Example: This option is a first option
 
 Custom checkbox list Option 1

package/dist/docs/components/circularProgress.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#/components/circularProgress
-*Captured:* 2026-04-20T12:54:11.336Z
+*Captured:* 2026-04-27T14:57:46.545Z
 
 ## CircularProgress
 
@@ -159,7 +159,7 @@ export default () => (
             <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
                 <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
                 </circle>
-                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="231.52284114105694">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="232.49266533852068">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center">30</div>
@@ -177,7 +177,7 @@ export default () => (
             <svg width="80" height="80" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
                 <circle cx="50" cy="50" r="48" fill="none" stroke="var(--gray-lighter)" stroke-width="4" class="">
                 </circle>
-                <circle cx="50" cy="50" r="48" fill="none" stroke="var(--brand-warning)" stroke-width="4" stroke-linecap="round" stroke-dasharray="301.59289474462014" stroke-dashoffset="131.58200590697354">
+                <circle cx="50" cy="50" r="48" fill="none" stroke="var(--brand-warning)" stroke-width="4" stroke-linecap="round" stroke-dasharray="301.59289474462014" stroke-dashoffset="134.44931222990982">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-italic">85 km/h</div>
@@ -189,7 +189,7 @@ export default () => (
             <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
                 <circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--gray-lighter)" stroke-width="3" class="">
                 </circle>
-                <circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--brand-info)" stroke-width="3" stroke-linecap="round" stroke-dasharray="304.7344873982099" stroke-dashoffset="223.89597652932892">
+                <circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--brand-info)" stroke-width="3" stroke-linecap="round" stroke-dasharray="304.7344873982099" stroke-dashoffset="225.25935257503883">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-size-16 text-medium text-color-dark">40%</div>
@@ -201,7 +201,7 @@ export default () => (
             <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
                 <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
                 </circle>
-                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="225.1335430311454">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="226.21112547277178">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-size-">100</div>
@@ -386,14 +386,14 @@ export default () => {
 
 ```html
 <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:rb:">
-    <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="10" aria-valuetext="10%" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+    <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" aria-valuetext="20%" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
         <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
             <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
             </circle>
-            <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-info)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="262.4829664181983">
+            <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-info)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="261.38903288417055">
             </circle>
         </svg>
-        <div class="position-absolute display-grid place-items-center">10%</div>
+        <div class="position-absolute display-grid place-items-center">20%</div>
     </div>
     <div id="circular-progress-label-:rb:" class="">Processing configuration...</div>
 </div>