@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

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-05-06T12:13:33.924Z
 
 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-05-06T12:14:18.214Z
 
 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-05-06T12:13:57.256Z
 
 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(22.4386px);">
                         <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-05-06T12:15:13.810Z
 
 ## 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
@@ -115,43 +117,43 @@ const data = [
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="7.8" y="60.3548" width="62" height="162.6452" class="recharts-rectangle" d="M7.8,63.3548A 3,3,0,0,1,10.8,60.3548L 66.8,60.3548A 3,3,0,0,1,
-        69.8,63.3548L 69.8,223L 7.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="7.8" y="64.0947" width="62" height="158.9053" class="recharts-rectangle" d="M7.8,67.0947A 3,3,0,0,1,10.8,64.0947L 66.8,64.0947A 3,3,0,0,1,
+        69.8,67.0947L 69.8,223L 7.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="85.8" y="146.5429" width="62" height="76.4571" class="recharts-rectangle" d="M85.8,149.5429A 3,3,0,0,1,88.8,146.5429L 144.8,146.5429A 3,3,0,0,1,
-        147.8,149.5429L 147.8,223L 85.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="85.8" y="148.3009" width="62" height="74.6991" class="recharts-rectangle" d="M85.8,151.3009A 3,3,0,0,1,88.8,148.3009L 144.8,148.3009A 3,3,0,0,1,
+        147.8,151.3009L 147.8,223L 85.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="163.8" y="179.906" width="62" height="43.094" class="recharts-rectangle" d="M163.8,182.906A 3,3,0,0,1,166.8,179.906L 222.8,179.906A 3,3,0,0,1,
-        225.8,182.906L 225.8,223L 163.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="163.8" y="180.8969" width="62" height="42.1031" class="recharts-rectangle" d="M163.8,183.8969A 3,3,0,0,1,166.8,180.8969L 222.8,180.8969A 3,3,0,0,1,
+        225.8,183.8969L 225.8,223L 163.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="241.8" y="209.5157" width="62" height="13.4843" class="recharts-rectangle" d="M241.8,212.5157A 3,3,0,0,1,244.8,209.5157L 300.8,209.5157A 3,3,0,0,1,
-        303.8,212.5157L 303.8,223L 241.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="241.8" y="209.8258" width="62" height="13.1742" class="recharts-rectangle" d="M241.8,212.8258A 3,3,0,0,1,244.8,209.8258L 300.8,209.8258A 3,3,0,0,1,
+        303.8,212.8258L 303.8,223L 241.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="319.8" y="211.7747" width="62" height="11.2253" class="recharts-rectangle" d="M319.8,214.7747A 3,3,0,0,1,322.8,211.7747L 378.8,211.7747A 3,3,0,0,1,
-        381.8,214.7747L 381.8,223L 319.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="319.8" y="212.0328" width="62" height="10.9672" class="recharts-rectangle" d="M319.8,215.0328A 3,3,0,0,1,322.8,212.0328L 378.8,212.0328A 3,3,0,0,1,
+        381.8,215.0328L 381.8,223L 319.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="397.8" y="206.7702" width="62" height="16.2298" class="recharts-rectangle" d="M397.8,209.7702A 3,3,0,0,1,400.8,206.7702L 456.8,206.7702A 3,3,0,0,1,
-        459.8,209.7702L 459.8,223L 397.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="397.8" y="207.1434" width="62" height="15.8566" class="recharts-rectangle" d="M397.8,210.1434A 3,3,0,0,1,400.8,207.1434L 456.8,207.1434A 3,3,0,0,1,
+        459.8,210.1434L 459.8,223L 397.8,223Z">
                                             </path>
                                         </g>
                                     </g>
@@ -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-05-06T12:13:45.830Z
 
 ## 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: 47.0444%;">
                         </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: 28.9962%;">
                         </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: 12.6839%;">
                         </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: 47.0444%;">
                         </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: 28.9962%;">
                         </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: 12.6839%;">
                         </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.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: 48.7735%;">
                 </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: 93.1069%;">
                 </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-05-06T12:14:49.921Z
 
 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-05-06T12:13:13.920Z
 
 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-05-06T12:13:19.321Z
 
 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-05-06T12:13:16.478Z
 
 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-05-06T12:14:18.569Z
 
 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
 
-Tuesday
-21 April 2026
-
-Wednesday
-22 April 2026
-
 Thursday
-23 April 2026
+7 May 2026
 
 Friday
-24 April 2026
+8 May 2026
+
+Saturday
+9 May 2026
+
+Sunday
+10 May 2026
 
 #### React (tsx)
 
@@ -116,8 +116,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">21 April 2026</div>
+                                    <div>Thursday</div>
+                                    <div class="text-size-16 text-medium">7 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -128,8 +128,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>Wednesday</div>
-                                    <div class="text-size-16 text-medium">22 April 2026</div>
+                                    <div>Friday</div>
+                                    <div class="text-size-16 text-medium">8 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -137,11 +137,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 ">
+                        <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="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>Saturday</div>
+                                    <div class="text-size-16 text-medium">9 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -149,11 +149,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 ">
+                        <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="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>Sunday</div>
+                                    <div class="text-size-16 text-medium">10 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -192,28 +192,28 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 
 ### Example: Example 2
 
-Apr
-21
+May
+7
 2026
 
-Apr
-22
+May
+8
 2026
 
-Apr
-23
+May
+9
 2026
 
-Apr
-24
+May
+10
 2026
 
-Apr
-25
+May
+11
 2026
 
-Apr
-26
+May
+12
 2026
 
 Set to January Toggle Weekends
@@ -339,8 +339,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">21</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>
@@ -348,44 +348,44 @@ 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">22</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">8</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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">23</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">9</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">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">10</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">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">11</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">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">12</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -393,8 +393,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">13</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -402,8 +402,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">14</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -411,17 +411,17 @@ 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">15</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">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">16</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-05-06T12:13:55.429Z
 
 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-05-06T12:13:55.753Z
 
 ## 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-05-06T12:15:05.088Z
 
 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-05-06T12:15:04.055Z
 
 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-05-06T12:14:36.990Z
 
 The chat component is a pure CSS component.