@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/multiselects.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#/components/multiselects
-*Captured:* 2026-03-06T10:40:28.134Z
+*Captured:* 2026-04-27T14:57:37.864Z
 
 The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.
 
@@ -27,6 +27,14 @@ Option 5
 Option 6
 Group Header
 Option 8
+Option 9 with clear button Option 1 Option 4 Option 1
+Option 2
+Option 3
+Option 4
+Option 5
+Option 6
+Group Header
+Option 8
 Option 9 Disabled Option 1 Option 4 Option 1
 Option 2
 Option 3
@@ -90,6 +98,16 @@ export default () => (
             onChange={response => Notification.info(JSON.stringify(response))}
         />
         <br />
+        <label htmlFor='m1-clear'>with clear button</label>
+        <Multiselect
+            id='m1-clear'
+            placeholder='Please select'
+            options={options}
+            useFilter
+            useClear
+            onChange={response => Notification.info(response.length ? JSON.stringify(response) : 'cleared')}
+        />
+        <br />
         <label>Disabled</label>
         <Multiselect
             options={options}
@@ -128,7 +146,7 @@ export default () => (
 ```html
 <div class="form-group max-width-400">
     <label for="m1">Default Multiselect</label>
-    <div class="select multiselect dropdown dropup">
+    <div class="select multiselect dropdown">
         <button type="button" id="m1" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
             <span class="selected-option-list padding-left-1">
                 <span class="selected-option">
@@ -146,7 +164,98 @@ export default () => (
                     </span>
                 </span>
             </span>
-            <span class="caret">
+            <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="active" 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">Option 1</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">Option 2</span>
+                    <input type="hidden" value="2">
+                </a>
+            </li>
+            <li class="" role="listitem">
+                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="3" data-item-index="2">
+                    <span class="selected-option-dropdown-item">Option 3</span>
+                    <input type="hidden" value="3">
+                </a>
+            </li>
+            <li class="active" role="listitem">
+                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="4" data-item-index="3">
+                    <span class="selected-option-dropdown-item">Option 4</span>
+                    <input type="hidden" value="4">
+                </a>
+            </li>
+            <li class="" role="listitem">
+                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="5" data-item-index="4">
+                    <span class="selected-option-dropdown-item">Option 5</span>
+                    <input type="hidden" value="5">
+                </a>
+            </li>
+            <li class="disabled" role="listitem">
+                <a role="menuitem" class="pointer-events-none display-flex align-items-center gap-3" data-item-id="6" data-item-index="5">
+                    <span class="selected-option-dropdown-item">Option 6</span>
+                    <input type="hidden" value="6">
+                </a>
+            </li>
+            <li class="dropdown-header center ">
+                <span class="dropdown-header-text">Group Header</span>
+            </li>
+            <li class="" role="listitem">
+                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="8" data-item-index="7">
+                    <span class="selected-option-dropdown-item">Option 8</span>
+                    <input type="hidden" value="8">
+                </a>
+            </li>
+            <li class="" role="listitem">
+                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="9" data-item-index="8">
+                    <span class="selected-option-dropdown-item">
+                        <i>Option 9</i>
+                    </span>
+                    <input type="hidden" value="9">
+                </a>
+            </li>
+        </ul>
+    </div>
+    <br>
+    <label for="m1-clear">with clear button</label>
+    <div class="select multiselect dropdown">
+        <button type="button" id="m1-clear" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+            <span class="selected-option-list padding-left-1">
+                <span class="selected-option">
+                    <span class="selected-label">Option 1</span>
+                    <span class="removeIcon">
+                        <span class="rioglyph rioglyph-remove">
+                        </span>
+                    </span>
+                </span>
+                <span class="selected-option">
+                    <span class="selected-label">Option 4</span>
+                    <span class="removeIcon">
+                        <span class="rioglyph rioglyph-remove">
+                        </span>
+                    </span>
+                </span>
+            </span>
+            <span class="select-toggle-actions">
+                <span class="clearButton">
+                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                    </span>
+                </span>
+                <span class="caret">
+                </span>
             </span>
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -207,7 +316,7 @@ export default () => (
     </div>
     <br>
     <label>Disabled</label>
-    <div class="select multiselect dropdown dropup">
+    <div class="select multiselect dropdown">
         <button type="button" class="dropdown-toggle form-control text-left disabled" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
             <span class="selected-option-list padding-left-1">
                 <span class="selected-option">
@@ -225,7 +334,13 @@ export default () => (
                     </span>
                 </span>
             </span>
-            <span class="caret">
+            <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">
@@ -305,7 +420,13 @@ export default () => (
                         </span>
                     </span>
                 </span>
-                <span class="caret">
+                <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">
@@ -398,7 +519,13 @@ export default () => (
                                     </span>
                                 </span>
                             </span>
-                            <span class="caret">
+                            <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>
                         <span class="form-control-feedback rioglyph rioglyph-error-sign">
@@ -490,6 +617,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. |
@@ -588,7 +716,13 @@ export default () => (
                 <div class="form-control-feedback-wrapper">
                     <button type="button" id="withLabel" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                         <span class="placeholder">Please select vehicles</span>
-                        <span class="caret">
+                        <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>
                 </div>
@@ -656,6 +790,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. |
@@ -792,7 +927,13 @@ export default () => (
                             </span>
                             <input type="text" role="searchbox" class="multiselect-filter-input" value="">
                         </span>
-                        <span class="caret">
+                        <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>
                 </div>
@@ -881,6 +1022,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. |
@@ -956,7 +1098,13 @@ export default () => (
     <div class="select multiselect dropdown dropup">
         <button type="button" id="withCounter" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
             <span class="placeholder">Please select</span>
-            <span class="caret">
+            <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">
@@ -985,7 +1133,13 @@ export default () => (
     <div class="select multiselect dropdown dropup">
         <button type="button" id="withMessage" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
             <span class="placeholder">Please select</span>
-            <span class="caret">
+            <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">
@@ -1032,6 +1186,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. |
@@ -1171,7 +1326,13 @@ export default () => (
             <div class="select multiselect dropdown dropup">
                 <button type="button" class="dropdown-toggle form-control text-left input-lg" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="placeholder">Please select vehicles</span>
-                    <span class="caret">
+                    <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">
@@ -1242,7 +1403,13 @@ export default () => (
             <div class="select multiselect dropdown dropup">
                 <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="placeholder">Please select vehicles</span>
-                    <span class="caret">
+                    <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">
@@ -1314,7 +1481,13 @@ export default () => (
                 <button type="button" class="dropdown-toggle form-control text-left input-sm" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span>
                     </span>
-                    <span class="caret">
+                    <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">
@@ -1388,7 +1561,13 @@ export default () => (
             <button type="button" id="fullWidth" class="dropdown-toggle form-control text-left input-sm" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                 <span>
                 </span>
-                <span class="caret">
+                <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">
@@ -1478,6 +1657,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. |
@@ -1585,7 +1765,13 @@ export default () => (
             <div class="select multiselect dropdown dropup">
                 <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="placeholder">Please select</span>
-                    <span class="caret">
+                    <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">
@@ -1628,7 +1814,13 @@ export default () => (
             <div class="select multiselect dropdown dropup">
                 <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                     <span class="placeholder">Please select</span>
-                    <span class="caret">
+                    <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">
@@ -1688,7 +1880,13 @@ export default () => (
                             </span>
                         </span>
                     </span>
-                    <span class="caret">
+                    <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">
@@ -1751,6 +1949,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. |

package/dist/docs/components/noData.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/noData
-*Captured:* 2026-03-06T10:40:45.853Z
+*Captured:* 2026-04-27T14:58:02.039Z
 
 ## NoData
 

package/dist/docs/components/notifications.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/notifications
-*Captured:* 2026-03-06T10:41:01.595Z
+*Captured:* 2026-04-27T14:58:23.841Z
 
 Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.
 
@@ -191,7 +191,7 @@ export default () => (
     <button type="button" class="btn btn-danger btn-component" tabindex="0">Error</button>
 </div>
 <div class="margin-top-25 display-inline-flex">
-    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0" data-capture-callout="true">
+    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
         <div>
             <span class="label label-info label-condensed label-filled">Note</span>
         </div>

package/dist/docs/components/numbercontrol.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/numbercontrol
-*Captured:* 2026-03-06T10:40:09.935Z
+*Captured:* 2026-04-27T14:57:20.321Z
 
 ## NumberInput
 
@@ -199,7 +199,7 @@ export default () => {
                     </span>
                 </div>
                 <div class="form-control-feedback-wrapper">
-                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-sm Test" aria-label="number-input" value="0">
+                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-sm padding-right-5 Test" aria-label="number-input" value="0">
                 </div>
                 <div class="input-group-addon ">m</div>
             </div>
@@ -211,7 +211,7 @@ export default () => {
                     </span>
                 </div>
                 <div class="form-control-feedback-wrapper">
-                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls Test" aria-label="number-input" value="0">
+                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5 Test" aria-label="number-input" value="0">
                 </div>
                 <div class="input-group-addon ">m</div>
             </div>
@@ -223,7 +223,7 @@ export default () => {
                     </span>
                 </div>
                 <div class="form-control-feedback-wrapper">
-                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-lg Test" aria-label="number-input" value="0">
+                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-lg padding-right-5 Test" aria-label="number-input" value="0">
                 </div>
                 <div class="input-group-addon ">m</div>
             </div>
@@ -241,7 +241,7 @@ export default () => {
         <div class="form-group">
             <div class="input-group">
                 <div class="form-control-feedback-wrapper">
-                    <input type="number" step="1" min="100" max="200" class="form-control no-controls" aria-label="number-input" value="142">
+                    <input type="number" step="1" min="100" max="200" class="form-control no-controls padding-right-5" aria-label="number-input" value="142">
                 </div>
                 <div class="input-group-addon ">
                     <span>days</span>
@@ -261,7 +261,7 @@ export default () => {
             <label>Disabled NumberInput</label>
             <div class="input-group">
                 <div class="form-control-feedback-wrapper">
-                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls" disabled="" aria-label="number-input" value="0">
+                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" disabled="" aria-label="number-input" value="0">
                 </div>
                 <div class="input-group-addon disabled pointer-events-none">m</div>
             </div>
@@ -286,7 +286,7 @@ export default () => {
             <label for="no-default">Fixed 'noDefault'</label>
             <div class="input-group">
                 <div class="form-control-feedback-wrapper">
-                    <input id="no-default" type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls" aria-label="number-input" value="">
+                    <input id="no-default" type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="">
                 </div>
                 <div class="input-group-addon ">Pcs</div>
             </div>
@@ -428,7 +428,7 @@ export default () => (
                 <div class="NumberControl">
                     <div class="input-group">
                         <div class="form-control-feedback-wrapper">
-                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls" aria-label="number-input" value="0">
+                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="0">
                         </div>
                         <div class="input-group-addon ">
                             <div class="display-flex padding-left-10">
@@ -453,7 +453,7 @@ export default () => (
                             </span>
                         </div>
                         <div class="form-control-feedback-wrapper">
-                            <input type="number" step="2" min="-5" max="30" class="form-control no-controls" aria-label="number-input" value="1">
+                            <input type="number" step="2" min="-5" max="30" class="form-control no-controls padding-right-5" aria-label="number-input" value="1">
                         </div>
                         <div class="input-group-addon ">m<div class="display-flex padding-left-10">
                                 <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
@@ -473,7 +473,7 @@ export default () => (
                 <div class="NumberControl">
                     <div class="input-group">
                         <div class="form-control-feedback-wrapper">
-                            <input type="number" step="0.001" min="0" max="1.7976931348623157e+308" class="form-control no-controls" aria-label="number-input" value="0.001">
+                            <input type="number" step="0.001" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="0.001">
                         </div>
                         <div class="input-group-addon ">
                             <div class="display-flex padding-left-10">
@@ -494,7 +494,7 @@ export default () => (
                 <div class="NumberControl">
                     <div class="input-group">
                         <div class="form-control-feedback-wrapper">
-                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls" aria-label="number-input" placeholder="Please enter a number" value="">
+                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" placeholder="Please enter a number" value="">
                         </div>
                         <div class="input-group-addon ">
                             <div class="display-flex padding-left-10">
@@ -519,7 +519,7 @@ export default () => (
             <div class="NumberControl">
                 <div class="input-group">
                     <div class="form-control-feedback-wrapper">
-                        <input id="no-default" type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls" aria-label="number-input" value="">
+                        <input id="no-default" type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="">
                     </div>
                     <div class="input-group-addon ">
                         <div class="display-flex padding-left-10">
@@ -548,7 +548,7 @@ export default () => (
                             </span>
                         </div>
                         <div class="form-control-feedback-wrapper">
-                            <input type="number" step="1" min="100" max="200" class="form-control no-controls input-lg" aria-label="number-input" value="142">
+                            <input type="number" step="1" min="100" max="200" class="form-control no-controls input-lg padding-right-5" aria-label="number-input" value="142">
                         </div>
                         <div class="input-group-addon ">
                             <span>days</span>
@@ -570,7 +570,7 @@ export default () => (
                 <div class="NumberControl">
                     <div class="input-group input-group-sm">
                         <div class="form-control-feedback-wrapper">
-                            <input type="number" step="10" min="-1000" max="1.7976931348623157e+308" class="form-control no-controls input-sm" aria-label="number-input" value="10">
+                            <input type="number" step="10" min="-1000" max="1.7976931348623157e+308" class="form-control no-controls input-sm padding-right-5" aria-label="number-input" value="10">
                         </div>
                         <div class="input-group-addon ">m<div class="display-flex padding-left-10">
                                 <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
@@ -590,7 +590,7 @@ export default () => (
                 <div class="NumberControl">
                     <div class="input-group input-group-sm">
                         <div class="form-control-feedback-wrapper">
-                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-sm" disabled="" aria-label="number-input" value="0">
+                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-sm padding-right-5" disabled="" aria-label="number-input" value="0">
                         </div>
                         <div class="input-group-addon disabled pointer-events-none">
                             <div class="display-flex padding-left-10">

package/dist/docs/components/onboarding.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/onboarding
-*Captured:* 2026-03-06T10:41:01.789Z
+*Captured:* 2026-04-27T14:58:24.110Z
 
 Useful when you want to control a single tooltip that highlights a portion of the UI.
 

package/dist/docs/components/page.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/page
-*Captured:* 2026-03-06T10:40:47.848Z
+*Captured:* 2026-04-27T14:58:03.621Z
 
 ## Page
 

package/dist/docs/components/pager.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Navigation
 *Source:* https://uikit.developers.rio.cloud/#/components/pager
-*Captured:* 2026-03-06T10:40:02.707Z
+*Captured:* 2026-04-27T14:57:13.545Z
 
 ## Pager