@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

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-05-06T12:13:19.853Z
 
 ## 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-05-06T12:13:48.111Z
 
 ## 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.8580589148538">
                 </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="135.52960628167727">
                 </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.7730218055361">
                 </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.61711833536413">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-size-">100</div>

package/dist/docs/components/clearableInput.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/clearableInput
-*Captured:* 2026-04-20T12:53:43.119Z
+*Captured:* 2026-05-06T12:13:20.108Z
 
 Control, which can be cleared when it has a value.
 

package/dist/docs/components/collapse.md

@@ -3,12 +3,14 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#/components/collapse
-*Captured:* 2026-04-20T12:53:52.018Z
+*Captured:* 2026-05-06T12:13:29.047Z
 
 The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.
 
 ## Collapse
 
+> Note: In case the content element you pass in as child has margins, wrap it within another div to smoothen the animation.
+
 ### Example: Content will stay in the DOM even when it is collapsed
 
 Content will stay in the DOM even when it is collapsed
@@ -74,7 +76,7 @@ export default () => {
                     <div class="margin-bottom-15">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
                     <div class="dropdown btn-group">
-                        <button type="button" id="73g5xvd4ufo" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
+                        <button type="button" id="lhmbptxu6hr" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
                             </span>
                         </button>
                     </div>

package/dist/docs/components/composedCharts.md

@@ -3,10 +3,12 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/composedCharts
-*Captured:* 2026-04-20T12:55:30.945Z
+*Captured:* 2026-05-06T12:15:06.664Z
 
 ## ComposedChart
 
+> 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 ComposedChart
 
 Simple ComposedChart
@@ -226,7 +228,7 @@ const data: CustomData[] = [
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r0:">
-                                        <rect x="70.41927083333333" y="0" width="59.125674839406145" height="124">
+                                        <rect x="70.41927083333333" y="0" width="56.09365679331344" height="124">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -249,43 +251,43 @@ const data: CustomData[] = [
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill-opacity="1" fill="#8e96eb " name="Page A" x="50.0839" y="79.1557" width="40" height="43.8443" class="recharts-rectangle" d="M50.0839,82.1557A 3,3,0,0,1,53.0839,79.1557L 87.0839,79.1557A 3,3,0,0,1,
-        90.0839,82.1557L 90.0839,123L 50.0839,123Z">
+                                            <path fill-opacity="1" fill="#8e96eb " name="Page A" x="50.0839" y="79.7343" width="40" height="43.2657" class="recharts-rectangle" d="M50.0839,82.7343A 3,3,0,0,1,53.0839,79.7343L 87.0839,79.7343A 3,3,0,0,1,
+        90.0839,82.7343L 90.0839,123L 50.0839,123Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill-opacity="1" fill="#8e96eb " name="Page B" x="100.9224" y="70.0032" width="40" height="52.9968" class="recharts-rectangle" d="M100.9224,73.0032A 3,3,0,0,1,103.9224,70.0032L 137.9224,70.0032A 3,3,0,0,1,
-        140.9224,73.0032L 140.9224,123L 100.9224,123Z">
+                                            <path fill-opacity="1" fill="#8e96eb " name="Page B" x="100.9224" y="70.7026" width="40" height="52.2974" class="recharts-rectangle" d="M100.9224,73.7026A 3,3,0,0,1,103.9224,70.7026L 137.9224,70.7026A 3,3,0,0,1,
+        140.9224,73.7026L 140.9224,123L 100.9224,123Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill-opacity="1" fill="#8e96eb " name="Page C" x="151.7609" y="62.8237" width="40" height="60.1763" class="recharts-rectangle" d="M151.7609,65.8237A 3,3,0,0,1,154.7609,62.8237L 188.7609,62.8237A 3,3,0,0,1,
-        191.7609,65.8237L 191.7609,123L 151.7609,123Z">
+                                            <path fill-opacity="1" fill="#8e96eb " name="Page C" x="151.7609" y="63.6179" width="40" height="59.3821" class="recharts-rectangle" d="M151.7609,66.6179A 3,3,0,0,1,154.7609,63.6179L 188.7609,63.6179A 3,3,0,0,1,
+        191.7609,66.6179L 191.7609,123L 151.7609,123Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill-opacity="1" fill="#8e96eb " name="Page D" x="202.5995" y="57.2335" width="40" height="65.7665" class="recharts-rectangle" d="M202.5995,60.2335A 3,3,0,0,1,205.5995,57.2335L 239.5995,57.2335A 3,3,0,0,1,
-        242.5995,60.2335L 242.5995,123L 202.5995,123Z">
+                                            <path fill-opacity="1" fill="#8e96eb " name="Page D" x="202.5995" y="58.1015" width="40" height="64.8985" class="recharts-rectangle" d="M202.5995,61.1015A 3,3,0,0,1,205.5995,58.1015L 239.5995,58.1015A 3,3,0,0,1,
+        242.5995,61.1015L 242.5995,123L 202.5995,123Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill-opacity="1" fill="#8e96eb " name="Page E" x="253.438" y="62.2756" width="40" height="60.7244" class="recharts-rectangle" d="M253.438,65.2756A 3,3,0,0,1,256.438,62.2756L 290.438,62.2756A 3,3,0,0,1,
-        293.438,65.2756L 293.438,123L 253.438,123Z">
+                                            <path fill-opacity="1" fill="#8e96eb " name="Page E" x="253.438" y="63.0771" width="40" height="59.9229" class="recharts-rectangle" d="M253.438,66.0771A 3,3,0,0,1,256.438,63.0771L 290.438,63.0771A 3,3,0,0,1,
+        293.438,66.0771L 293.438,123L 253.438,123Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill-opacity="1" fill="#8e96eb " name="Page F" x="304.2766" y="85.7323" width="40" height="37.2677" class="recharts-rectangle" d="M304.2766,88.7323A 3,3,0,0,1,307.2766,85.7323L 341.2766,85.7323A 3,3,0,0,1,
-        344.2766,88.7323L 344.2766,123L 304.2766,123Z">
+                                            <path fill-opacity="1" fill="#8e96eb " name="Page F" x="304.2766" y="86.2242" width="40" height="36.7758" class="recharts-rectangle" d="M304.2766,89.2242A 3,3,0,0,1,307.2766,86.2242L 341.2766,86.2242A 3,3,0,0,1,
+        344.2766,89.2242L 344.2766,123L 304.2766,123Z">
                                             </path>
                                         </g>
                                     </g>
@@ -296,7 +298,7 @@ const data: CustomData[] = [
                     <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-line">
                             <g class="recharts-layer recharts-shape">
-                                <path stroke-width="1" stroke="#30b4c0 " fill="none" id="recharts-line-:r2:" height="108" width="365.03125" class="recharts-curve recharts-line-curve" stroke-dasharray="62.1956px 267.3907775878906px" d="M70.419,87.6C87.365,83.295,104.312,78.99,121.258,70.92C138.204,62.85,155.15,42.5,172.096,39.18C189.043,35.86,205.989,35.43,222.935,34.2C239.881,32.97,256.827,31.8,273.773,31.8C290.72,31.8,307.666,35.4,324.612,39">
+                                <path stroke-width="1" stroke="#30b4c0 " fill="none" id="recharts-line-:r2:" height="108" width="365.03125" class="recharts-curve recharts-line-curve" stroke-dasharray="59.0061px 267.3907775878906px" d="M70.419,87.6C87.365,83.295,104.312,78.99,121.258,70.92C138.204,62.85,155.15,42.5,172.096,39.18C189.043,35.86,205.989,35.43,222.935,34.2C239.881,32.97,256.827,31.8,273.773,31.8C290.72,31.8,307.666,35.4,324.612,39">
                                 </path>
                             </g>
                         </g>

package/dist/docs/components/contentLoader.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/contentLoader
-*Captured:* 2026-04-20T12:54:21.391Z
+*Captured:* 2026-05-06T12:13:58.422Z
 
 The content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader
 

package/dist/docs/components/dataTabs.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/dataTabs
-*Captured:* 2026-04-20T12:54:23.916Z
+*Captured:* 2026-05-06T12:14:00.297Z
 
 Passing a single tab content component via commonTabContent prop into the DataTabs component allows to update that single component when switching tabs. This comes in handy for instance when you want to animate a graph with different values from each tab.