@rio-cloud/uikit-mcp 1.1.7 → 1.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (201) hide show
  1. package/README.md +24 -18
  2. package/dist/doc-metadata.json +125 -295
  3. package/dist/docs/components/accentBar.md +16 -69
  4. package/dist/docs/components/activity.md +7 -44
  5. package/dist/docs/components/animatedNumber.md +3 -11
  6. package/dist/docs/components/animatedTextReveal.md +6 -34
  7. package/dist/docs/components/animations.md +21 -54
  8. package/dist/docs/components/appHeader.md +11 -30
  9. package/dist/docs/components/appLayout.md +40 -193
  10. package/dist/docs/components/appNavigationBar.md +1 -24
  11. package/dist/docs/components/areaCharts.md +7 -22
  12. package/dist/docs/components/aspectRatioPlaceholder.md +1 -9
  13. package/dist/docs/components/assetTree.md +241 -280
  14. package/dist/docs/components/autosuggests.md +3 -102
  15. package/dist/docs/components/avatar.md +1 -16
  16. package/dist/docs/components/banner.md +4 -37
  17. package/dist/docs/components/barCharts.md +20 -75
  18. package/dist/docs/components/barList.md +10 -78
  19. package/dist/docs/components/basicMap.md +1 -67
  20. package/dist/docs/components/bottomSheet.md +2 -28
  21. package/dist/docs/components/button.md +12 -65
  22. package/dist/docs/components/buttonToolbar.md +5 -19
  23. package/dist/docs/components/calendarStripe.md +50 -100
  24. package/dist/docs/components/card.md +1 -9
  25. package/dist/docs/components/carousel.md +1 -14
  26. package/dist/docs/components/chartColors.md +1 -156
  27. package/dist/docs/components/chartsGettingStarted.md +1 -1
  28. package/dist/docs/components/chat.md +2 -81
  29. package/dist/docs/components/checkbox.md +11 -72
  30. package/dist/docs/components/circularProgress.md +8 -49
  31. package/dist/docs/components/clearableInput.md +3 -62
  32. package/dist/docs/components/collapse.md +2 -15
  33. package/dist/docs/components/composedCharts.md +16 -26
  34. package/dist/docs/components/contentLoader.md +7 -25
  35. package/dist/docs/components/dataTabs.md +16 -104
  36. package/dist/docs/components/datepickers.md +710 -962
  37. package/dist/docs/components/dialogs.md +5 -67
  38. package/dist/docs/components/divider.md +1 -33
  39. package/dist/docs/components/dropdowns.md +3424 -5567
  40. package/dist/docs/components/editableContent.md +4 -82
  41. package/dist/docs/components/expander.md +15 -88
  42. package/dist/docs/components/fade.md +4 -61
  43. package/dist/docs/components/fadeExpander.md +1 -7
  44. package/dist/docs/components/fadeUp.md +2 -76
  45. package/dist/docs/components/feedback.md +9 -68
  46. package/dist/docs/components/filePickers.md +4 -18
  47. package/dist/docs/components/formLabel.md +7 -27
  48. package/dist/docs/components/groupedItemList.md +2 -158
  49. package/dist/docs/components/iconList.md +7 -64
  50. package/dist/docs/components/imagePreloader.md +1 -9
  51. package/dist/docs/components/labeledElement.md +3 -18
  52. package/dist/docs/components/licensePlate.md +1 -43
  53. package/dist/docs/components/lineCharts.md +8 -39
  54. package/dist/docs/components/listMenu.md +2 -34
  55. package/dist/docs/components/loadMore.md +5 -24
  56. package/dist/docs/components/mainNavigation.md +1 -9
  57. package/dist/docs/components/mapCircle.md +1 -23
  58. package/dist/docs/components/mapCluster.md +2 -54
  59. package/dist/docs/components/mapContext.md +1 -23
  60. package/dist/docs/components/mapDraggableMarker.md +2 -28
  61. package/dist/docs/components/mapGettingStarted.md +2 -2
  62. package/dist/docs/components/mapInfoBubble.md +1 -27
  63. package/dist/docs/components/mapLayerGroup.md +1 -23
  64. package/dist/docs/components/mapMarker.md +1 -99
  65. package/dist/docs/components/mapPolygon.md +2 -116
  66. package/dist/docs/components/mapRoute.md +6 -1465
  67. package/dist/docs/components/mapRouteGenerator.md +1 -1
  68. package/dist/docs/components/mapSettings.md +11 -128
  69. package/dist/docs/components/mapUtils.md +10 -113
  70. package/dist/docs/components/multiselects.md +14 -163
  71. package/dist/docs/components/noData.md +8 -22
  72. package/dist/docs/components/notifications.md +3 -19
  73. package/dist/docs/components/numbercontrol.md +3 -47
  74. package/dist/docs/components/onboarding.md +3 -15
  75. package/dist/docs/components/page.md +1 -33
  76. package/dist/docs/components/pager.md +1 -17
  77. package/dist/docs/components/pieCharts.md +40 -71
  78. package/dist/docs/components/popover.md +1 -12
  79. package/dist/docs/components/position.md +2 -6
  80. package/dist/docs/components/radialBarCharts.md +32 -116
  81. package/dist/docs/components/radioCardGroup.md +6 -48
  82. package/dist/docs/components/radiobutton.md +6 -75
  83. package/dist/docs/components/releaseNotes.md +3 -21
  84. package/dist/docs/components/resizer.md +1 -7
  85. package/dist/docs/components/responsiveColumnStripe.md +9 -49
  86. package/dist/docs/components/responsiveVideo.md +1 -7
  87. package/dist/docs/components/rioglyph.md +1 -17
  88. package/dist/docs/components/rules.md +7 -70
  89. package/dist/docs/components/saveableInput.md +267 -401
  90. package/dist/docs/components/selects.md +27 -1164
  91. package/dist/docs/components/sidebar.md +6 -17
  92. package/dist/docs/components/sliders.md +1 -27
  93. package/dist/docs/components/smoothScrollbars.md +1 -73
  94. package/dist/docs/components/spinners.md +6 -51
  95. package/dist/docs/components/states.md +6 -92
  96. package/dist/docs/components/statsWidgets.md +1 -76
  97. package/dist/docs/components/statusBar.md +1 -57
  98. package/dist/docs/components/stepButton.md +2 -7
  99. package/dist/docs/components/steppedProgressBars.md +5 -62
  100. package/dist/docs/components/subNavigation.md +1 -31
  101. package/dist/docs/components/supportMarker.md +2 -14
  102. package/dist/docs/components/svgImage.md +1 -5
  103. package/dist/docs/components/switch.md +2 -33
  104. package/dist/docs/components/tables.md +1 -1
  105. package/dist/docs/components/tagManager.md +1 -41
  106. package/dist/docs/components/tags.md +1 -138
  107. package/dist/docs/components/teaser.md +2 -122
  108. package/dist/docs/components/textTruncateMiddle.md +2 -9
  109. package/dist/docs/components/timeline.md +1 -99
  110. package/dist/docs/components/timepicker.md +4 -79
  111. package/dist/docs/components/toggleButton.md +2 -15
  112. package/dist/docs/components/tooltip.md +9 -30
  113. package/dist/docs/components/tracker.md +2 -19
  114. package/dist/docs/components/virtualList.md +61 -130
  115. package/dist/docs/foundations.md +749 -4069
  116. package/dist/docs/start/changelog.md +5 -1
  117. package/dist/docs/start/goodtoknow.md +1 -1
  118. package/dist/docs/start/guidelines/color-combinations.md +149 -483
  119. package/dist/docs/start/guidelines/custom-css.md +1 -1
  120. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  121. package/dist/docs/start/guidelines/formatting.md +1 -1
  122. package/dist/docs/start/guidelines/iframe.md +4 -16
  123. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  124. package/dist/docs/start/guidelines/print-css.md +1 -1
  125. package/dist/docs/start/guidelines/spinner.md +13 -67
  126. package/dist/docs/start/guidelines/state-in-url.md +1 -1
  127. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  128. package/dist/docs/start/guidelines/writing.md +1 -1
  129. package/dist/docs/start/howto.md +11 -11
  130. package/dist/docs/start/intro.md +1 -1
  131. package/dist/docs/start/responsiveness.md +1 -1
  132. package/dist/docs/utilities/classNames.md +3 -18
  133. package/dist/docs/utilities/deviceUtils.md +7 -13
  134. package/dist/docs/utilities/featureToggles.md +1 -1
  135. package/dist/docs/utilities/fuelTypeUtils.md +2 -12
  136. package/dist/docs/utilities/routeUtils.md +25 -343
  137. package/dist/docs/utilities/useAfterMount.md +1 -6
  138. package/dist/docs/utilities/useAutoAnimate.md +2 -15
  139. package/dist/docs/utilities/useAverage.md +1 -6
  140. package/dist/docs/utilities/useClickOutside.md +1 -5
  141. package/dist/docs/utilities/useClipboard.md +2 -6
  142. package/dist/docs/utilities/useCookies.md +2 -10
  143. package/dist/docs/utilities/useCount.md +7 -16
  144. package/dist/docs/utilities/useDarkMode.md +2 -6
  145. package/dist/docs/utilities/useDebugInfo.md +6 -20
  146. package/dist/docs/utilities/useEffectOnce.md +1 -6
  147. package/dist/docs/utilities/useElapsedTime.md +2 -6
  148. package/dist/docs/utilities/useElementSize.md +1 -7
  149. package/dist/docs/utilities/useEsc.md +1 -5
  150. package/dist/docs/utilities/useEvent.md +1 -5
  151. package/dist/docs/utilities/useFocusTrap.md +1 -5
  152. package/dist/docs/utilities/useFullscreen.md +2 -15
  153. package/dist/docs/utilities/useHover.md +1 -5
  154. package/dist/docs/utilities/useIncomingPostMessages.md +2 -18
  155. package/dist/docs/utilities/useInterval.md +2 -8
  156. package/dist/docs/utilities/useIsFocusWithin.md +1 -10
  157. package/dist/docs/utilities/useKey.md +1 -15
  158. package/dist/docs/utilities/useLocalStorage.md +2 -11
  159. package/dist/docs/utilities/useLocationSuggestions.md +1 -5
  160. package/dist/docs/utilities/useMax.md +1 -5
  161. package/dist/docs/utilities/useMin.md +1 -5
  162. package/dist/docs/utilities/useMutationObserver.md +3 -11
  163. package/dist/docs/utilities/useOnScreen.md +1 -8
  164. package/dist/docs/utilities/useOnlineStatus.md +1 -5
  165. package/dist/docs/utilities/usePostMessage.md +3 -9
  166. package/dist/docs/utilities/usePostMessageSender.md +3 -13
  167. package/dist/docs/utilities/usePrevious.md +1 -5
  168. package/dist/docs/utilities/useResizeObserver.md +3 -11
  169. package/dist/docs/utilities/useRioCookieConsent.md +1 -5
  170. package/dist/docs/utilities/useScrollPosition.md +3 -59
  171. package/dist/docs/utilities/useSearch.md +2 -16
  172. package/dist/docs/utilities/useSearchHighlight.md +13 -78
  173. package/dist/docs/utilities/useSorting.md +18 -43
  174. package/dist/docs/utilities/useStateWithValidation.md +1 -5
  175. package/dist/docs/utilities/useSum.md +1 -9
  176. package/dist/docs/utilities/useTableExport.md +42 -59
  177. package/dist/docs/utilities/useTableSelection.md +74 -119
  178. package/dist/docs/utilities/useTimeout.md +2 -6
  179. package/dist/docs/utilities/useToggle.md +4 -14
  180. package/dist/docs/utilities/useUrlState.md +2 -27
  181. package/dist/docs/utilities/useWindowResize.md +1 -5
  182. package/dist/index.mjs +46 -16
  183. package/dist/version.json +2 -2
  184. package/package.json +15 -9
  185. package/dist/docs/templates/common-table.md +0 -1112
  186. package/dist/docs/templates/detail-views.md +0 -942
  187. package/dist/docs/templates/expandable-details.md +0 -228
  188. package/dist/docs/templates/feature-cards.md +0 -549
  189. package/dist/docs/templates/form-summary.md +0 -199
  190. package/dist/docs/templates/form-toggle.md +0 -367
  191. package/dist/docs/templates/list-blocks.md +0 -1021
  192. package/dist/docs/templates/loading-progress.md +0 -109
  193. package/dist/docs/templates/options-panel.md +0 -152
  194. package/dist/docs/templates/panel-variants.md +0 -164
  195. package/dist/docs/templates/progress-cards.md +0 -607
  196. package/dist/docs/templates/progress-success.md +0 -142
  197. package/dist/docs/templates/settings-form.md +0 -434
  198. package/dist/docs/templates/stats-blocks.md +0 -1381
  199. package/dist/docs/templates/table-panel.md +0 -184
  200. package/dist/docs/templates/table-row-animation.md +0 -317
  201. package/dist/docs/templates/usage-cards.md +0 -227
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Interaction
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/editableContent
6
- *Captured:* 2026-02-23T15:48:16.133Z
6
+ *Captured:* 2026-03-06T10:40:11.074Z
7
7
 
8
8
  The EditableContent component allows for inline editing text or other values. To make sure the user can recognize such an element, it's best to mark the text or content with a dotted line depending on the situation and where it is placed. Alternatively, you can place the "pencil" icon next to the content. Especially on mobile where no hover is available, the editable content must be marked permanently.
9
9
 
@@ -13,13 +13,7 @@ Please also check out the usage guidelines below.
13
13
 
14
14
  ### Example: Example 1
15
15
 
16
- Simple editable content
17
- Click Me!
18
-
19
- #### Summary
20
-
21
- Simple editable content
22
- Click Me!
16
+ Simple editable content Click Me!
23
17
 
24
18
  #### React (tsx)
25
19
 
@@ -90,13 +84,6 @@ Headline that can change
90
84
 
91
85
  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.
92
86
 
93
- #### Summary
94
-
95
- Editable headline - like dialog or panel header
96
- Headline that can change
97
-
98
- 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.
99
-
100
87
  #### React (tsx)
101
88
 
102
89
  ```tsx
@@ -186,11 +173,6 @@ export default () => {
186
173
  Editable content using a resizable textarea
187
174
  This text can be edited on multiple lines
188
175
 
189
- #### Summary
190
-
191
- Editable content using a resizable textarea
192
- This text can be edited on multiple lines
193
-
194
176
  #### React (tsx)
195
177
 
196
178
  ```tsx
@@ -269,11 +251,7 @@ export default () => {
269
251
 
270
252
  ### Example: Example 4
271
253
 
272
- Focusable editable content with input validationThis content must not contain numbers.
273
-
274
- #### Summary
275
-
276
- Focusable editable content with input validationThis content must not contain numbers.
254
+ Focusable editable content with input validation This content must not contain numbers.
277
255
 
278
256
  #### React (tsx)
279
257
 
@@ -369,11 +347,7 @@ export default () => {
369
347
 
370
348
  ### Example: Example 5
371
349
 
372
- Editable text inside of another textLorem 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. This text can be edited 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.`;
373
-
374
- #### Summary
375
-
376
- Editable text inside of another textLorem 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. This text can be edited 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.`;
350
+ Editable text inside of another text 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. This text can be edited 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.`;
377
351
 
378
352
  #### React (tsx)
379
353
 
@@ -446,11 +420,6 @@ export default () => {
446
420
  Render NumberControl as custom editor component
447
421
  234
448
422
 
449
- #### Summary
450
-
451
- Render NumberControl as custom editor component
452
- 234
453
-
454
423
  #### React (tsx)
455
424
 
456
425
  ```tsx
@@ -590,11 +559,6 @@ export default () => {
590
559
  Render NumberInput as custom editor component with input validation
591
560
  234
592
561
 
593
- #### Summary
594
-
595
- Render NumberInput as custom editor component with input validation
596
- 234
597
-
598
562
  #### React (tsx)
599
563
 
600
564
  ```tsx
@@ -774,48 +738,6 @@ Lorem ipsum dolor
774
738
  Note
775
739
  In general, don't make every cell in a table editable. The indication style would be too repetitive and the user does not expect this behavior as it is not implemented in other services like so. Strive for a common look and feel with regards to other services.
776
740
 
777
- #### Summary
778
-
779
- Don't
780
- Avoid overuse in lists or tables. Avoid many repetitions of edit icons.
781
- Lorem ipsum dolor
782
-
783
- Lorem ipsum dolor
784
-
785
- Lorem ipsum dolor
786
-
787
- Lorem ipsum dolor
788
-
789
- Lorem ipsum dolor
790
-
791
- Lorem ipsum dolor
792
-
793
- Lorem ipsum dolor
794
-
795
- Do
796
- Use an underline to indicate editable text and use a hover icon on Desktop if possible.
797
- Lorem ipsum dolor
798
-
799
- Lorem ipsum dolor
800
-
801
- Lorem ipsum dolor
802
-
803
- Lorem ipsum dolor
804
-
805
- Lorem ipsum dolor
806
-
807
- Lorem ipsum dolor
808
-
809
- Lorem ipsum dolor
810
-
811
- Do
812
- Using the editable field in isolation like inside a panel header or a like, you can permanently show a edit icon.
813
- Lorem ipsum dolor
814
- Lorem ipsum dolor
815
-
816
- Note
817
- In general, don't make every cell in a table editable. The indication style would be too repetitive and the user does not expect this behavior as it is not implemented in other services like so. Strive for a common look and feel with regards to other services.
818
-
819
741
  #### React (tsx)
820
742
 
821
743
  ```tsx
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Show/Hide
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/expander
6
- *Captured:* 2026-02-23T15:48:22.087Z
6
+ *Captured:* 2026-03-06T10:40:18.829Z
7
7
 
8
8
  A simple panel component where the "panel-body" can be expanded.
9
9
 
@@ -11,13 +11,7 @@ A simple panel component where the "panel-body" can be expanded.
11
11
 
12
12
  ### Example: Example 1
13
13
 
14
- Toggle expanderOpen expanderClose expander
15
- Click me to toggle my state
16
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
17
-
18
- #### Summary
19
-
20
- Toggle expanderOpen expanderClose expander
14
+ Toggle expander Open expander Close expander
21
15
  Click me to toggle my state
22
16
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
23
17
 
@@ -135,78 +129,37 @@ export default () => {
135
129
 
136
130
  ### Example: Default
137
131
 
138
- DefaultLorem ipsum
139
- Some content
140
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
141
-
142
- BlankLorem ipsum
143
- Some content
144
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
145
-
146
- SeparatorSeparator with icon left
147
-
148
- Lorem ipsum dolor sit amet
149
- consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
150
-
151
- SeparatorSeparator right aligned
152
-
153
- Lorem ipsum dolor sit amet
154
- consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
155
-
156
- PrimaryLorem ipsum
157
-
158
- PrimaryHeader with icon left
159
-
160
- SecondaryLorem ipsum
161
-
162
- InfoLorem ipsum
163
-
164
- WarningLorem ipsum
165
-
166
- DangerLorem ipsum
167
-
168
- successLorem ipsum
169
-
170
- Dynamic table content
171
- Item 1
172
- Item 2
173
- Item 3
174
-
175
- Add new table row
176
-
177
- #### Summary
178
-
179
- DefaultLorem ipsum
132
+ Default Lorem ipsum
180
133
  Some content
181
134
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
182
135
 
183
- BlankLorem ipsum
136
+ Blank Lorem ipsum
184
137
  Some content
185
138
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
186
139
 
187
- SeparatorSeparator with icon left
140
+ Separator Separator with icon left
188
141
 
189
142
  Lorem ipsum dolor sit amet
190
143
  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
191
144
 
192
- SeparatorSeparator right aligned
145
+ Separator Separator right aligned
193
146
 
194
147
  Lorem ipsum dolor sit amet
195
148
  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
196
149
 
197
- PrimaryLorem ipsum
150
+ Primary Lorem ipsum
198
151
 
199
- PrimaryHeader with icon left
152
+ Primary Header with icon left
200
153
 
201
- SecondaryLorem ipsum
154
+ Secondary Lorem ipsum
202
155
 
203
- InfoLorem ipsum
156
+ Info Lorem ipsum
204
157
 
205
- WarningLorem ipsum
158
+ Warning Lorem ipsum
206
159
 
207
- DangerLorem ipsum
160
+ Danger Lorem ipsum
208
161
 
209
- successLorem ipsum
162
+ success Lorem ipsum
210
163
 
211
164
  Dynamic table content
212
165
  Item 1
@@ -691,37 +644,11 @@ Grid column 1
691
644
  Grid column 2
692
645
  Grid column 3
693
646
 
694
- Click me42
695
-
696
- Click me
697
-
698
- Not expandable since there is no body
699
-
700
- Toggle first
701
-
702
- #### Summary
647
+ Click me 42
703
648
 
704
649
  Click me
705
- Some content
706
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
707
-
708
- Click me
709
-
710
- Click me
711
-
712
- With custom classes for header and body
713
-
714
- Grid column 1
715
- Grid column 2
716
- Grid column 3
717
-
718
- Click me42
719
-
720
- Click me
721
-
722
- Not expandable since there is no body
723
650
 
724
- Toggle first
651
+ Not expandable since there is no body Toggle first
725
652
 
726
653
  #### React (tsx)
727
654
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Show/Hide
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/fade
6
- *Captured:* 2026-02-23T15:48:24.625Z
6
+ *Captured:* 2026-03-06T10:40:20.356Z
7
7
 
8
8
  The Fade component fades in and out content with a given animation style.
9
9
 
@@ -11,17 +11,7 @@ The Fade component fades in and out content with a given animation style.
11
11
 
12
12
  ### Example: Example 1
13
13
 
14
- Animation styles:fade (default)fromLeftfromRightfromTopfromBottom
15
-
16
- Toggle content
17
-
18
- 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.
19
-
20
- #### Summary
21
-
22
- Animation styles:fade (default)fromLeftfromRightfromTopfromBottom
23
-
24
- Toggle content
14
+ Animation styles: fade (default) fromLeft fromRight fromTop fromBottom Toggle content
25
15
 
26
16
  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.
27
17
 
@@ -160,16 +150,7 @@ export default () => {
160
150
  ### Example: Example 2
161
151
 
162
152
  Fading tab content:
163
- When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
164
- Tab 1
165
- Tab 2
166
-
167
- 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.
168
-
169
- #### Summary
170
-
171
- Fading tab content:
172
- When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
153
+ When using tabs or pills to switch between content, please us the fade style 'tabs' . It's the default so you don't have to explicitly set it.
173
154
  Tab 1
174
155
  Tab 2
175
156
 
@@ -275,16 +256,7 @@ const ContentTab2 = () => (
275
256
  ### Example: Example 3
276
257
 
277
258
  Fading pills content:
278
- When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
279
- Tab 1
280
- Tab 2
281
-
282
- 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.
283
-
284
- #### Summary
285
-
286
- Fading pills content:
287
- When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
259
+ When using tabs or pills to switch between content, please us the fade style 'tabs' . It's the default so you don't have to explicitly set it.
288
260
  Tab 1
289
261
  Tab 2
290
262
 
@@ -412,17 +384,6 @@ Previous
412
384
 
413
385
  Next
414
386
 
415
- #### Summary
416
-
417
- Page transition fade:
418
- You may want to use 'page' or 'pageBack' style when you want to animate content as page transition. Example usage would be in a dialog, when showing onboarding screens or for steps.
419
-
420
- 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.
421
-
422
- Previous
423
-
424
- Next
425
-
426
387
  #### React (tsx)
427
388
 
428
389
  ```tsx
@@ -597,24 +558,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
597
558
  Consetetur sadipscing
598
559
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
599
560
 
600
- #### Summary
601
-
602
- This demonstrates how transitions can be used to create a more engaging user experience.
603
- Selecting an item from this list takes you to a second view that provides detailed information specific to the chosen item.
604
- This approach is particularly beneficial when dealing with limited space, such as narrow sidebars or dialog boxes with multiple steps. By utilizing transitions in these scenarios, you can effectively guide users through the process without cluttering the interface.
605
-
606
- Lorem ipsum
607
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
608
-
609
- Dolor
610
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
611
-
612
- Sit amet
613
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
614
-
615
- Consetetur sadipscing
616
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
617
-
618
561
  #### React (tsx)
619
562
 
620
563
  ```tsx
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Show/Hide
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/fadeExpander
6
- *Captured:* 2026-02-23T15:48:22.049Z
6
+ *Captured:* 2026-03-06T10:40:19.524Z
7
7
 
8
8
  The FadeExpander component fades in and expands when the content.
9
9
 
@@ -15,12 +15,6 @@ Lorem ipsum dolor sit amet
15
15
 
16
16
  Enable lorem ipsum dolor sit amet
17
17
 
18
- #### Summary
19
-
20
- Lorem ipsum dolor sit amet
21
-
22
- Enable lorem ipsum dolor sit amet
23
-
24
18
  #### React (tsx)
25
19
 
26
20
  ```tsx
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Show/Hide
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/fadeUp
6
- *Captured:* 2026-02-23T15:48:23.237Z
6
+ *Captured:* 2026-03-06T10:40:20.757Z
7
7
 
8
8
  The FadeUp component fades in when the content appears on the screen. After it faded in, the element will stay on screen. This can be used in a scrolling scenario where elements should fade up when they scroll into view. Using the delay helps to stagger the animation.
9
9
 
@@ -71,68 +71,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
71
71
 
72
72
  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.
73
73
 
74
- #### Summary
75
-
76
- 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.
77
-
78
- 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.
79
-
80
- 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.
81
-
82
- 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.
83
-
84
- 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.
85
-
86
- 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.
87
-
88
- 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.
89
-
90
- 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.
91
-
92
- 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.
93
-
94
- 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.
95
-
96
- 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.
97
-
98
- 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.
99
-
100
- 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.
101
-
102
- 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.
103
-
104
- 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.
105
-
106
- 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.
107
-
108
- 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.
109
-
110
- 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.
111
-
112
- 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.
113
-
114
- 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.
115
-
116
- 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.
117
-
118
- 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.
119
-
120
- 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.
121
-
122
- 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.
123
-
124
- 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.
125
-
126
- 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.
127
-
128
- 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.
129
-
130
- 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.
131
-
132
- 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.
133
-
134
- 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.
135
-
136
74
  #### React (tsx)
137
75
 
138
76
  ```tsx
@@ -300,18 +238,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
300
238
 
301
239
  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.
302
240
 
303
- #### Summary
304
-
305
- Lorem ipsum dolor sit amet
306
-
307
- 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.
308
-
309
- 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.
310
-
311
- 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.
312
-
313
- 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.
314
-
315
241
  #### React (tsx)
316
242
 
317
243
  ```tsx
@@ -356,7 +282,7 @@ export default () => {
356
282
  <div class="" style="opacity: 1; transform: none;">
357
283
  <h1 class="">Lorem ipsum dolor sit amet</h1>
358
284
  </div>
359
- <div class="" style="opacity: 0; transform: translateY(0.0280765px);">
285
+ <div class="" style="opacity: 0; transform: translateY(0.0299483px);">
360
286
  <p class="text-color-dark">
361
287
  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.</p>
362
288
  </div>
@@ -3,51 +3,30 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/feedback
6
- *Captured:* 2026-02-23T15:48:57.392Z
6
+ *Captured:* 2026-03-06T10:40:59.233Z
7
7
 
8
8
  ## FeedbackRating
9
9
 
10
10
  ### Example: Extremely dissatisfied
11
11
 
12
12
  How do you feel about this feature
13
- 12345678910
14
- Extremely dissatisfiedExtremely satisfied
13
+ 1 2 3 4 5 6 7 8 9 10
14
+ Extremely dissatisfied Extremely satisfied
15
15
 
16
16
  Rate your experience with this feature
17
17
 
18
- 12345
18
+ 1 2 3 4 5
19
19
 
20
20
  Give us feedback
21
21
 
22
22
  Rate your experience with our product
23
- 12345
23
+ 1 2 3 4 5
24
24
 
25
25
  Stars
26
26
 
27
27
  How likely is it that you would recommend us to a friend or colleague?
28
- 12345678910
29
- Not likely at allVery likely
30
-
31
- #### Summary
32
-
33
- How do you feel about this feature
34
- 12345678910
35
- Extremely dissatisfiedExtremely satisfied
36
-
37
- Rate your experience with this feature
38
-
39
- 12345
40
-
41
- Give us feedback
42
-
43
- Rate your experience with our product
44
- 12345
45
-
46
- Stars
47
-
48
- How likely is it that you would recommend us to a friend or colleague?
49
- 12345678910
50
- Not likely at allVery likely
28
+ 1 2 3 4 5 6 7 8 9 10
29
+ Not likely at all Very likely
51
30
 
52
31
  #### React (tsx)
53
32
 
@@ -309,33 +288,11 @@ export default () => {
309
288
 
310
289
  Subtle request for usefulness
311
290
  Was this helpful?
312
- Not reallyKind ofYes, it was
313
-
314
- Reset
315
-
316
- Another variation of inline request for usefulness
317
-
318
- Helpful
319
-
320
- Not helpful
321
-
322
- Reset
323
-
324
- #### Summary
325
-
326
- Subtle request for usefulness
327
- Was this helpful?
328
- Not reallyKind ofYes, it was
329
-
330
- Reset
291
+ Not really Kind of Yes, it was Reset
331
292
 
332
293
  Another variation of inline request for usefulness
333
-
334
294
  Helpful
335
-
336
- Not helpful
337
-
338
- Reset
295
+ Not helpful Reset
339
296
 
340
297
  #### React (tsx)
341
298
 
@@ -554,22 +511,6 @@ Nicht interessant für mich
554
511
 
555
512
  Ich möchte mehr erfahren
556
513
 
557
- #### Summary
558
-
559
- Simple reaction without labels
560
-
561
- Simple reaction without labels and hover colors
562
-
563
- Small filled reaction with labels right
564
- Bad
565
-
566
- Good
567
-
568
- Animated reaction with labels
569
- Nicht interessant für mich
570
-
571
- Ich möchte mehr erfahren
572
-
573
514
  #### React (tsx)
574
515
 
575
516
  ```tsx