@rio-cloud/uikit-mcp 1.1.10 → 1.1.11

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-20T12:54:45.477Z
+*Captured:* 2026-04-27T14:58:19.859Z
 
 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-20T12:54:25.777Z
+*Captured:* 2026-04-27T14:58:00.560Z
 
 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-20T12:54:47.307Z
+*Captured:* 2026-04-27T14:58:21.548Z
 
 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,10 +3,12 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/lineCharts
-*Captured:* 2026-04-20T12:55:35.100Z
+*Captured:* 2026-04-27T14:59:14.012Z
 
 ## LineChart
 
+> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.
+
 ### Example: Example 1
 
 Simple LineChart
@@ -124,7 +126,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-:r0:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="15.8298px 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-:r0:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="11.3402px 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>
@@ -447,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="47.5256px 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.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>
                             </g>
                         </g>

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-20T12:54:47.861Z
+*Captured:* 2026-04-27T14:58:22.286Z
 
 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-20T12:53:45.163Z
+*Captured:* 2026-04-27T14:57:19.954Z
 
 ## 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-20T12:53:36.222Z
+*Captured:* 2026-04-27T14:57:11.171Z
 
 ## 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-20T12:55:18.827Z
+*Captured:* 2026-04-27T14:58:55.503Z
 
 ## 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-20T12:55:14.806Z
+*Captured:* 2026-04-27T14:58:50.599Z
 
 ## Clusters
 
@@ -67,6 +67,7 @@ const ClustersExample = () => {
             ),
             getClusterPresentation: (assets: Asset[]) => (
                 <ClusterMapMarker
+                    iconName='truck'
                     count={assets.length}
                     warningCount={Math.floor((assets.length * 10) / 3)}
                     exceptionCount={Math.floor((assets.length * 10) / 5)}
@@ -221,6 +222,7 @@ const ClustersExample = () => {
             ),
             getClusterPresentation: ({ length }: Asset[]) => (
                 <ClusterMapMarker
+                    iconName='truck'
                     count={length}
                     warningCount={Math.floor((length * 10) / 3)}
                     exceptionCount={Math.floor((length * 10) / 5)}

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-20T12:55:26.951Z
+*Captured:* 2026-04-27T14:59:06.978Z
 
 ## 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-20T12:55:16.462Z
+*Captured:* 2026-04-27T14:58:51.354Z
 
 ## 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-20T12:55:02.170Z
+*Captured:* 2026-04-27T14:58:37.102Z
 
 HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!
 
@@ -13,6 +13,10 @@ HERE Maps credentials used in the UIKIT demo are not allowed to be used in any p
 
 ## HERE Maps credentials
 
+Need HERE Maps credentials? Please follow the guide on Confluence:
+
+Requesting HERE Maps credentials
+
 Please note that the usage of HERE Maps is not free. If you have any questions regarding license costs, please contact us.
 
 In case you want to use HERE Maps in production, please contact finance@rio.cloud.
@@ -36,4 +40,38 @@ As the UIKIT Map component relies on the map scripts from Here, we need to add t
 <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
 ```
 
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-harp.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /&gt;
+
 Map API VersionBy default, the map imports use the map version 3.1. However, this version is not a fixed version as it will be resolved to an internal version by Here. This means version 3.1 is treated as an evergreen version.If you encounter any instability or even bugs with the map itself, it is recommended to set the version fixed in the imports and check for a newer version on demand.More details can be found on the Here Developer PlatformFor example&lt;script src="https://js.api.here.com/v3/3.1.11.2/mapsjs-core.js"&gt;&lt;/script&gt;

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-20T12:55:25.012Z
+*Captured:* 2026-04-27T14:59:03.235Z
 
 ## 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-20T12:55:16.979Z
+*Captured:* 2026-04-27T14:58:53.448Z
 
 ## MapLayerGroup
 

package/dist/docs/components/mapMarker.md

@@ -3,12 +3,14 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapMarker
-*Captured:* 2026-04-20T12:55:13.224Z
+*Captured:* 2026-04-27T14:58:49.189Z
 
 Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.
 
 ## Marker
 
+> Note: The map zoom level does not affect the size of Markers.
+
 **Sharing icon between Markers**
 
 It's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on 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-20T12:55:30.672Z
+*Captured:* 2026-04-27T14:59:09.453Z
 
 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-20T12:55:44.414Z
+*Captured:* 2026-04-27T14:59:22.858Z
 
 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-20T12:55:23.037Z
+*Captured:* 2026-04-27T14:58:59.718Z
 
 ## Map settings
 
@@ -82,6 +82,7 @@ import MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';
 import MapBoundingBoxButton from '@rio-cloud/rio-uikit/MapBoundingBoxButton';
 import MapCenterMarkerButton from '@rio-cloud/rio-uikit/MapCenterMarkerButton';
 import MapLockMarkerButton from '@rio-cloud/rio-uikit/MapLockMarkerButton';
+import MapPreviousViewportButton from '@rio-cloud/rio-uikit/MapPreviousViewportButton';
 import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
 import Multiselect from '@rio-cloud/rio-uikit/Multiselect';
 import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
@@ -386,6 +387,10 @@ const FullSettingsExample = () => {
                                     tooltip='Center current Marker'
                                 />,
                                 <MapLockMarkerButton key='mapLockMarkerButton' />,
+                                <MapPreviousViewportButton
+                                    key='mapPreviousViewportButton'
+                                    tooltip='Back to previous map position'
+                                />,
                             ]}
                         />
                     }

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-20T12:55:26.933Z
+*Captured:* 2026-04-27T14:59:08.136Z
 
 ## Map utils
 

package/dist/docs/components/mapViewportHistory.md

@@ -0,0 +1,287 @@
+# Map viewport history
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#/components/mapViewportHistory
+*Captured:* 2026-04-27T14:58:53.332Z
+
+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.
+
+## Map viewport history
+
+Use the buttons below to trigger programmatic map changes, pause or resume the moving truck asset, or pan and zoom manually. When the asset lock is active, the map follows the truck and the history button is hidden because returning to a previous viewport would immediately conflict with the locked asset.
+
+### Example: Current center:N49° 8.106′ E10° 34.920′Zoom: 7Animation: offAsset lock: off
+
+Terms of use © 1987–2026 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Select depot Select customer Reset map Enable animation Enable asset movement Current center: N49° 8.106′ E10° 34.920′ Zoom: 7 Animation: off Asset lock: off
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import EventUtils, { type EventListenerMap } from '@rio-cloud/rio-uikit/EventUtils';
+import Map from '@rio-cloud/rio-uikit/Map';
+import MapLockMarkerButton from '@rio-cloud/rio-uikit/MapLockMarkerButton';
+import MapPreviousViewportButton from '@rio-cloud/rio-uikit/MapPreviousViewportButton';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import Marker from '@rio-cloud/rio-uikit/Marker';
+import Position from '@rio-cloud/rio-uikit/Position';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+import type { MapEvent, Position as MapPosition } from '@rio-cloud/rio-uikit/mapTypes';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+
+const INITIAL_ZOOM = 7;
+
+const initialPosition: MapPosition = { lat: 49.1351, lng: 10.582 };
+const depotPosition: MapPosition = { lat: 48.7758, lng: 9.1829 };
+const customerPosition: MapPosition = { lat: 49.4521, lng: 11.0767 };
+
+const assetRoute: MapPosition[] = [
+    { lat: 48.1351, lng: 11.582 },
+    { lat: 48.144, lng: 11.596 },
+    { lat: 48.151, lng: 11.612 },
+    { lat: 48.159, lng: 11.628 },
+    { lat: 48.167, lng: 11.645 },
+    { lat: 48.154, lng: 11.626 },
+    { lat: 48.142, lng: 11.604 },
+];
+
+const isSameViewport = (
+    currentCenter: MapPosition,
+    currentZoom: number,
+    targetCenter: MapPosition,
+    targetZoom: number
+) =>
+    Math.abs(currentCenter.lat - targetCenter.lat) < 0.0001 &&
+    Math.abs(currentCenter.lng - targetCenter.lng) < 0.0001 &&
+    Math.abs(currentZoom - targetZoom) < 0.1;
+
+const MapViewportHistoryExample = () => {
+    const [center, setCenter] = useState(initialPosition);
+    const [zoom, setZoom] = useState(INITIAL_ZOOM);
+    const [zoomAnimation, setZoomAnimation] = useState(false);
+    const [assetPositionIndex, setAssetPositionIndex] = useState(0);
+    const [isAssetMovementEnabled, setIsAssetMovementEnabled] = useState(false);
+    const [isAssetLocked, setIsAssetLocked] = useState(false);
+
+    const pendingViewportRef = useRef<{ center: MapPosition; zoom: number }>();
+
+    const assetPosition = assetRoute[assetPositionIndex];
+
+    useEffect(() => {
+        if (!isAssetMovementEnabled) {
+            return;
+        }
+
+        const intervalId = window.setInterval(() => {
+            setAssetPositionIndex(currentIndex => (currentIndex + 1) % assetRoute.length);
+        }, 5000);
+
+        return () => window.clearInterval(intervalId);
+    }, [isAssetMovementEnabled]);
+
+    const setMapView = (position: MapPosition, nextZoom: number) => {
+        pendingViewportRef.current = isSameViewport(center, zoom, position, nextZoom)
+            ? undefined
+            : { center: position, zoom: nextZoom };
+
+        setCenter(position);
+        setZoom(nextZoom);
+    };
+
+    const setMapCenter = (position: MapPosition) => {
+        pendingViewportRef.current = isSameViewport(center, zoom, position, zoom)
+            ? undefined
+            : { center: position, zoom };
+
+        setCenter(position);
+    };
+
+    useEffect(() => {
+        if (isAssetLocked) {
+            setMapCenter(assetPosition);
+        }
+    }, [assetPosition, isAssetLocked]);
+
+    const eventListenerMap: EventListenerMap = {
+        [EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
+            const target = event.currentTarget as H.Map;
+            const updatedCenter = target.getCenter();
+            const updatedZoom = target.getZoom();
+
+            if (!updatedCenter) {
+                return;
+            }
+
+            const pendingViewport = pendingViewportRef.current;
+            if (pendingViewport) {
+                if (!isSameViewport(updatedCenter, updatedZoom, pendingViewport.center, pendingViewport.zoom)) {
+                    return;
+                }
+
+                pendingViewportRef.current = undefined;
+            }
+
+            setCenter(updatedCenter);
+            setZoom(updatedZoom);
+        },
+    };
+
+    const mapSettingsButtons = [
+        <MapTypeSettings
+            key='mapTypeSettings'
+            tooltip='Change map type'
+            dropdownHeaderText='Map views'
+            defaultTypeLabel='Default view'
+            truckTypeLabel='Truck view'
+            terrainTypeLabel='Terrain view'
+            satelliteTypeLabel='Satellite view'
+            nightTypeLabel='Night view'
+        />,
+        <MapLockMarkerButton
+            key='mapLockAssetButton'
+            tooltip={isAssetLocked ? 'Unlock asset' : 'Lock asset'}
+            isActive={isAssetLocked}
+            onToggle={() => setIsAssetLocked(!isAssetLocked)}
+        />,
+    ];
+
+    if (!isAssetLocked) {
+        mapSettingsButtons.push(
+            <MapPreviousViewportButton key='mapPreviousViewportButton' tooltip='Back to previous map position' />
+        );
+    }
+
+    return (
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={center}
+                zoom={zoom}
+                height={400}
+                eventListenerMap={eventListenerMap}
+                zoomAnimation={zoomAnimation}
+                mapSettings={<MapSettings options={mapSettingsButtons} />}
+            >
+                <Marker
+                    position={assetPosition}
+                    icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' name='Asset' />}
+                />
+                <Marker
+                    position={depotPosition}
+                    icon={<SingleMapMarker iconNames={['warehouse']} markerColor='bg-map-marker-poi' name='Depot' />}
+                />
+                <Marker
+                    position={customerPosition}
+                    icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-route' name='Customer' />}
+                />
+            </Map>
+
+            <ButtonToolbar className='margin-top-15'>
+                <Button onClick={() => setMapView(depotPosition, 12)}>Select depot</Button>
+                <Button onClick={() => setMapView(customerPosition, 13)}>Select customer</Button>
+                <Button onClick={() => setMapView(initialPosition, INITIAL_ZOOM)}>Reset map</Button>
+                <Button onClick={() => setZoomAnimation(!zoomAnimation)}>
+                    {zoomAnimation ? 'Disable animation' : 'Enable animation'}
+                </Button>
+                <Button onClick={() => setIsAssetMovementEnabled(!isAssetMovementEnabled)}>
+                    {isAssetMovementEnabled ? 'Pause asset movement' : 'Enable asset movement'}
+                </Button>
+                <div className='text-size-12 text-color-dark display-flex align-items-center gap-10'>
+                    <span>Current center:</span>
+                    <Position latitude={center.lat} longitude={center.lng} />
+                    <span>Zoom: {Math.round(zoom)}</span>
+                    <span>Animation: {zoomAnimation ? 'on' : 'off'}</span>
+                    <span>Asset lock: {isAssetLocked ? 'on' : 'off'}</span>
+                </div>
+            </ButtonToolbar>
+        </>
+    );
+};
+
+export default MapViewportHistoryExample;
+```
+
+#### Props: Map
+
+### Map
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| credentials | MapCredentials | — | HERE credentials used to initialize the map platform. |
+| height | number | — | Height of the map container. |
+| width | number | — | Width of the map container. |
+| language | string | 'en' | Language used for HERE map labels and controls. |
+| center | Position | — | Initial center position of the map. |
+| zoom | number | — | Initial or controlled zoom level of the map. |
+| boundingBox | BoundingBox | — | Bounding box that should be fitted by the map view. |
+| disableMapEvents | boolean | — | Disables HERE map events entirely. |
+| disableBehavior | boolean | false | Disables the default HERE map behavior such as pan and zoom interaction. |
+| disableZoomMomentum | boolean | true | Disables HERE zoom momentum to reduce scroll inertia on zoom. |
+| eventListenerMap | EventListenerMap | — | Event listeners attached to the HERE map instance. |
+| hideMapSettings | boolean | — | Legacy prop for hiding map settings. |
+| hideClusterSettings | boolean | false | Hides the cluster settings entry in the map settings UI. |
+| hideMapLayerSettings | boolean | false | Hides the map layer settings entry in the map settings UI. |
+| mapType | MapType | Map.TYPE_DEFAULT | Base map type to render. |
+| mapLayer | MapLayer[] | [] | Active overlay layers such as traffic or incidents. |
+| showCluster | boolean | true | Controls whether marker clustering is enabled. |
+| showScaleBar | boolean | false | Shows the HERE scale bar. |
+| onMapTypeChange | (type: MapType, previousType?: MapType) => void | — | Callback fired when the map type changes. |
+| onMapLayerChange | (activeLayer: MapLayer[], previousLayer?: MapLayer[]) => void | — | Callback fired when the active map layers change. |
+| onShowClusterChange | (show: boolean) => void | — | Callback fired when the cluster visibility changes. |
+| onZoomIn | (zoom: number) => void | — | Callback fired when zooming in via the built-in zoom controls. |
+| onZoomOut | (zoom: number) => void | — | Callback fired when zooming out via the built-in zoom controls. |
+| onIncidentsChange | (incidentsResult: MapIncidents) => void | — | Callback used by incidents overlays to report fetched incidents. |
+| mapSettingsTooltip | string \| React.ReactNode | — | Tooltip content for the map settings entry. |
+| mapSettings | React.ReactNode | — | Custom settings UI rendered on top of the map. |
+| zoomAnimation | boolean | false | Enables animation when zoom or center changes are applied programmatically. |
+| maxViewportHistoryEntries | number | 5 | Maximum number of previous map viewports stored for viewport history. |
+| enableWebGL | boolean | true | Enables the WebGL/HARP rendering engine where supported. |
+| enableDevicePixelRatio | boolean | true | Uses window.devicePixelRatio for map rendering. |
+| enableMarkerIconCache | boolean | true | Enables caching for generated marker icons. |
+| enableFractionalZoom | boolean | false | Keeps HERE fractional zoom enabled for smoother trackpad and wheel zoom interaction. |
+| disableMarkerPointerEventsWhileZooming | boolean | false | Temporarily disables marker pointer events during zoom interactions to reduce DOM hit-testing overhead. |
+| pixelRatio | number | — | Fallback pixel ratio used when device pixel ratio support is disabled. |
+| minZoom | number | — | Minimum allowed zoom level. |
+| maxZoom | number | — | Maximum allowed zoom level. |
+| children | React.ReactNode \| ((api: MapApi, incidents?: MapIncidents) => React.ReactNode) | — | Map content or a render function receiving the map API. |
+
+#### Props: MapPreviousViewportButton
+
+### MapPreviousViewportButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onGoBack | () => void | — | Callback fired after the map viewport history jumps back to the previous viewport. |
+
+#### Props: MapSettingsTile
+
+### MapSettingsTile
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onToggle | (newState: boolean) => void | — | Callback fired when the settings tile opens or closes. |
+| tooltip | React.ReactNode | — | Tooltip shown while the settings tile is closed. |
+| panel | React.ReactNode | — | Custom panel rendered below the settings tile when it is open. |
+| items | JSX.Element[] \| undefined | — | Dropdown menu items rendered when the settings tile is open. |
+| activeIcon | JSX.Element \| undefined | — | Icon shown when the tile is active. |
+| inactiveIcon | JSX.Element \| undefined | — | Icon shown when the tile is inactive. |
+| isActive | boolean | — | Controls whether the active or inactive icon is shown. |
+| buttonClassName | string | — | Additional class name for the clickable settings button. |
+| className | string | — | Additional class name for the settings tile wrapper. |

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-20T12:54:02.436Z
+*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.
 
@@ -617,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. |
@@ -789,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. |
@@ -1020,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. |
@@ -1183,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. |
@@ -1653,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. |
@@ -1944,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. |