@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/start/changelog.md

@@ -3,7 +3,35 @@
 *Category:* Getting started
 *Section:* Welcome
 *Source:* https://uikit.developers.rio.cloud/#/start/changelog
-*Captured:* 2026-04-20T12:53:30.187Z
+*Captured:* 2026-05-06T12:13:06.539Z
+
+## Version 2.4.1 (2026-05-06)
+
+- **Fixed** Map incidents Fixed HERE traffic incident requests to include the configured map language as lang query parameter.
+
+- **Fixed** Select and Multiselect Fixed filter results after options are updated incrementally, so useFilter continues matching against the latest option list.
+
+- **Fixed** DropdownSubmenu Fixed submenu rendering and restored the chevron alignment in nested dropdown menus.
+
+## Version 2.4.0 (2026-04-23)
+
+- **Update** Select and Multiselect Added a new variant prop with a blank variant to remove the wrapper shadow and toggle border/shadow.
+
+- **Fixed** Forms Fixed sized inputs with form-control so they use the correct font size again.
+
+- **New** Map viewport history Added viewport history for maps, including MapPreviousViewportButton for jumping back to previous map position states.
+
+- **Fixed** Map settings Fixed map settings dropdowns so they are displayed properly when opened.
+
+- **New** Table Added TableExpandAllGroupsButton for grouped tables and new grouped-row demos showing row selection across expandable groups and selectable group rows.
+
+- **Update** Table Added a new selectionCheckboxVerticalAlignment prop so checkboxes can be aligned independently.
+
+- **Update** Table Moved vertical alignment styling to the cell level for table head and body cells, which avoids header pixel jumping and keeps row-spanned headers aligned correctly.
+
+- **Fixed** Table Fixed table rows collapsing in overflow state when no rows with columns are available to define the table width.
+
+- **Fixed** Table Fixed header rendering for interactive header content and updated selection logic so selectable expanded group rows and selectable group rows work correctly with table selection.
 
 ## Version 2.3.0 (2026-03-20)
 
@@ -137,37 +165,37 @@
 
 ## Version 2.0.0 (2025-12-12)
 
-- **Removed** We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.
+- **Breaking** We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.
 
-- **Removed** Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.
+- **Breaking** Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.
 
-- **Removed** CalendarStripe Removed deprecated prop "render". Please use "renderDay" instead.
+- **Breaking** CalendarStripe Removed deprecated prop "render". Please use "renderDay" instead.
 
-- **Removed** Collapse Removed deprecated prop "in". Please use "open" instead.
+- **Breaking** Collapse Removed deprecated prop "in". Please use "open" instead.
 
-- **Removed** ClearableInput Removed deprecated prop "alwaysShowMask". Please use "maskVisibility='always'" instead.
+- **Breaking** ClearableInput Removed deprecated prop "alwaysShowMask". Please use "maskVisibility='always'" instead.
 
-- **Removed** Dialog Removed deprecated prop "onHide". Please use "onClose" instead.
+- **Breaking** Dialog Removed deprecated prop "onHide". Please use "onClose" instead.
 
-- **Removed** SingleMapMarker Removed deprecated prop "size". Please use "anchorSize" instead. Removed deprecated prop "visibleOnHover". Please use "markerOnHover" instead.
+- **Breaking** SingleMapMarker Removed deprecated prop "size". Please use "anchorSize" instead. Removed deprecated prop "visibleOnHover". Please use "markerOnHover" instead.
 
-- **Removed** DataTab Removed the internal "fade in" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.
+- **Breaking** DataTab Removed the internal "fade in" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.
 
 - **Renamed** Animations Renamed "framer-motion" component to "motion" as we have migrated to the latest motion library that was formerly known as Framer Motion.
 
-- **Removed** NotificationsContainer Removed deprecated prop "stacked" since it is not supported anymore. Removed legacy usage documentation.
+- **Breaking** NotificationsContainer Removed deprecated prop "stacked" since it is not supported anymore. Removed legacy usage documentation.
 
 - **Breaking** Notification Removed deprecated prop "priority" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API "Notification.info(message, title, timeOut, callback, priority)", please migrate to the format "Notification.info(message, options)".
 
-- **Removed** OnboardingTip Removed deprecated prop "clickflow". Please use the "useOnboardingTour" hook instead.
+- **Breaking** OnboardingTip Removed deprecated prop "clickflow". Please use the "useOnboardingTour" hook instead.
 
-- **Removed** Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback instead.
+- **Breaking** Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback instead.
 
-- **Removed** NumberInput / NumberControl Removed deprecated prop "onValueChanged". Please use "onChange" instead.
+- **Breaking** NumberInput / NumberControl Removed deprecated prop "onValueChanged". Please use "onChange" instead.
 
-- **Removed** Sidebar Removed deprecated prop "enableNavigationButtons". Please use "headerButtons" instead. Removed deprecated prop "disableFullscreen". Please use "enableFullscreenToggle" instead. Removed deprecated prop "fullscreen". Please use "openInFullscreen" instead.
+- **Breaking** Sidebar Removed deprecated prop "enableNavigationButtons". Please use "headerButtons" instead. Removed deprecated prop "disableFullscreen". Please use "enableFullscreenToggle" instead. Removed deprecated prop "fullscreen". Please use "openInFullscreen" instead.
 
-- **Removed** Removed old class "invisible". Please use "visibility-hidden" instead.
+- **Breaking** Removed old class "invisible". Please use "visibility-hidden" instead.
 
 - **Icons** Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components
 
@@ -649,200 +677,4 @@
 
 - **New** Input resize Added new input resize classes
 
-- **Icons** Added new Icon rioglyph- layer-pois
-
-## Version 1.1.0 (2024-06-17)
-
-- **Fixed** CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns
-
-- **Fixed** AssetTree Fixed rendering issue in AssetTree component when switching mode between "fly" and "fluid" externally
-
-- **Fixed** Marker Fixed broken Marker component when using it without an icon
-
-- **Fixed** Pills Fixed disabled styles for stacked and filled nav-pills
-
-- **Fixed** Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons
-
-- **Update** Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop "pinging" to SingleMapMarker to render a pinging animation. Another new prop "anchorIconName" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new "stateIconName" prop and the default moving state can be changed.
-
-- **Update** AssetTree Added new prop "treeOptionsTooltip" to Tree component to show a tooltip for the tree options dropdown
-
-- **Update** ActionBarItem Updated the "ActionBarItem.List" style used for the service info popover. Please make sure to use the "ActionBarItem.List" and "ActionBarItem.ListItem" components to design the service info for the application header.
-
-- **Update** ErrorState, EmptyState, CustomState Added the prop "bsStyle" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.
-
-- **Update** NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.
-
-- **Update** Fieldset Update "fieldset" and "legend" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.
-
-- **Icons** Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow
-
-- **New** CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation
-
-- **New** Added bg-none and hover-bg-none class
-
-## Version 1.0.0 (2024-06-03)
-
-- **Breaking** With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.
-
-- **Breaking** Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = " text/javascript " src = " https://js.api.here.com/v3/3.1/mapsjs-harp.js " > </ script >
-
-- **Removed** Fade Removed several deprecated props from the Fade component
-
-- **Removed** Removed "BrowserWarning" component
-
-- **Removed** Removed "text-muted" utility class. Use "text-color-gray" instead
-
-- **Removed** Removed "GroupSelectionUtil" getNewGroupedSelected utility function
-
-- **Removed** Removed getOffsetTopWholeScreen utility function
-
-- **breaking** BottomSheet / Sidebar Renamed prop "useBackdrop" to "hasBackdrop" for BottomSheet and Sidebar component
-
-- **breaking** CalendarStripe Deprecated "render" prop of "CalendarStripe" component in favor of new "renderDay" prop
-
-- **breaking** Collapse / ExpanderPanel / ExpanderList Removed callbacks "onEnter", "onEntering", "onExit", and "onExiting" for ExpanderPanel and Collapse components. We introduced Framer Motions "onAnimationStart" callback instead. The ExpanderPanel header style underwent slight changes. The "in" class for the collapse is no longer used. Additionally, the "react-transition-group" library has been replaced with "framer-motion". The prop "mountOnEnter" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use "unmountOnExit" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop "in" has been renamed to "open" to align with other components.
-
-- **breaking** List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes "border" and "rounded". Expander lists now have props for these two CSS properties, which are set to true by default.
-
-- **breaking** Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) => setBoxWidth ( oldWidth => oldWidth - diff )
-
-- **breaking** Select / Multiselect Changed roles of Select and Multiselect dropdown menu from "list" to "menu" and the role of the individual select options from "presentation" to "listitem" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values "small" and "large" in favor of "sm" and "lg".
-
-- **breaking** Select The type definition for the Select component has changed. The more impactful change is the type for the "onChange" callback which has changed to handle the removal of a selection and therefor "undefined" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) => handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the "types.ts" file. Please adapt your import accordingly import Select, { type SelectOption } from "@rio-cloud/rio-uikit/Select";
-
-- **breaking** Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.
-
-- **Removed** useResizeObserver The "Observer Entry" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults to div).
-
-- **Fixed** Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.
-
-- **Fixed** BottomSheet Fixed maximum width for BottomSheet component when using the "detach" prop. Allow defining the detach offset.
-
-- **Fixed** Chart Colors Fixed export of shared colors for diagrams
-
-- **Fixed** Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.
-
-- **Fixed** Sidebar Automatically switch Sidebar mode from "fluid" to "fly" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.
-
-- **Fixed** SimpleTooltip Renamed SimpleTooltip prop "tooltipWidth" to "width" to align with underlying Tooltip component
-
-- **Fixed** Spinner Outlined spinner buttons
-
-- **Fixed** Spinner in Buttons Fixed style for spinner in button block
-
-- **Fixed** Tags Fixed 1px offset of tag icons
-
-- **Fixed** Tooltip Fixed tooltip arrow position on small elements
-
-- **Update** AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props
-
-- **Update** AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new "supType" property to the TreeItem to filter for it and to show a paired icon.
-
-- **Update** Button Added "iconName" prop to Button component to reduce boilerplate code when using icons. Use native HTML "disabled" prop instead of separate class.
-
-- **Update** ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes
-
-- **Update** Dialog Added focus trap to Dialog component. Deprecate "onHide" callback in favor of "onClose". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class "modal-ender-done" has been removed. Added new "xs" dialog variant
-
-- **Update** ExpanderPanel Added new "onOpen" and "onClose" callbacks to ExpanderList items
-
-- **Update** ExpanderPanel / Combined Tables in ExpandablePanel Added "iconClassName" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.
-
-- **Update** Forms Added horizontal form demo
-
-- **Update** LoadMoreButton Extended LoadMoreButton component with props "isInteractive" and "progressBarStyle" to customize behavior and style
-
-- **Update** Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.
-
-- **Update** Multiselect Added prop "multiline" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.
-
-- **Update** NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop "noDefault" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.
-
-- **Update** TimePicker Added prop for rendering warning and error messages
-
-- **Update** Onboarding Added props "previousButton" and "nextButton" to Onboarding component to enable a better onboarding click flow
-
-- **Update** Print CSS Notifications are now hidden while printing the page when using our print.css
-
-- **Update** Select Added prop "inputAddon" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component
-
-- **Update** Sidebar Added prop "hasSmoothScrollbar" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars
-
-- **Update** Slider or RangeSlider Added "valueLabelUnit" prop to Slider and RangeSlider to use a label for the slider values
-
-- **Update** SplitDialog Added new "leftContentClassName" and "rightContentClassName" to the split dialog
-
-- **Update** Buttons Add gray-lightest hover background color to muted, link, and action buttons
-
-- **Update** Timeline Added new classes "timeline-date-thin" and "timeline-date-dashed" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.
-
-- **New** EditableContent Added new EditableContent component that allows for inline text editing
-
-- **New** DeviceUtils Added new "isRetinaDevice" to deviceUtils
-
-- **New** Divider Added new Divider component for horizontal and vertical dividing lines
-
-- **New** Forms New form "form-group-not-editable" style toggling editable forms
-
-- **New** FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window
-
-- **New** Grid stack Added new grid stacking classes "grid-stack" and "grid-stack-item" as an alternative to position absolute
-
-- **New** HTML Emails New guidelines demo for HTML emails created with react email
-
-- **Icons** Icons rioglyph- drag-n-drop rioglyph- robot rioglyph- pin-range rioglyph- pin rioglyph- calendar-plus rioglyph- exclamation rioglyph- info rioglyph- question rioglyph- fuel-diesel rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- archive rioglyph- map rioglyph- map-location rioglyph- book rioglyph- face-frown rioglyph- face-neutral rioglyph- face-smile rioglyph- paper-clip rioglyph- share-nodes rioglyph- handshake rioglyph- stack rioglyph- building rioglyph- file-signature rioglyph- signature rioglyph- location-arrow rioglyph- wallet rioglyph- user-group rioglyph- window rioglyph- inbox rioglyph- inbox-stack rioglyph- inbox-in rioglyph- inbox-out rioglyph- id rioglyph- ruler rioglyph- cards-add rioglyph- truck-unit rioglyph- user-add rioglyph- user-ok rioglyph- user-remove rioglyph- pencil-square rioglyph- megaphone rioglyph- code-brackets rioglyph- code-braces rioglyph- hash rioglyph- server-stack rioglyph- shopping-bag rioglyph- search-list rioglyph- tasks rioglyph- fingerprint rioglyph- flag rioglyph- fire rioglyph- puzzle
-
-- **New** Line Height Added new "line-height-150rel" class
-
-- **New** Page Added new Page component for displaying documents
-
-- **New** SaveableInput Added new SaveableInput component
-
-- **New** TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers
-
-- **New** SmoothScrollbars Added a new SmoothScrollbars component
-
-- **New** Text Wrapping Added new "text-wrap-balance" class
-
-- **New** useFocusTrap Added new useFocusTrap hook that can be used for custom overlays
-
-- **New** useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone
-
-- **New** usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window
-
-- **CSS** With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in your package.json. See Automatic loading of UIKIT CSS Files
-
-- **Guideline** For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new "Color Combinations" section. See Color Combinations
-
-- **Guideline** We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide
-
-## Version 0.16.3 (2023-03-14)
-
-- **Icons** Deleted Icons: fax
-
-- **Fixed** Fixed alignment of collapsed header menu items. See ApplicationHeader
-
-- **Fixed** Fixed fade in animation when the inital animation is set to false. See Fade
-
-- **Fixed** Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet
-
-- **Fixed** Fixed AspectRatioPlaceholder declaration file name.
-
-- **Fixed** Fixed text ellipsis of selects. See Selects
-
-- **Update** Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component
-
-- **Update** Added new "fullheight" Dialog Size and renamed "full" to "fullwidth". See Dialog
-
-- **Update** MapSettings panels are now closing on click outside. See MapSettings
-
-- **Update** Extended the SimpleTooltip component to pass the "delay" and "popperConfig" props to the underlying component. See SimpleTooltip
-
-- **Update** Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes
-
-- **New** Added new CalendarStripe component. See CalendarStripe
-
-- **New** Added new hook "usePrevious" to access state values of previous component render cycle. See usePrevious
-
-- **Icons** Added or updated icons: rioglyph- card-reader rioglyph- card-hotel rioglyph- api rioglyph- currency-euro rioglyph- thumbs-up rioglyph- thumbs-down rioglyph- hand-up rioglyph- hand-down rioglyph- hand-left rioglyph- hand-right See Icons
+- **Icons** Added new Icon rioglyph- layer-pois

package/dist/docs/start/goodtoknow.md

@@ -3,10 +3,16 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/goodtoknow
-*Captured:* 2026-04-20T12:53:30.060Z
+*Captured:* 2026-05-06T12:13:06.505Z
 
 ## Good to know
 
 ## IntelliSense for CSS class names in HTML
 
-## CSS Hyphens
+A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element. Download here.
+
+## CSS Hyphens
+
+The Hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present. For more details see css-tricks.com.
+
+> Note: Hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a html element. Not all languages are supported yet, and support depends on the specific browser.

package/dist/docs/start/guidelines/color-combinations.md

@@ -3,12 +3,16 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/color-combinations
-*Captured:* 2026-04-20T12:53:30.905Z
+*Captured:* 2026-05-06T12:13:07.523Z
 
 For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.
 
 ## Color combinations
 
+Dos and Don‘tsGoodBad
+
+TextIconsLabels
+
 ### Example: Example 1
 
 White text on brand backgrounds

package/dist/docs/start/guidelines/custom-css.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/custom-css
-*Captured:* 2026-04-20T12:53:30.953Z
+*Captured:* 2026-05-06T12:13:07.409Z
 
 Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.
 
@@ -13,6 +13,8 @@ Getting more familiar with Bootstrap and the UIKIT will speed up your developmen
 
 Therefore, avoid writing custom CSS where possible and try to achieve the desired results by using
 
+HTML designUIKIT componentsUIKIT foundation utility classes.
+
 ## Custom CSS
 
 If the UIKIT colors do not fit your needs, you have the option to use 5 additional custom color vars.
@@ -33,10 +35,32 @@ You just have to add those css vars to the index.html head and than you can use
 </head>
 ```
 
+<head>
+
+&lt;style&gt;
+
+:root { --custom-color-a: #5eff1e; --custom-color-b: #e51eff; --custom-color-c: #1e90ff; --custom-color-d: #ff4b1e; --custom-color-e: #ffcb1e; }
+
+&lt;/style&gt;
+
+</head>
+
 ```html
 <div class="bg-custom-a">
 <p class="text-color-custom-b">
 <svg class="fill-custom-c"></svg>
 </p>
 </div>
-```
+```
+
+<div class="bg-custom-a">
+
+<p class="text-color-custom-b">
+
+<svg class="fill-custom-c">
+
+</svg>
+
+</p>
+
+</div>

package/dist/docs/start/guidelines/custom-rioglyph.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/custom-rioglyph
-*Captured:* 2026-04-20T12:53:31.025Z
+*Captured:* 2026-05-06T12:13:07.458Z
 
 To use a custom Rioglyph icon, there are two different approaches:
 
@@ -16,12 +16,20 @@ Below is an example of both approaches:
 
 **Approach 1: Inline style**
 
+Without custom CSS
+
 ```html
 <span class="rioglyph" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);"></span>
 ```
 
+<span class="rioglyph" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);">
+
+</span>
+
 **Approach 2: Custom CSS class**
 
+Use in components (eg. MapMarker)
+
 ```html
 <style>
 .rioglyph-custom-xxx {
@@ -30,6 +38,16 @@ Below is an example of both approaches:
 </style>
 ```
 
+&lt;style&gt;
+
+.rioglyph-custom-xxx { --i: url('https://cdn.rio.cloud/images/uikit/react_logo.svg'); }
+
+&lt;/style&gt;
+
 ```html
 <span class="rioglyph rioglyph-custom"></span>
-```
+```
+
+<span class="rioglyph rioglyph-custom">
+
+</span>