@rio-cloud/uikit-mcp 1.1.10 → 1.1.11

package/dist/docs/components/selects.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#/components/selects
-*Captured:* 2026-04-20T12:54:03.090Z
+*Captured:* 2026-04-27T14:57:38.260Z
 
 The Select and Multiselect components are form controls and are intended to be used within forms. They are designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.
 
@@ -1132,11 +1132,16 @@ Option 4
 
 with loading spinner Please select
 
+Blank variant Lorem: Ipsum Ipsum
+Dolor
+
 #### React (tsx)
 
 ```tsx
 import Select from '@rio-cloud/rio-uikit/Select';
 import Notification from '@rio-cloud/rio-uikit/Notification';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import Divider from '@rio-cloud/rio-uikit/Divider';
 
 const options1 = [
     { id: '1', label: 'Option 1' },
@@ -1238,11 +1243,16 @@ const options7 = [
     },
 ];
 
+const options8 = [
+    { id: '1', label: 'Ipsum', selected: true },
+    { id: '2', label: 'Dolor' },
+];
+
 export default () => (
     <div>
         <div className='row'>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='1'>Notification callback</label>
+                <FormLabel htmlFor='1'>Notification callback</FormLabel>
                 <Select
                     id='1'
                     placeholder='Please select'
@@ -1254,18 +1264,18 @@ export default () => (
                 />
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='2'>with pre-selected item</label>
+                <FormLabel htmlFor='2'>with pre-selected item</FormLabel>
                 <Select id='2' options={options2} onChange={item => Notification.info(item?.label)} />
             </div>
             <div className='col-xs-12 col-sm-4 form-group'>
-                <label htmlFor='3'>with disabled item and group header</label>
+                <FormLabel htmlFor='3'>with disabled item and group header</FormLabel>
                 <Select id='3' placeholder='Please select' options={options3} />
             </div>
         </div>
 
         <div className='row'>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='4'>with filter</label>
+                <FormLabel htmlFor='4'>with filter</FormLabel>
                 <Select
                     id='4'
                     placeholder='Please select'
@@ -1275,11 +1285,11 @@ export default () => (
                 />
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='5'>with label</label>
+                <FormLabel htmlFor='5'>with label</FormLabel>
                 <Select id='5' placeholder='Please select' options={options4} label='Vehicle' />
             </div>
             <div className='col-xs-12 col-sm-4 form-group'>
-                <label htmlFor='6'>with input</label>
+                <FormLabel htmlFor='6'>with input</FormLabel>
                 <div className='input-group'>
                     <div className='input-group-btn'>
                         <Select id='6' options={options2} />
@@ -1288,7 +1298,7 @@ export default () => (
                 </div>
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='7'>with clear button</label>
+                <FormLabel htmlFor='7'>with clear button</FormLabel>
                 <Select
                     id='7'
                     placeholder='Please select'
@@ -1298,16 +1308,16 @@ export default () => (
                 />
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='8'>with "dropup"</label>
+                <FormLabel htmlFor='8'>with "dropup"</FormLabel>
                 <Select id='8' placeholder='Please select' options={options2} dropup />
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='9'>Disabled</label>
+                <FormLabel htmlFor='9'>Disabled</FormLabel>
                 <Select id='9' placeholder='Please select' disabled options={[]} />
             </div>
 
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='20'>With icon rendered in an inputAddon</label>
+                <FormLabel htmlFor='20'>With icon rendered in an inputAddon</FormLabel>
                 <Select
                     id='20'
                     placeholder='Please select'
@@ -1317,16 +1327,16 @@ export default () => (
                 />
             </div>
         </div>
-        <hr />
+        <Divider />
 
         <div className='row'>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='10'>with truncated label</label>
+                <FormLabel htmlFor='10'>with truncated label</FormLabel>
                 <Select id='10' placeholder='Please select' options={options7} />
             </div>
             <div className='col-12 col-sm-8 display-flex flex-wrap justify-content-end gap-10'>
                 <div>
-                    <label htmlFor='11'>with "pullRight" on small selects</label>
+                    <FormLabel htmlFor='11'>with "pullRight" on small selects</FormLabel>
                     <div className='display-flex gap-10 align-items-end'>
                         <div className='form-group'>
                             <Select id='11' placeholder='Please select' options={options6} pullRight />
@@ -1337,7 +1347,7 @@ export default () => (
                     </div>
                 </div>
                 <div>
-                    <label htmlFor='13'>with "pullRight" and "width-auto"</label>
+                    <FormLabel htmlFor='13'>with "pullRight" and "width-auto"</FormLabel>
                     <div className='form-group'>
                         <Select
                             id='13'
@@ -1350,10 +1360,10 @@ export default () => (
                 </div>
             </div>
         </div>
-        <hr />
+        <Divider />
 
         <div className='form-group'>
-            <label htmlFor='14'>with custom sizes</label>
+            <FormLabel htmlFor='14'>with custom sizes</FormLabel>
             <div className='display-flex gap-10 align-items-end'>
                 <div className='form-group'>
                     <Select id='14' bsSize='lg' options={options5} />
@@ -1366,20 +1376,20 @@ export default () => (
                 </div>
             </div>
         </div>
-        <hr />
+        <Divider />
 
         <div className='form-group has-error has-feedback max-width-400'>
-            <label htmlFor='15'>with external error feedback</label>
+            <FormLabel htmlFor='15'>with external error feedback</FormLabel>
             <Select id='15' options={options2} hasError />
             <span className='form-control-feedback rioglyph rioglyph-error-sign' />
             <span className='help-block'>
                 <span>This is an error message</span>
             </span>
         </div>
-        <hr />
+        <Divider asSpacer />
 
         <div className='max-width-400'>
-            <label htmlFor='18'>with built-in error feedback</label>
+            <FormLabel htmlFor='18'>with built-in error feedback</FormLabel>
             <Select
                 id='18'
                 options={options2}
@@ -1387,10 +1397,10 @@ export default () => (
                 errorMessage='This is an error message'
             />
         </div>
-        <hr />
+        <Divider className='margin-top-50' />
 
         <div className='form-group'>
-            <label htmlFor='16'>with custom button classes</label>
+            <FormLabel htmlFor='16'>with custom button classes</FormLabel>
             <div className='form-inline'>
                 <div className='form-group'>
                     <Select
@@ -1418,10 +1428,10 @@ export default () => (
                 </div>
             </div>
         </div>
-        <hr />
+        <Divider />
 
         <div className='form-group'>
-            <label htmlFor='17'>with icons only</label>
+            <FormLabel htmlFor='17'>with icons only</FormLabel>
             <div className='form-inline'>
                 <div className='form-group'>
                     <Select id='17' options={options5} placeholder='Please select' showSelectedItemIcon />
@@ -1433,13 +1443,26 @@ export default () => (
         </div>
 
         <div className='form-group'>
-            <label htmlFor='18'>with loading spinner</label>
+            <FormLabel htmlFor='18'>with loading spinner</FormLabel>
             <div className='form-inline'>
                 <div className='form-group'>
                     <Select id='18' options={options1} placeholder='Please select' isLoading />
                 </div>
             </div>
         </div>
+
+        <Divider />
+        <div className='form-group max-width-200'>
+            <FormLabel htmlFor='19'>Blank variant</FormLabel>
+            <Select
+                id='19'
+                placeholder='Please select'
+                label='Lorem'
+                options={options8}
+                variant='blank'
+                btnClassName='width-auto padding-left-0'
+            />
+        </div>
     </div>
 );
 ```
@@ -1450,7 +1473,9 @@ export default () => (
 <div>
     <div class="row">
         <div class="col-12 col-sm-4 form-group">
-            <label for="1">Notification callback</label>
+            <label for="1" class="display-inline-block">
+                <span>Notification callback</span>
+            </label>
             <div class="select dropdown test-className">
                 <button type="button" id="1" class="dropdown-toggle form-control text-left test-btnClassName" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">
@@ -1530,7 +1555,9 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="2">with pre-selected item</label>
+            <label for="2" class="display-inline-block">
+                <span>with pre-selected item</span>
+            </label>
             <div class="select dropdown">
                 <button type="button" id="2" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">Option 3</span>
@@ -1566,7 +1593,9 @@ export default () => (
             </div>
         </div>
         <div class="col-xs-12 col-sm-4 form-group">
-            <label for="3">with disabled item and group header</label>
+            <label for="3" class="display-inline-block">
+                <span>with disabled item and group header</span>
+            </label>
             <div class="select dropdown">
                 <button type="button" id="3" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">
@@ -1609,7 +1638,9 @@ export default () => (
     </div>
     <div class="row">
         <div class="col-12 col-sm-4 form-group">
-            <label for="4">with filter</label>
+            <label for="4" class="display-inline-block">
+                <span>with filter</span>
+            </label>
             <div class="select dropdown">
                 <button type="button" id="4" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">
@@ -9629,7 +9660,9 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="5">with label</label>
+            <label for="5" class="display-inline-block">
+                <span>with label</span>
+            </label>
             <div class="select dropdown">
                 <button type="button" id="5" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">
@@ -9674,7 +9707,9 @@ export default () => (
             </div>
         </div>
         <div class="col-xs-12 col-sm-4 form-group">
-            <label for="6">with input</label>
+            <label for="6" class="display-inline-block">
+                <span>with input</span>
+            </label>
             <div class="input-group">
                 <div class="input-group-btn">
                     <div class="select dropdown">
@@ -9715,7 +9750,9 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="7">with clear button</label>
+            <label for="7" class="display-inline-block">
+                <span>with clear button</span>
+            </label>
             <div class="select dropdown">
                 <button type="button" id="7" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">Option 3</span>
@@ -9751,7 +9788,9 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="8">with "dropup"</label>
+            <label for="8" class="display-inline-block">
+                <span>with "dropup"</span>
+            </label>
             <div class="select dropdown dropup">
                 <button type="button" id="8" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">Option 3</span>
@@ -9787,7 +9826,9 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="9">Disabled</label>
+            <label for="9" class="display-inline-block">
+                <span>Disabled</span>
+            </label>
             <div class="select dropdown">
                 <button type="button" id="9" class="dropdown-toggle form-control text-left disabled" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">
@@ -9805,7 +9846,9 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="20">With icon rendered in an inputAddon</label>
+            <label for="20" class="display-inline-block">
+                <span>With icon rendered in an inputAddon</span>
+            </label>
             <div class="select dropdown">
                 <div class="form-group margin-bottom-0">
                     <div class="input-group">
@@ -9895,10 +9938,15 @@ export default () => (
             </div>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="row">
         <div class="col-12 col-sm-4 form-group">
-            <label for="10">with truncated label</label>
+            <label for="10" class="display-inline-block">
+                <span>with truncated label</span>
+            </label>
             <div class="select dropdown">
                 <button type="button" id="10" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="selected-option-text">Select with a very long label to demonstrate truncating inner text with ellipsis</span>
@@ -9935,7 +9983,9 @@ export default () => (
         </div>
         <div class="col-12 col-sm-8 display-flex flex-wrap justify-content-end gap-10">
             <div>
-                <label for="11">with "pullRight" on small selects</label>
+                <label for="11" class="display-inline-block">
+                    <span>with "pullRight" on small selects</span>
+                </label>
                 <div class="display-flex gap-10 align-items-end">
                     <div class="form-group">
                         <div class="select dropdown">
@@ -10010,7 +10060,9 @@ export default () => (
                 </div>
             </div>
             <div>
-                <label for="13">with "pullRight" and "width-auto"</label>
+                <label for="13" class="display-inline-block">
+                    <span>with "pullRight" and "width-auto"</span>
+                </label>
                 <div class="form-group">
                     <div class="select dropdown">
                         <button type="button" id="13" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
@@ -10049,9 +10101,14 @@ export default () => (
             </div>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="form-group">
-        <label for="14">with custom sizes</label>
+        <label for="14" class="display-inline-block">
+            <span>with custom sizes</span>
+        </label>
         <div class="display-flex gap-10 align-items-end">
             <div class="form-group">
                 <div class="select dropdown dropup">
@@ -10214,9 +10271,14 @@ export default () => (
             </div>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="form-group has-error has-feedback max-width-400">
-        <label for="15">with external error feedback</label>
+        <label for="15" class="display-inline-block">
+            <span>with external error feedback</span>
+        </label>
         <div class="select dropdown has-error dropup">
             <button type="button" id="15" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                 <span class="selected-option-text">Option 3</span>
@@ -10256,9 +10318,12 @@ export default () => (
             <span>This is an error message</span>
         </span>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+    </div>
     <div class="max-width-400">
-        <label for="18">with built-in error feedback</label>
+        <label for="18" class="display-inline-block">
+            <span>with built-in error feedback</span>
+        </label>
         <div class="select dropdown dropup">
             <div class="form-group margin-bottom-0 has-feedback has-error">
                 <div class="input-group">
@@ -10308,9 +10373,14 @@ export default () => (
             </ul>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct margin-top-50" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="form-group">
-        <label for="16">with custom button classes</label>
+        <label for="16" class="display-inline-block">
+            <span>with custom button classes</span>
+        </label>
         <div class="form-inline">
             <div class="form-group">
                 <div class="select dropdown shadow-none dropup">
@@ -10419,9 +10489,14 @@ export default () => (
             </div>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="form-group">
-        <label for="17">with icons only</label>
+        <label for="17" class="display-inline-block">
+            <span>with icons only</span>
+        </label>
         <div class="form-inline">
             <div class="form-group">
                 <div class="select dropdown dropup">
@@ -10546,7 +10621,9 @@ export default () => (
         </div>
     </div>
     <div class="form-group">
-        <label for="18">with loading spinner</label>
+        <label for="18" class="display-inline-block">
+            <span>with loading spinner</span>
+        </label>
         <div class="form-inline">
             <div class="form-group">
                 <div class="select dropdown dropup">
@@ -10583,6 +10660,43 @@ export default () => (
             </div>
         </div>
     </div>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
+    <div class="form-group max-width-200">
+        <label for="19" class="display-inline-block">
+            <span>Blank variant</span>
+        </label>
+        <div class="select dropdown select-blank dropup">
+            <button type="button" id="19" class="dropdown-toggle form-control text-left width-auto padding-left-0" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+                <span class="selected-option-text">
+                    <span class="selected-option-text-label">Lorem:</span>Ipsum</span>
+                <span class="select-toggle-actions">
+                    <span class="clearButton hide pointer-events-none">
+                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                        </span>
+                    </span>
+                    <span class="caret">
+                    </span>
+                </span>
+            </button>
+            <ul class="dropdown-menu" role="menu">
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
+                        <span class="selected-option-dropdown-item">Ipsum</span>
+                        <input type="hidden" value="1">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
+                        <span class="selected-option-dropdown-item">Dolor</span>
+                        <input type="hidden" value="2">
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
 </div>
 ```
 
@@ -10607,6 +10721,7 @@ export default () => (
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -10747,6 +10862,7 @@ export default ControlledSelectExample;
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -10873,6 +10989,7 @@ export default ControlledFilterSelectExample;
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |

package/dist/docs/components/sidebar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/sidebar
-*Captured:* 2026-04-20T12:53:35.298Z
+*Captured:* 2026-04-27T14:57:09.895Z
 
 There are 2 kinds of Sidebars. The default fluid and the fly variant.
 

package/dist/docs/components/sliders.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/sliders
-*Captured:* 2026-04-20T12:53:49.250Z
+*Captured:* 2026-04-27T14:57:24.295Z
 
 ## Slider
 

package/dist/docs/components/smoothScrollbars.md

@@ -3,10 +3,12 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/smoothScrollbars
-*Captured:* 2026-04-20T12:54:58.556Z
+*Captured:* 2026-04-27T14:58:32.251Z
 
 ## SmoothScrollbars
 
+> Note: SmoothScrollbars only work for elements with a certain height.Padding cannot be part of the SmoothScrollbars element and must be added to the child.Mac scrollbars are only visible if a hardware mouse is connected.
+
 ### Example: Always visible
 
 Always visible

package/dist/docs/components/spinners.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/spinners
-*Captured:* 2026-04-20T12:54:57.627Z
+*Captured:* 2026-04-27T14:58:31.880Z
 
 ## Spinner
 

package/dist/docs/components/states.md

@@ -3,10 +3,12 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/states
-*Captured:* 2026-04-20T12:54:36.602Z
+*Captured:* 2026-04-27T14:58:10.843Z
 
 ## ErrorState
 
+A simple component to show an error to the user.
+
 ### Example: Something went wrong
 
 Something went wrong
@@ -140,6 +142,8 @@ export default () => (
 
 ## NotFoundState
 
+A simple component to show a message when something could not be found when searching or filtering data.
+
 ### Example: Nothing found
 
 Nothing found
@@ -226,6 +230,8 @@ export default () => (
 
 ## EmptyState
 
+A simple component to show a message when there is no data yet. The user may perform a task first in order to see some data in that view.
+
 ### Example: There is no free lunch
 
 There is no free lunch
@@ -314,6 +320,8 @@ export default () => (
 
 ## ForbiddenState
 
+A simple component to show a message when the access to a certain area is restricted.
+
 ### Example: Access not allowed
 
 Access not allowed
@@ -390,6 +398,8 @@ export default () => (
 
 ## MaintenanceState
 
+A simple component to show a message when a service is in maintenance.
+
 ### Example: Service in maintenance
 
 Service in maintenance
@@ -452,6 +462,8 @@ export default () => (
 
 ## CustomState
 
+All state components above are based on the more flexible CustomState component. Use this if you need something to be shown which cannot be accomplished otherwise.
+
 ### Example: Lorem ipsum dolor sit amet
 
 Lorem ipsum dolor sit amet
@@ -646,6 +658,8 @@ export default () => (
 
 ## NotBookedState
 
+A simple component to show a message when Service content requires a Marketplace booking.
+
 ### Example: Premium feature
 
 Premium feature

package/dist/docs/components/statsWidgets.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/statsWidgets
-*Captured:* 2026-04-20T12:54:31.842Z
+*Captured:* 2026-04-27T14:58:06.576Z
 
 ## StatsWidgets