@rio-cloud/uikit-mcp 1.1.11 → 1.1.12

package/dist/docs/components/iconList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#/components/iconList
-*Captured:* 2026-04-27T14:58:36.730Z
+*Captured:* 2026-05-06T12:14:37.537Z
 
 The timeline component is a pure CSS component.
 
@@ -68,7 +68,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
         </div>
         <ul class="icon-list margin-bottom-0">
             <li>
-                <span class="rioglyph rioglyph-user margin-top--1">
+                <span class="rioglyph rioglyph-driver margin-top--1">
                 </span>
                 <span>
                     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.</span>
@@ -80,7 +80,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
                     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.</span>
             </li>
             <li>
-                <span class="rioglyph rioglyph-businessman margin-top--1">
+                <span class="rioglyph rioglyph-trailer margin-top--1">
                 </span>
                 <span>
                     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.</span>

package/dist/docs/components/imagePreloader.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/imagePreloader
-*Captured:* 2026-04-27T14:58:19.859Z
+*Captured:* 2026-05-06T12:14:21.377Z
 
 Use the preloader for controlling the various states when fetching the image. It allows to handle the failure case as well.
 

package/dist/docs/components/labeledElement.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/labeledElement
-*Captured:* 2026-04-27T14:58:00.560Z
+*Captured:* 2026-05-06T12:14:02.548Z
 
 A simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.
 

package/dist/docs/components/licensePlate.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/licensePlate
-*Captured:* 2026-04-27T14:58:21.548Z
+*Captured:* 2026-05-06T12:14:23.218Z
 
 The LicensePlate component is designed to display license plate information with various customization options. It is built with container queries, which ensure that design elements are shown or hidden based on the available space.
 

package/dist/docs/components/lineCharts.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/lineCharts
-*Captured:* 2026-04-27T14:59:14.012Z
+*Captured:* 2026-05-06T12:15:10.536Z
 
 ## LineChart
 
@@ -449,7 +449,7 @@ const data: CustomData[] = [
                     <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-line">
                             <g class="recharts-layer recharts-shape">
-                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r1:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="46.0356px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
+                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r1:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="46.2336px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
                                 </path>
                             </g>
                         </g>
@@ -1446,7 +1446,7 @@ const data: CustomData[] = [
     <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
         <div style="width: 0px; height: 0px; overflow: visible;">
             <div width="876" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; height: 268px;">
-                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(443.758px, 138px);">
                     <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                         <p class="recharts-tooltip-label" style="margin: 0px;">
                         </p>

package/dist/docs/components/listMenu.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/listMenu
-*Captured:* 2026-04-27T14:58:22.286Z
+*Captured:* 2026-05-06T12:14:23.723Z
 
 A simple list menu that supports grouping and filter.
 

package/dist/docs/components/loadMore.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/loadMore
-*Captured:* 2026-04-27T14:57:19.954Z
+*Captured:* 2026-05-06T12:13:21.560Z
 
 ## LoadMoreButton
 

package/dist/docs/components/mainNavigation.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Navigation
 *Source:* https://uikit.developers.rio.cloud/#/components/mainNavigation
-*Captured:* 2026-04-27T14:57:11.171Z
+*Captured:* 2026-05-06T12:13:12.974Z
 
 ## MainNavigation
 

package/dist/docs/components/mapCircle.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapCircle
-*Captured:* 2026-04-27T14:58:55.503Z
+*Captured:* 2026-05-06T12:14:56.394Z
 
 ## Circle
 

package/dist/docs/components/mapCluster.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapCluster
-*Captured:* 2026-04-27T14:58:50.599Z
+*Captured:* 2026-05-06T12:14:47.928Z
 
 ## Clusters
 

package/dist/docs/components/mapContext.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapContext
-*Captured:* 2026-04-27T14:59:06.978Z
+*Captured:* 2026-05-06T12:15:03.241Z
 
 ## Map
 

package/dist/docs/components/mapDraggableMarker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapDraggableMarker
-*Captured:* 2026-04-27T14:58:51.354Z
+*Captured:* 2026-05-06T12:14:54.125Z
 
 ## Draggable marker
 

package/dist/docs/components/mapGettingStarted.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapGettingStarted
-*Captured:* 2026-04-27T14:58:37.102Z
+*Captured:* 2026-05-06T12:14:37.871Z
 
 HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!
 

package/dist/docs/components/mapInfoBubble.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapInfoBubble
-*Captured:* 2026-04-27T14:59:03.235Z
+*Captured:* 2026-05-06T12:15:02.675Z
 
 ## InfoBubble
 

package/dist/docs/components/mapLayerGroup.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapLayerGroup
-*Captured:* 2026-04-27T14:58:53.448Z
+*Captured:* 2026-05-06T12:14:54.411Z
 
 ## MapLayerGroup
 

package/dist/docs/components/mapMarker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapMarker
-*Captured:* 2026-04-27T14:58:49.189Z
+*Captured:* 2026-05-06T12:14:45.960Z
 
 Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.
 

package/dist/docs/components/mapPolygon.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapPolygon
-*Captured:* 2026-04-27T14:59:09.453Z
+*Captured:* 2026-05-06T12:15:07.846Z
 
 Polygons and isolines support click and hover interactions. A typical hover effect can be created by changing the outline via strokeColor and lineWidth in the hoverStyle.
 

package/dist/docs/components/mapRoute.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapRoute
-*Captured:* 2026-04-27T14:59:22.858Z
+*Captured:* 2026-05-06T12:15:16.815Z
 
 There are currently 3 different route styles built-in into the map component.
 

package/dist/docs/components/mapSettings.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapSettings
-*Captured:* 2026-04-27T14:58:59.718Z
+*Captured:* 2026-05-06T12:14:55.819Z
 
 ## Map settings
 
@@ -139,7 +139,7 @@ const mapLayerOptions: SelectOption[] = [
 ];
 
 const languageOptions: SelectOption[] = [
-    { id: 'en', label: 'English' },
+    { id: 'en-GB', label: 'English' },
     { id: 'de-DE', label: 'German' },
     { id: 'pl', label: 'Polish' },
 ];
@@ -155,7 +155,7 @@ const FullSettingsExample = () => {
     const [center, setCenter] = useState(initialPosition);
     const [enableWebGL, setEnableWebGL] = useState(true);
     const [enableDevicePixelRatio, setEnableDevicePixelRatio] = useState(true);
-    const [language, setLanguage] = useState('en');
+    const [language, setLanguage] = useState('en-GB');
 
     const [minZoom, setMinZoom] = useState(DEFAULT_MIN_ZOOM);
     const [maxZoom, setMaxZoom] = useState(DEFAULT_MAX_ZOOM);
@@ -578,6 +578,7 @@ const FullSettingsExample = () => {
                 <IncidentsList
                     mapLayer={mapLayerOptionIds}
                     incidents={incidents}
+                    language={language}
                     api={mapApiRef.current}
                     onIncidentSelect={(pos: MapPosition) => {
                         // at zoom level 16 the incident cluster is dissolved
@@ -602,7 +603,7 @@ type IncidentItemProps = {
 
 const IncidentItem = (props: IncidentItemProps) => {
     const { api, incident, onClick } = props;
-    const { id, description, position, tooltipContent } = incident;
+    const { id, comment, description, position, summary, tooltipContent } = incident;
 
     const [showInfo, setShowInfo] = useState(false);
 
@@ -616,8 +617,23 @@ const IncidentItem = (props: IncidentItemProps) => {
             onMouseEnter={() => setShowInfo(true)}
             onMouseLeave={() => setShowInfo(false)}
         >
-            <div className='line-height-125rel margin-bottom-5'>{description.value}</div>
-            <div className='text-size-12 text-dark text-italic text-color-dark'>{JSON.stringify(position)}</div>
+            <div className='line-height-125rel margin-bottom-5 text-medium'>{description.value}</div>
+            <div className='display-flex flex-column gap-5 margin-bottom-5 text-size-12'>
+                <div>
+                    <div className='text-color-dark text-medium'>Description</div>
+                    <div className='text-color-darker'>{description.value}</div>
+                </div>
+                <div>
+                    <div className='text-color-dark text-medium'>Summary</div>
+                    <div className='text-color-darker'>{summary.value}</div>
+                </div>
+                {comment && (
+                    <div>
+                        <div className='text-color-dark text-medium'>Comment</div>
+                        <div className='text-color-darker'>{comment}</div>
+                    </div>
+                )}
+            </div>
             {showInfo && (
                 <InfoBubble api={api} position={position} content={tooltipContent} markerOffset={{ x: 0, y: -31 }} />
             )}
@@ -628,13 +644,14 @@ const IncidentItem = (props: IncidentItemProps) => {
 type IncidentsListProps = {
     mapLayer: string[];
     incidents?: MapIncidents | undefined;
+    language: string;
     api?: MapApi;
     onIncidentSelect: (position: MapPosition) => void;
     onPositionChange: (position: MapPosition, zoom: number) => void;
 };
 
 const IncidentsList = (props: IncidentsListProps) => {
-    const { mapLayer, incidents, api, onIncidentSelect, onPositionChange } = props;
+    const { mapLayer, incidents, language, api, onIncidentSelect, onPositionChange } = props;
 
     const [previousPosition, setPreviousPosition] = useState<MapPosition | undefined>();
     const [previousZoom, setPreviousZoom] = useState<number | undefined>();
@@ -657,9 +674,14 @@ const IncidentsList = (props: IncidentsListProps) => {
     };
 
     return (
-        <div className='max-width-300-lg min-width-300-lg'>
+        <div className='max-width-400-lg min-width-400-lg'>
             <div className='display-flex justify-content-between align-items-end'>
-                <label>Incidents</label>
+                <label>
+                    Incidents
+                    <span className='text-normal text-size-12 text-color-dark margin-left-5'>
+                        HERE lang: {language}
+                    </span>
+                </label>
                 {previousPosition ? (
                     <div className='btn btn-link btn-link-inline margin-bottom-5' onClick={handleGoBack}>
                         <span className='rioglyph rioglyph-arrow-left' />

package/dist/docs/components/mapUtils.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapUtils
-*Captured:* 2026-04-27T14:59:08.136Z
+*Captured:* 2026-05-06T12:15:03.957Z
 
 ## Map utils
 
@@ -24,4 +24,67 @@ return (
 mapApiRef . current = api ; // if needed, render cluster or marker layer here or return null return null ; } }
 </ Map >
 );
-};
+};
+
+#### Code (text)
+
+```text
+import { useRef, useState } from 'react';
+import { isEqual } from 'es-toolkit/compat';
+
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+export default () => {
+    const [zoom, setZoom] = useState(10);
+    const [center, setCenter] = useState<Position>({ lat: 48.5, lng: 12.1 });
+    const mapApiRef = useRef<MapApi>();
+
+    const eventListenerMap = {
+        [EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
+            // Access the Map ViewModel to retrieve its' LookAtData
+            // The View model contains all relevant map data like zoom, position or bounding box.
+            // Note: Working with the ViewModel directly requires to round zoom values or to exclude
+            // other props from position object. Better, use map utils instead.
+            const target = event.currentTarget as H.Map;
+            const lookAtData = target.getViewModel().getLookAtData();
+
+            console.log({ lookAtData });
+
+            // Accessing map utils to retrieve map position, zoom and bounding box.
+            // This way, you don't have to deal with here map internals or round zoom values etc.
+            const api = mapApiRef.current;
+            const mapCenter = api?.utils?.getCenter();
+            const mapZoom = api?.utils?.getZoom();
+            const mapBoundingBox = api?.utils?.getBounds();
+
+            console.log({ mapCenter, mapZoom, mapBoundingBox });
+
+            // Check for changed values to update local state or to perform other actions
+            const isEqualZoom = isEqual(zoom, mapZoom);
+            const isEqualPosition = isEqual(center.lat, mapCenter?.lat) && isEqual(center.lng, mapCenter?.lng);
+
+            if (!(isEqualPosition && isEqualZoom)) {
+                // ... perform some actions
+            }
+        },
+    };
+
+    return (
+        <Map
+            eventListenerMap={eventListenerMap}
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            // ... other map properties
+        >
+            {api => {
+                mapApiRef.current = api;
+
+                // if needed, render cluster or marker layer here or return null
+                return null;
+            }}
+        </Map>
+    );
+};
+```

package/dist/docs/components/mapViewportHistory.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapViewportHistory
-*Captured:* 2026-04-27T14:58:53.332Z
+*Captured:* 2026-05-06T12:14:52.242Z
 
 Viewport history stores relevant map movements and exposes a settings button that jumps back to the previous center and zoom. The button is only rendered when a previous viewport exists.
 

package/dist/docs/components/multiselects.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#/components/multiselects
-*Captured:* 2026-04-27T14:57:37.864Z
+*Captured:* 2026-05-06T12:13:40.306Z
 
 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.
 
@@ -1931,6 +1931,170 @@ export default () => (
 
 #### Props
 
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | String | — | Passed through as HTML attribute to the toggle button. |
+| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |
+| options | Array of Objects | [] | Items to display in the dropdown menu. |
+| └id | String | — | Used to identify an option |
+| └label | String / Node | — | The option item text |
+| └icon | Node | — | Icon to be displayed in front of the label |
+| └selected | Boolean | false | Defines whether the menu item is selected. |
+| └disabled | Boolean | false | Setting "disabled" to true will disable the respective item. |
+| └header | Boolean | false | Will treat the given value as a menu header. |
+| value | Array | — | Sets the ids of the selected options when the component is already mounted. |
+| onChange | Function | () => {} | Callback function triggered when an item is selected. |
+| placeholder | String / Node | — | Text to display when nothing is selected. |
+| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to "true" additionally disables autoDrop feature. |
+| 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. |
+| useFilter | Boolean | false | Defines whether the component should be filterable. |
+| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |
+| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |
+| └one | String / Node | — | Text that will be used when a single item is selected. |
+| └many | String / Node | — | Text that will be used when multiple item are selected. |
+| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |
+| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |
+| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |
+| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |
+| inputAddon | String \| ReactNode | — | Option to add an icon as a leading input addon to the select component. |
+| errorMessage | String | — | Input error message. |
+| warningMessage | String | — | Input warning message. |
+| messageWhiteSpace | 'normal' \| 'prewrap' \| 'nowrap' | 'normal' | Optional warning message white-space setting. |
+| dropdownClassName | String | — | Additional classes to be set to the dropdown. |
+| btnClassName | String | — | Additional classes to be set to the select/input. |
+| className | String | — | Additional classes to be set to the select wrapper. |
+
+### Example: Example 7
+
+Multiselect with incrementally loaded options Please select shipment states No matching shipment state
+
+Load options in two steps Reset
+No options loaded
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Multiselect, { type MultiselectOption } from '@rio-cloud/rio-uikit/Multiselect';
+
+const firstOptionBatch: MultiselectOption[] = [
+    { id: 'shipment-open', label: 'Open' },
+    { id: 'shipment-planned', label: 'Planned' },
+    { id: 'shipment-in-transit', label: 'In transit' },
+    { id: 'shipment-at-border', label: 'At border' },
+];
+
+const secondOptionBatch: MultiselectOption[] = [
+    { id: 'shipment-delayed', label: 'Delayed' },
+    { id: 'shipment-delivered', label: 'Delivered' },
+    { id: 'shipment-cancelled', label: 'Cancelled' },
+    { id: 'shipment-on-hold', label: 'On hold' },
+];
+
+const MultiselectIncrementalOptionsExample = () => {
+    const [options, setOptions] = useState<MultiselectOption[]>([]);
+    const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>([]);
+    const [loadStep, setLoadStep] = useState(0);
+    const timeoutRef = useRef<number | undefined>();
+
+    useEffect(() => () => window.clearTimeout(timeoutRef.current), []);
+
+    const handleStartLoading = () => {
+        window.clearTimeout(timeoutRef.current);
+
+        setSelectedOptionIds([]);
+        setOptions(firstOptionBatch);
+        setLoadStep(1);
+
+        timeoutRef.current = window.setTimeout(() => {
+            setOptions([...firstOptionBatch, ...secondOptionBatch]);
+            setLoadStep(2);
+        }, 3_000);
+    };
+
+    const handleReset = () => {
+        window.clearTimeout(timeoutRef.current);
+
+        setSelectedOptionIds([]);
+        setOptions([]);
+        setLoadStep(0);
+    };
+
+    const statusText =
+        loadStep === 0
+            ? 'No options loaded'
+            : `${options.length} of ${firstOptionBatch.length + secondOptionBatch.length} options loaded`;
+
+    return (
+        <div className='max-width-400'>
+            <label htmlFor='multiselectIncrementalOptions'>Multiselect with incrementally loaded options</label>
+            <Multiselect
+                id='multiselectIncrementalOptions'
+                placeholder='Please select shipment states'
+                options={options}
+                value={selectedOptionIds}
+                useFilter
+                useClear
+                noItemMessage='No matching shipment state'
+                onChange={setSelectedOptionIds}
+            />
+            <div className='display-flex gap-10 align-items-center margin-top-10'>
+                <Button onClick={handleStartLoading}>Load options in two steps</Button>
+                <Button bsStyle='default' onClick={handleReset}>
+                    Reset
+                </Button>
+            </div>
+            <div className='text-size-12 text-color-gray margin-top-10'>{statusText}</div>
+        </div>
+    );
+};
+
+export default MultiselectIncrementalOptionsExample;
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-400">
+    <label for="multiselectIncrementalOptions">Multiselect with incrementally loaded options</label>
+    <div class="select multiselect dropdown">
+        <button type="button" id="multiselectIncrementalOptions" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+            <span class="placeholder">Please select shipment states</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="no-item-message disabled" role="presentation">
+                <a role="menuitem">
+                    <i>No matching shipment state</i>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="display-flex gap-10 align-items-center margin-top-10">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Load options in two steps</button>
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Reset</button>
+    </div>
+    <div class="text-size-12 text-color-gray margin-top-10">No options loaded</div>
+</div>
+```
+
+#### Props
+
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | name | String | — | Passed through as HTML attribute to the toggle button. |

package/dist/docs/components/noData.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/noData
-*Captured:* 2026-04-27T14:58:02.039Z
+*Captured:* 2026-05-06T12:14:03.855Z
 
 ## 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-04-27T14:58:23.841Z
+*Captured:* 2026-05-06T12:14:25.481Z
 
 Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.
 

package/dist/docs/components/numbercontrol.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/numbercontrol
-*Captured:* 2026-04-27T14:57:20.321Z
+*Captured:* 2026-05-06T12:13:22.135Z
 
 ## NumberInput
 

package/dist/docs/components/onboarding.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/onboarding
-*Captured:* 2026-04-27T14:58:24.110Z
+*Captured:* 2026-05-06T12:14:25.513Z
 
 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-04-27T14:58:03.621Z
+*Captured:* 2026-05-06T12:14:05.520Z
 
 ## Page