@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/components/tableControls.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Table
 *Source:* https://uikit.developers.rio.cloud/#/components/tableControls
-*Captured:* 2026-04-20T12:54:36.257Z
+*Captured:* 2026-05-06T12:14:12.418Z
 
 The toolbar and its content has to be implemented by each team itself. Please use the sample as a reference and adapt it accordingly.
 
@@ -17,15 +17,15 @@ The toolbar and its content has to be implemented by each team itself. Please us
 
 TableToolbar label
 
-‹ April 2026 ›
+‹ May 2026 ›
 Su Mo Tu We Th Fr Sa
 
-29 30 31 1 2 3 4
-5 6 7 8 9 10 11
-12 13 14 15 16 17 18
-19 20 21 22 23 24 25
 26 27 28 29 30 1 2
 3 4 5 6 7 8 9
+10 11 12 13 14 15 16
+17 18 19 20 21 22 23
+24 25 26 27 28 29 30
+31 1 2 3 4 5 6
 
 12:00 AM
 
@@ -101,7 +101,7 @@ export default TableToolbarDemo;
                                         <th class="rdtPrev">
                                             <span>‹</span>
                                         </th>
-                                        <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
+                                        <th class="rdtSwitch" colspan="5" data-value="4">May 2026</th>
                                         <th class="rdtNext">
                                             <span>›</span>
                                         </th>
@@ -118,58 +118,58 @@ export default TableToolbarDemo;
                                 </thead>
                                 <tbody>
                                     <tr>
-                                        <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
-                                        <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
-                                        <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
-                                        <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
-                                        <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
-                                        <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
-                                        <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
+                                        <td data-value="26" data-month="3" data-year="2026" class="rdtDay rdtOld">26</td>
+                                        <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtOld">27</td>
+                                        <td data-value="28" data-month="3" data-year="2026" class="rdtDay rdtOld">28</td>
+                                        <td data-value="29" data-month="3" data-year="2026" class="rdtDay rdtOld">29</td>
+                                        <td data-value="30" data-month="3" data-year="2026" class="rdtDay rdtOld">30</td>
+                                        <td data-value="1" data-month="4" data-year="2026" class="rdtDay">1</td>
+                                        <td data-value="2" data-month="4" data-year="2026" class="rdtDay">2</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
-                                        <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
-                                        <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
-                                        <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
-                                        <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
-                                        <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
-                                        <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
+                                        <td data-value="3" data-month="4" data-year="2026" class="rdtDay">3</td>
+                                        <td data-value="4" data-month="4" data-year="2026" class="rdtDay">4</td>
+                                        <td data-value="5" data-month="4" data-year="2026" class="rdtDay">5</td>
+                                        <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtToday">6</td>
+                                        <td data-value="7" data-month="4" data-year="2026" class="rdtDay">7</td>
+                                        <td data-value="8" data-month="4" data-year="2026" class="rdtDay">8</td>
+                                        <td data-value="9" data-month="4" data-year="2026" class="rdtDay">9</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
-                                        <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
-                                        <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
-                                        <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
-                                        <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
-                                        <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
-                                        <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
+                                        <td data-value="10" data-month="4" data-year="2026" class="rdtDay">10</td>
+                                        <td data-value="11" data-month="4" data-year="2026" class="rdtDay">11</td>
+                                        <td data-value="12" data-month="4" data-year="2026" class="rdtDay">12</td>
+                                        <td data-value="13" data-month="4" data-year="2026" class="rdtDay">13</td>
+                                        <td data-value="14" data-month="4" data-year="2026" class="rdtDay">14</td>
+                                        <td data-value="15" data-month="4" data-year="2026" class="rdtDay">15</td>
+                                        <td data-value="16" data-month="4" data-year="2026" class="rdtDay">16</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
-                                        <td data-value="20" data-month="3" data-year="2026" class="rdtDay rdtToday">20</td>
-                                        <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
-                                        <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
-                                        <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
-                                        <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
-                                        <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
+                                        <td data-value="17" data-month="4" data-year="2026" class="rdtDay">17</td>
+                                        <td data-value="18" data-month="4" data-year="2026" class="rdtDay">18</td>
+                                        <td data-value="19" data-month="4" data-year="2026" class="rdtDay">19</td>
+                                        <td data-value="20" data-month="4" data-year="2026" class="rdtDay">20</td>
+                                        <td data-value="21" data-month="4" data-year="2026" class="rdtDay">21</td>
+                                        <td data-value="22" data-month="4" data-year="2026" class="rdtDay">22</td>
+                                        <td data-value="23" data-month="4" data-year="2026" class="rdtDay">23</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
-                                        <td data-value="27" data-month="3" data-year="2026" class="rdtDay">27</td>
-                                        <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
-                                        <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
-                                        <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
-                                        <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
-                                        <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
+                                        <td data-value="24" data-month="4" data-year="2026" class="rdtDay">24</td>
+                                        <td data-value="25" data-month="4" data-year="2026" class="rdtDay">25</td>
+                                        <td data-value="26" data-month="4" data-year="2026" class="rdtDay">26</td>
+                                        <td data-value="27" data-month="4" data-year="2026" class="rdtDay">27</td>
+                                        <td data-value="28" data-month="4" data-year="2026" class="rdtDay">28</td>
+                                        <td data-value="29" data-month="4" data-year="2026" class="rdtDay">29</td>
+                                        <td data-value="30" data-month="4" data-year="2026" class="rdtDay">30</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
-                                        <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
-                                        <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
-                                        <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
-                                        <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
-                                        <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
-                                        <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
+                                        <td data-value="31" data-month="4" data-year="2026" class="rdtDay">31</td>
+                                        <td data-value="1" data-month="5" data-year="2026" class="rdtDay rdtNew">1</td>
+                                        <td data-value="2" data-month="5" data-year="2026" class="rdtDay rdtNew">2</td>
+                                        <td data-value="3" data-month="5" data-year="2026" class="rdtDay rdtNew">3</td>
+                                        <td data-value="4" data-month="5" data-year="2026" class="rdtDay rdtNew">4</td>
+                                        <td data-value="5" data-month="5" data-year="2026" class="rdtDay rdtNew">5</td>
+                                        <td data-value="6" data-month="5" data-year="2026" class="rdtDay rdtNew">6</td>
                                     </tr>
                                 </tbody>
                                 <tfoot>
@@ -943,7 +943,7 @@ export default TableRowActionsDropdownDemo;
             <div class="table-cell table-align-right table-vertical-align-middle padding-10" data-column="actions" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                 <div class="table-cell-content overflow-hidden">
                     <div class="dropdown btn-group">
-                        <button type="button" aria-label="Row actions" id="mqlkojnyu3" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" aria-label="Row actions" id="pi73k3cq5dp" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                             <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                             </span>
                         </button>
@@ -961,7 +961,7 @@ export default TableRowActionsDropdownDemo;
             <div class="table-cell table-align-right table-vertical-align-middle padding-10" data-column="actions" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                 <div class="table-cell-content overflow-hidden">
                     <div class="dropdown btn-group">
-                        <button type="button" aria-label="Delivery run actions" id="8t0kb8e4cl" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" aria-label="Delivery run actions" id="k541p0tso9g" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                             <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                             </span>
                         </button>

package/dist/docs/components/tagManager.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/tagManager
-*Captured:* 2026-04-20T12:55:00.697Z
+*Captured:* 2026-05-06T12:14:36.277Z
 
 The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.
 

package/dist/docs/components/tags.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/tags
-*Captured:* 2026-04-20T12:54:59.641Z
+*Captured:* 2026-05-06T12:14:35.597Z
 
 ## Tag
 

package/dist/docs/components/teaser.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/teaser
-*Captured:* 2026-04-20T12:54:30.816Z
+*Captured:* 2026-05-06T12:14:07.156Z
 
 The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.
 
@@ -11,6 +11,8 @@ The teaser component was built to create all kinds of landing and/or single page
 
 The demo page should only provide an insight into the combination possibilities.
 
+> Note: Because of larger screens a wrapping container-fluid fluid-default should be added if you are not using the component within smaller container.
+
 ### Example: Example 1
 
 Box headline

package/dist/docs/components/textTruncateMiddle.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/textTruncateMiddle
-*Captured:* 2026-04-20T12:54:32.368Z
+*Captured:* 2026-05-06T12:14:08.663Z
 
 TextTruncateMiddle truncates long text in the middle and keeps the end segment visible.
 

package/dist/docs/components/timeline.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#/components/timeline
-*Captured:* 2026-04-20T12:55:02.256Z
+*Captured:* 2026-05-06T12:14:37.710Z
 
 The timeline component is a pure CSS component.
 

package/dist/docs/components/timepicker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Pickers
 *Source:* https://uikit.developers.rio.cloud/#/components/timepicker
-*Captured:* 2026-04-20T12:54:10.145Z
+*Captured:* 2026-05-06T12:13:47.290Z
 
 ## TimePicker
 
@@ -368,6 +368,8 @@ export default () => {
 
 ## TimePicker with dropdown
 
+Shows a dropdown for faster time selection. Use minuteOffset to control the interval between dropdown values.
+
 ### Example: Example 4
 
 Controlled component with dropdown

package/dist/docs/components/toggleButton.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/toggleButton
-*Captured:* 2026-04-20T12:53:51.349Z
+*Captured:* 2026-05-06T12:13:27.723Z
 
 This toggle button is based on the button component that can be used directly.
 

package/dist/docs/components/tooltip.md

@@ -3,12 +3,14 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/tooltip
-*Captured:* 2026-04-20T12:55:00.883Z
+*Captured:* 2026-05-06T12:14:36.421Z
 
 In order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.
 
 ## Tooltips
 
+> Note
+
 By default Tooltips are not rendered on touch devices. This might lead to issues for test environments where the check for mobile evaluate to true simply because the required class name is not set on the document element.
 
 To fix that, simply set the class in your test as follows:document.documentElement.classList.add('ua-desktop');
@@ -313,6 +315,8 @@ popperConfig={{
 
 ## SimpleTooltip
 
+This component is for convenience and wraps the OverlayTrigger and the Tooltip itself.
+
 ### Example: Example 2
 
 Simple tooltip with auto placement: Hover me Simple tooltip with bottom placement: Hover me

package/dist/docs/components/tracker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#/components/tracker
-*Captured:* 2026-04-20T12:54:13.819Z
+*Captured:* 2026-05-06T12:13:50.912Z
 
 Compact visual tracker component for status indicators with optional per-block color and tooltip support.
 

package/dist/docs/components/virtualList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/virtualList
-*Captured:* 2026-04-20T12:54:34.065Z
+*Captured:* 2026-05-06T12:14:10.293Z
 
 The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.
 
@@ -14,34 +14,35 @@ It allows a specified number of items outside the viewport for smoother scrollin
 ### Example: Example 1
 
 Virtual list with 100 items Item 1
-Tortor Fusce ut libero bibendum, iaculis. ac dui ipsum scelerisque dui orci, tincidunt. efficitur dolor
+Sem. et consectetur ligula condimentum tincidunt.
 
 Item 2
-Nunc dui in volutpat nec Interdum semper. ante ante orci, ut in malesuada
+Massa ante in orci in efficitur et pretium
 
 Item 3
-Eget semper condimentum consectetur bibendum, ante in in velit. in eget iaculis. efficitur ante
+Eget fringilla pretium tincidunt. eget semper. ac ipsum primis et ipsum semper.
 
 Item 4
-Pretium vitae In elit. Fusce semper. ut elementum elementum amet, tincidunt. tortor
+Duis ac elementum malesuada vel faucibus. et Fusce
 
 Item 5
-Ac ut in ante semper. volutpat est pretium
+Volutpat dui vel in aliquam
 
 Item 6
-Hendrerit Interdum ipsum ac molestie Interdum eget viverra massa ipsum elit. primis In
+Ac volutpat faucibus. lorem ante Mauris vitae condimentum fringilla semper
 
 Item 7
-Felis. eget eget nunc In adipiscing et
+Vel dui metus ut elit. massa, vitae velit. efficitur in tortor ac ac
+Lorem
 
 Item 8
-Viverra In tortor libero libero
+Sem. sem. Mauris Vivamus libero sem. neque. semper sagittis felis. ante ac Interdum dui
 
 Item 9
-Dolor scelerisque volutpat efficitur primis ante vel orci ut ipsum consectetur amet,
+Integer eget Vivamus in ligula et elit. massa sit velit. ante semper. et vitae
 
 Item 10
-Elit. in eget efficitur lorem ligula efficitur est
+Orci finibus efficitur felis. consectetur consectetur Sed Ut Vivamus Duis ante
 
 #### React (tsx)
 
@@ -89,66 +90,67 @@ export default () => {
 <div class="max-width-600 padding-y-20">
     <label class="padding-left-10">Virtual list with 100 items</label>
     <div class="VirtualList overflow-y-auto max-height-400 padding-x-10" style="height: 100%; position: relative; overflow: auto;">
-        <div class="position-relative" style="height: 7200px;">
+        <div class="position-relative" style="height: 7000px;">
             <div class="VirtualListItemContainer ">
                 <div class="VirtualListItemWrapper " data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 1</div>
-                        <div class="word-break" data-test-ignore="text">Tortor Fusce ut libero bibendum, iaculis. ac dui ipsum scelerisque dui orci, tincidunt. efficitur dolor</div>
+                        <div class="word-break" data-test-ignore="text">Sem. et consectetur ligula condimentum tincidunt.</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(90px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(70px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 2</div>
-                        <div class="word-break" data-test-ignore="text">Nunc dui in volutpat nec Interdum semper. ante ante orci, ut in malesuada</div>
+                        <div class="word-break" data-test-ignore="text">Massa ante in orci in efficitur et pretium</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(160px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(140px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 3</div>
-                        <div class="word-break" data-test-ignore="text">Eget semper condimentum consectetur bibendum, ante in in velit. in eget iaculis. efficitur ante</div>
+                        <div class="word-break" data-test-ignore="text">Eget fringilla pretium tincidunt. eget semper. ac ipsum primis et ipsum semper.</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(230px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(210px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 4</div>
-                        <div class="word-break" data-test-ignore="text">Pretium vitae In elit. Fusce semper. ut elementum elementum amet, tincidunt. tortor</div>
+                        <div class="word-break" data-test-ignore="text">Duis ac elementum malesuada vel faucibus. et Fusce</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(300px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(280px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 5</div>
-                        <div class="word-break" data-test-ignore="text">Ac ut in ante semper. volutpat est pretium</div>
+                        <div class="word-break" data-test-ignore="text">Volutpat dui vel in aliquam</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(370px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(350px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 6</div>
-                        <div class="word-break" data-test-ignore="text">Hendrerit Interdum ipsum ac molestie Interdum eget viverra massa ipsum elit. primis In</div>
+                        <div class="word-break" data-test-ignore="text">Ac volutpat faucibus. lorem ante Mauris vitae condimentum fringilla semper</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(440px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(420px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 7</div>
-                        <div class="word-break" data-test-ignore="text">Felis. eget eget nunc In adipiscing et</div>
+                        <div class="word-break" data-test-ignore="text">Vel dui metus ut elit. massa, vitae velit. efficitur in tortor ac ac
+                            Lorem</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(510px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(490px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 8</div>
-                        <div class="word-break" data-test-ignore="text">Viverra In tortor libero libero</div>
+                        <div class="word-break" data-test-ignore="text">Sem. sem. Mauris Vivamus libero sem. neque. semper sagittis felis. ante ac Interdum dui</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(580px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(560px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 9</div>
-                        <div class="word-break" data-test-ignore="text">Dolor scelerisque volutpat efficitur primis ante vel orci ut ipsum consectetur amet,</div>
+                        <div class="word-break" data-test-ignore="text">Integer eget Vivamus in ligula et elit. massa sit velit. ante semper. et vitae</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(650px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(630px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 10</div>
-                        <div class="word-break" data-test-ignore="text">Elit. in eget efficitur lorem ligula efficitur est</div>
+                        <div class="word-break" data-test-ignore="text">Orci finibus efficitur felis. consectetur consectetur Sed Ut Vivamus Duis ante</div>
                     </div>
                 </div>
             </div>
@@ -174,35 +176,35 @@ export default () => {
 
 Virtual list with 5000 items
 Vehicle 1
-Ut nec fames est nec Sed et purus
+Ut condimentum in volutpat molestie
 
 Vehicle 2
-Tortor volutpat ante enim posuere quis, viverra Vivamus Duis ipsum quis, iaculis.
+Consectetur fames neque. Mauris amet,
 
 Vehicle 3
-Quis, posuere condimentum ut neque. ac sem. sem. pharetra neque. tortor adipiscing consectetur malesuada
+Sem. efficitur ipsum elementum Duis finibus pretium est tortor elit. adipiscing ante metus efficitur ante
 
 Vehicle 4
-In elit. dolor metus ipsum in rutrum Mauris
+Ut iaculis. eget rutrum Integer Duis massa quis, ut lorem massa libero pretium
 
 Vehicle 5
-Et velit. pretium primis primis Fusce
-Lorem massa
+Interdum velit. massa, in enim fames in, ut nec pretium
+Lorem Interdum scelerisque ut malesuada
 
 Vehicle 6
-Ante ac vel Ut neque. fames velit. Integer iaculis.
+Ac massa, et Mauris neque. nunc nec efficitur dolor in, et Ut nunc vitae enim
 
 Vehicle 7
-Ipsum posuere efficitur ut Integer dolor finibus nunc consectetur in In In aliquam finibus ut
+Est ac dolor efficitur ac hendrerit elementum felis. nec
 
 Vehicle 8
-Vitae enim sagittis et posuere metus
+Ipsum ante dui nunc consectetur elementum in ac
 
 Vehicle 9
-Fringilla consectetur purus volutpat Integer ut eget eget pretium fringilla purus ante ut
+Quis, ut Vivamus semper. Fusce ut ut quis, semper posuere dolor
 
 Vehicle 10
-Ipsum vel in orci, bibendum, semper. libero Duis
+Tincidunt. amet, in aliquam orci, viverra finibus consectetur ante malesuada est libero et ac dui
 
 #### React (tsx)
 
@@ -272,7 +274,7 @@ export default () => {
 <div class="padding-20">
     <label>Virtual list with 5000 items</label>
     <div class="max-width-600 max-height-400 overflow-y-auto">
-        <div class="VirtualList overflow-y-auto border rounded" style="height: 370000px; position: relative; overflow: visible;">
+        <div class="VirtualList overflow-y-auto border rounded" style="height: 380000px; position: relative; overflow: visible;">
             <div class="position-relative" style="height: auto;">
                 <div class="VirtualListItemContainer list-group">
                     <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
@@ -283,7 +285,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 1</div>
-                                <div class="word-break" data-test-ignore="text">Ut nec fames est nec Sed et purus</div>
+                                <div class="word-break" data-test-ignore="text">Ut condimentum in volutpat molestie</div>
                             </div>
                         </div>
                     </div>
@@ -295,7 +297,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 2</div>
-                                <div class="word-break" data-test-ignore="text">Tortor volutpat ante enim posuere quis, viverra Vivamus Duis ipsum quis, iaculis.</div>
+                                <div class="word-break" data-test-ignore="text">Consectetur fames neque. Mauris amet,</div>
                             </div>
                         </div>
                     </div>
@@ -307,7 +309,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 3</div>
-                                <div class="word-break" data-test-ignore="text">Quis, posuere condimentum ut neque. ac sem. sem. pharetra neque. tortor adipiscing consectetur malesuada</div>
+                                <div class="word-break" data-test-ignore="text">Sem. efficitur ipsum elementum Duis finibus pretium est tortor elit. adipiscing ante metus efficitur ante</div>
                             </div>
                         </div>
                     </div>
@@ -319,7 +321,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 4</div>
-                                <div class="word-break" data-test-ignore="text">In elit. dolor metus ipsum in rutrum Mauris</div>
+                                <div class="word-break" data-test-ignore="text">Ut iaculis. eget rutrum Integer Duis massa quis, ut lorem massa libero pretium</div>
                             </div>
                         </div>
                     </div>
@@ -331,12 +333,12 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 5</div>
-                                <div class="word-break" data-test-ignore="text">Et velit. pretium primis primis Fusce
-                                    Lorem massa</div>
+                                <div class="word-break" data-test-ignore="text">Interdum velit. massa, in enim fames in, ut nec pretium
+                                    Lorem Interdum scelerisque ut malesuada</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="5" style="position: absolute; transform: translateY(369px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="5" style="position: absolute; transform: translateY(389px); width: 100%; will-change: transform;">
                         <div class="display-flex gap-15 align-items-center">
                             <div class="Avatar bg-lightest" style="height: 40px;">
                                 <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -344,11 +346,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 6</div>
-                                <div class="word-break" data-test-ignore="text">Ante ac vel Ut neque. fames velit. Integer iaculis.</div>
+                                <div class="word-break" data-test-ignore="text">Ac massa, et Mauris neque. nunc nec efficitur dolor in, et Ut nunc vitae enim</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(439px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(459px); width: 100%; will-change: transform;">
                         <div class="display-flex gap-15 align-items-center">
                             <div class="Avatar bg-lightest" style="height: 40px;">
                                 <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -356,7 +358,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 7</div>
-                                <div class="word-break" data-test-ignore="text">Ipsum posuere efficitur ut Integer dolor finibus nunc consectetur in In In aliquam finibus ut</div>
+                                <div class="word-break" data-test-ignore="text">Est ac dolor efficitur ac hendrerit elementum felis. nec</div>
                             </div>
                         </div>
                     </div>
@@ -368,7 +370,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 8</div>
-                                <div class="word-break" data-test-ignore="text">Vitae enim sagittis et posuere metus</div>
+                                <div class="word-break" data-test-ignore="text">Ipsum ante dui nunc consectetur elementum in ac</div>
                             </div>
                         </div>
                     </div>
@@ -380,7 +382,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 9</div>
-                                <div class="word-break" data-test-ignore="text">Fringilla consectetur purus volutpat Integer ut eget eget pretium fringilla purus ante ut</div>
+                                <div class="word-break" data-test-ignore="text">Quis, ut Vivamus semper. Fusce ut ut quis, semper posuere dolor</div>
                             </div>
                         </div>
                     </div>
@@ -392,7 +394,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 10</div>
-                                <div class="word-break" data-test-ignore="text">Ipsum vel in orci, bibendum, semper. libero Duis</div>
+                                <div class="word-break" data-test-ignore="text">Tincidunt. amet, in aliquam orci, viverra finibus consectetur ante malesuada est libero et ac dui</div>
                             </div>
                         </div>
                     </div>