@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/foundations.md

@@ -3,7 +3,7 @@
 *Category:* Foundations
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#foundations
-*Captured:* 2026-04-20T12:55:25.820Z
+*Captured:* 2026-05-06T12:15:00.787Z
 
 You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light
 
@@ -11,6 +11,10 @@ You can use the the shorthandborderfor the automatic combination ofborder-style-
 
 > See also our Button component.
 
+> Note: For having spacing between buttons in a single row you may want to wrap them with<div class="btn-toolbar"></div>
+
+> Note: You can use link buttons within text blocks by adding btn-linkbtn-link-inline
+
 ### Example: Example 1
 
 Default buttons
@@ -61,7 +65,7 @@ muted-filled
             <div class="btn-toolbar">
                 <button type="button" class="btn btn-default">Default</button>
                 <button type="button" class="btn btn-default">
-                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                     </span>Default</button>
             </div>
         </div>
@@ -74,31 +78,31 @@ muted-filled
             </div>
             <div class="btn-toolbar">
                 <button type="button" class="btn btn-default btn-icon-only">
-                    <span class="rioglyph rioglyph-van" aria-hidden="true">
+                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-primary btn-icon-only">
-                    <span class="rioglyph rioglyph-van" aria-hidden="true">
+                    <span class="rioglyph rioglyph-bus" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-secondary btn-icon-only">
-                    <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                    <span class="rioglyph rioglyph-user" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-info btn-icon-only">
-                    <span class="rioglyph rioglyph-van" aria-hidden="true">
+                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-success btn-icon-only">
-                    <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                    <span class="rioglyph rioglyph-van" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-warning btn-icon-only">
-                    <span class="rioglyph rioglyph-car" aria-hidden="true">
+                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-danger btn-icon-only">
-                    <span class="rioglyph rioglyph-car" aria-hidden="true">
+                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
                     </span>
                 </button>
             </div>
@@ -112,14 +116,14 @@ muted-filled
             </div>
             <div class="btn-toolbar">
                 <button type="button" class="btn btn-muted-filled">
-                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                     </span>Muted filled</button>
                 <button type="button" class="btn btn-muted-filled btn-icon-only">
-                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                    <span class="rioglyph rioglyph-bus" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-muted">
-                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                    <span class="rioglyph rioglyph-car" aria-hidden="true">
                     </span>Muted</button>
                 <button type="button" class="btn btn-muted btn-icon-only">
                     <span class="rioglyph rioglyph-truck" aria-hidden="true">
@@ -137,32 +141,32 @@ muted-filled
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-primary btn-link">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-link">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info btn-link">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-link">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-link">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-link">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -179,7 +183,7 @@ muted-filled
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-primary">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
@@ -189,22 +193,22 @@ muted-filled
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -221,27 +225,27 @@ muted-filled
         </div>
         <div class="btn-toolbar padding-10 bg-checkerboard rounded">
             <button type="button" class="btn btn-primary btn-outline">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-outline">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info btn-outline">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-outline">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-outline">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
@@ -527,32 +531,32 @@ LG icon buttons
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary btn-xs">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-xs">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info btn-xs">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-xs">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-xs">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-xs">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -567,19 +571,19 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-primary btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-success btn-xs btn-icon-only">
@@ -587,11 +591,11 @@ LG icon buttons
                 </span>
             </button>
             <button type="button" class="btn btn-warning btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-danger btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -607,37 +611,37 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-sm">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary btn-sm">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-sm">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info btn-sm">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-sm">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-sm">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-sm">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -652,31 +656,31 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-primary btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-success btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-warning btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-danger btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -692,32 +696,32 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
@@ -737,31 +741,31 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-primary btn-icon-only">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-success btn-icon-only">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-warning btn-icon-only">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-danger btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -777,17 +781,17 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-lg">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary btn-lg">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-lg">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
@@ -797,17 +801,17 @@ LG icon buttons
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-lg">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-lg">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-lg">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -822,23 +826,23 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-primary btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-success btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-warning btn-lg btn-icon-only">
@@ -846,7 +850,7 @@ LG icon buttons
                 </span>
             </button>
             <button type="button" class="btn btn-danger btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -976,6 +980,8 @@ btn-toolbar
 
 ## Action buttons
 
+Colors
+
 ### Example: Example 5
 
 Click me Click me Click me Click me Click me Click me
@@ -995,22 +1001,22 @@ Click me Click me Click me Click me Click me Click me
         <span class="">Click me</span>
     </button>
     <button type="button" class="btn btn-info btn-action text-size-h3">
-        <span class="rioglyph rioglyph-car" aria-hidden="true">
+        <span class="rioglyph rioglyph-bus" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
     <button type="button" class="btn btn-success btn-action text-size-h4">
-        <span class="rioglyph rioglyph-truck" aria-hidden="true">
+        <span class="rioglyph rioglyph-user" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
     <button type="button" class="btn btn-warning btn-action text-size-h5">
-        <span class="rioglyph rioglyph-van" aria-hidden="true">
+        <span class="rioglyph rioglyph-bus" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
     <button type="button" class="btn btn-danger btn-action text-size-h6">
-        <span class="rioglyph rioglyph-van" aria-hidden="true">
+        <span class="rioglyph rioglyph-truck" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
@@ -1605,6 +1611,8 @@ hover-text-color-white
 
 ## SVGs
 
+Styling
+
 ### Example: Example 10
 
 
@@ -2442,6 +2450,8 @@ rounded-small
 
 ## Shadows
 
+Shadow class for panels and blocks
+
 The default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.
 
 Do not use hard shadows on tables, in dialogs, or on elements placed on white background.
@@ -2644,6 +2654,8 @@ shadow-subtle
 
 Use hover-shadow-* class to choose the hover elevation. Transition is included by default. For the tight focused preset use shadow-focused.
 
+Icons
+
 ### Example: Example 22
 
 hover-shadow-accent
@@ -2698,6 +2710,8 @@ shadow-subtle
 
 ## RIOglyph
 
+DownloadDownload all RIOglyph icons as SVG images here.
+
 ### Example: Example 23
 
 Default
@@ -2758,17 +2772,17 @@ Colored icons
             <hr class="margin-top-10 border-color-light">
         </div>
         <div class="display-flex flex-wrap gap-10">
-            <span class="rioglyph rioglyph-van text-color-primary text-size-h1">
+            <span class="rioglyph rioglyph-businessman text-color-primary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-bus text-color-secondary text-size-h1">
+            <span class="rioglyph rioglyph-driver text-color-secondary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-driver text-color-info text-size-h1">
+            <span class="rioglyph rioglyph-businessman text-color-info text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-car text-color-success text-size-h1">
+            <span class="rioglyph rioglyph-driver text-color-success text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-driver text-color-warning text-size-h1">
+            <span class="rioglyph rioglyph-businessman text-color-warning text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-driver text-color-danger text-size-h1">
+            <span class="rioglyph rioglyph-car text-color-danger text-size-h1">
             </span>
         </div>
     </div>
@@ -3300,17 +3314,17 @@ Not for decorative or unnecessary elements – If an icon doesn’t need extra e
             <hr class="margin-top-10 border-color-light">
         </div>
         <div class="display-flex flex-wrap gap-10">
-            <span class="rioglyph rioglyph-driver rioglyph-filled text-color-primary text-size-h1">
+            <span class="rioglyph rioglyph-bus rioglyph-filled text-color-primary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-driver rioglyph-filled text-color-secondary text-size-h1">
+            <span class="rioglyph rioglyph-car rioglyph-filled text-color-secondary text-size-h1">
             </span>
             <span class="rioglyph rioglyph-user rioglyph-filled text-color-info text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-driver rioglyph-filled text-color-success text-size-h1">
+            <span class="rioglyph rioglyph-user rioglyph-filled text-color-success text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-trailer rioglyph-filled text-color-warning text-size-h1">
+            <span class="rioglyph rioglyph-businessman rioglyph-filled text-color-warning text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-businessman rioglyph-filled text-color-danger text-size-h1">
+            <span class="rioglyph rioglyph-bus rioglyph-filled text-color-danger text-size-h1">
             </span>
         </div>
     </div>
@@ -3530,6 +3544,8 @@ Primis ante volutpat Vivamus
 
 ## Icon library
 
+Text
+
 ### Example: Example 31
 
 Search
@@ -6770,6 +6786,8 @@ cursor-default
 
 Single- or multi-line utility to truncate text content at max width with ...
 
+> Note: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex
+
 ### Example: Example 38
 
 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. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
@@ -6872,6 +6890,8 @@ When working with text, it's important to consider the relationship between the
 
 Rule of thumb: the larger the text size, the smaller the line height should be.
 
+> Note: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.
+
 ### Example: Example 40
 
 line-height-10
@@ -7176,6 +7196,8 @@ user-select-all
 
 ## Text box
 
+The text-box properties enable trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.
+
 ### Example: Example 43
 
 text-box-trim-start
@@ -7269,6 +7291,8 @@ text-boxnormal
 
 ## Text wrapping
 
+Layout
+
 ### Example: Example 44
 
 Word break
@@ -7350,6 +7374,10 @@ word-break-all
 
 ## Cols
 
+Column classes indicate the number of columns you like to use out of the possible 12 per row. They must be immediate children of rows.
+
+> Note: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active
+
 ### Example: Example 45
 
 col-12
@@ -7517,6 +7545,11 @@ row
 
 ## Responsive cols
 
+|  | ls | sm | md | lg | xl |
+| --- | --- | --- | --- | --- | --- |
+| min-width | 480px | 768px | 992px | 1200px | 1700px |
+| class | col-ls-* | col-sm-* | col-md-* | col-lg-* | col-xl-* |
+
 ### Example: Example 46
 
 col-xs-6 col-sm-3
@@ -7577,6 +7610,10 @@ row equal-height
 
 ## Container fluid
 
+|  | small | default | large | extra-large | ultra-large |
+| --- | --- | --- | --- | --- | --- |
+| max-width | 980px | 1280px | 1440px | 1680px | 1920px |
+
 ### Example: Example 48
 
 container fluid-small
@@ -7618,6 +7655,12 @@ container
 
 ## Container
 
+> Note: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.
+
+|  | ls | sm | md | lg | xl |
+| --- | --- | --- | --- | --- | --- |
+| max-width | 440px | 728px | 952px | 1160px | 1660px |
+
 ### Example: Example 49
 
 container
@@ -7642,6 +7685,13 @@ While traditional container classes like container and fluid-default respond to
 
 By reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.
 
+| Classic container | Container query |
+| --- | --- |
+| container, fluid-default | e.g., cq-600, cq-700 (custom class names) |
+| Layout adapts to viewport width | Layout adapts to container width |
+| Typically applied at page layout level | Used inside components and layout elements |
+| Based on media queries | Based on @container CSS rules |
+
 ## Usage
 
 The UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.
@@ -7655,6 +7705,12 @@ The UIKIT provides atomic utility classes for container queries, enabling you to
 </div>
 ```
 
+<div class="cq-container">
+
+<!-- content goes here -->
+
+</div>
+
 ```html
 <div class="cq-container">
 <div class="padding-10 cq-400:padding-15 cq-600:padding-25">
@@ -7663,6 +7719,16 @@ The UIKIT provides atomic utility classes for container queries, enabling you to
 </div>
 ```
 
+<div class="cq-container">
+
+<div class="padding-10 cq-400:padding-15 cq-600:padding-25">
+
+<!-- more content goes here -->
+
+</div>
+
+</div>
+
 The class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]
 
 - cq: is the prefix for all container query utilities.
@@ -7676,6 +7742,54 @@ Our container query utilities are based on a set of predefined width breakpoints
 
 We use a "max-width" query for the smallest breakpoint (300px) to target styles up to that size, and "min-width" queries for all larger breakpoints to target styles from that size upwards.
 
+| Identifier (in class) | Value | Query type | Description |
+| --- | --- | --- | --- |
+| 300 | 300px | max-width | Styles applied when container width is ≤ 300px |
+| 400 | 400px | min-width | Styles applied when container width is ≥ 400px |
+| 500 | 500px | min-width | Styles applied when container width is ≥ 500px |
+| 600 | 600px | min-width | Styles applied when container width is ≥ 600px |
+| 700 | 700px | min-width | Styles applied when container width is ≥ 700px |
+
+300
+
+300px
+
+max-width
+
+Styles applied when container width is ≤ 300px
+
+400
+
+400px
+
+min-width
+
+Styles applied when container width is ≥ 400px
+
+500
+
+500px
+
+min-width
+
+Styles applied when container width is ≥ 500px
+
+600
+
+600px
+
+min-width
+
+Styles applied when container width is ≥ 600px
+
+700
+
+700px
+
+min-width
+
+Styles applied when container width is ≥ 700px
+
 ### Example: Container query example and classes
 
 Container query example and classes
@@ -8479,6 +8593,8 @@ display-grid place-items-center place-self-center
 
 ## Grid stacking
 
+This is an alternative to the commonly known position absolute using grid-template-areas under the hood and giving all items the same grid area. To make the usage easier, use the following two classes grid-stack and grid-stack-item
+
 ### Example: Example 59
 
 stack item 1
@@ -8743,6 +8859,8 @@ grid-cols-subgrid
 
 ## Position
 
+Spacing
+
 ### Example: Lorem ipsum dolor sit amet
 
 Lorem ipsum dolor sit amet
@@ -8773,6 +8891,10 @@ position-relative
 
 ## Gap
 
+Gap classes can be used for flexbox and grid layouts.
+
+> Note: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.
+
 ### Example: Example 64
 
 gap-0
@@ -8889,6 +9011,10 @@ gap-0
 
 ## Space
 
+Space between child elements of non-flex and non-grid solutions.
+
+> Note: For flex or grid solutions please use gap instead.
+
 ### Example: Example 65
 
 space-y-0
@@ -9740,6 +9866,8 @@ children-first-margin-top-0
 
 ## Padding
 
+Sizing
+
 ### Example: Example 68
 
 Surrouding
@@ -10336,6 +10464,14 @@ The min-width property defines the smallest width an element can shrink to. When
 - min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.
 - min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.
 
+| Property | Description | Allows wrapping | Typical use |
+| --- | --- | --- | --- |
+| min-content | Shrinks to the smallest possible width without overflowing. | Yes | Compress content safely |
+| max-content | Expands to fit all content on a single line without wrapping. | No | Prevent text breaking or wrapping |
+| fit-content | Balances between min-content and max-content; adapts naturally. | Yes | Adaptive layouts |
+
+Navigation
+
 ### Example: Example 71
 
 max-content This_is_a_really_long_word_that_will_not_break.
@@ -10593,6 +10729,8 @@ You don’t need to offer dropdowns for rows per page, reducing UI clutter.
 
 **Condensed filled nav-pills as view toggle**
 
+For use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.
+
 ### Example: Example 75
 
 Standard
@@ -11144,6 +11282,8 @@ nav
 
 ## Tabs
 
+Elements
+
 ### Example: Example 79
 
 Standard
@@ -11780,6 +11920,8 @@ callout-default
 
 ## Counter
 
+The counter component is a pure CSS component that can be applied to any element in order to count the child elements in a nice way. This works for list items as well as for div's or other HTML tags.
+
 ### Example: Example 83
 
 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. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
@@ -11968,6 +12110,8 @@ Mac specific keys - see DeviceUtils ⌘ ⌥ ⌃ 
 
 ## Labels
 
+> Note: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.
+
 ### Example: Example 85
 
 Labels are small, colored indicators used to represent statuses, categories, or highlights in the UI.
@@ -12073,12 +12217,12 @@ muted
         <h5>Labels width icons</h5>
         <div class="display-flex flex-wrap gap-10">
             <div class="label label-default">
-                <span class="rioglyph rioglyph-bus">
+                <span class="rioglyph rioglyph-driver">
                 </span>
                 <span>default</span>
             </div>
             <div class="label label-primary">
-                <span class="rioglyph rioglyph-user">
+                <span class="rioglyph rioglyph-car">
                 </span>
                 <span>primary</span>
             </div>
@@ -12098,17 +12242,17 @@ muted
                 <span>success</span>
             </div>
             <div class="label label-warning">
-                <span class="rioglyph rioglyph-businessman">
+                <span class="rioglyph rioglyph-truck">
                 </span>
                 <span>warning</span>
             </div>
             <div class="label label-danger">
-                <span class="rioglyph rioglyph-van">
+                <span class="rioglyph rioglyph-truck">
                 </span>
                 <span>danger</span>
             </div>
             <div class="label label-muted">
-                <span class="rioglyph rioglyph-businessman">
+                <span class="rioglyph rioglyph-bus">
                 </span>
                 <span>muted</span>
             </div>
@@ -12119,22 +12263,22 @@ muted
         <div class="display-flex flex-wrap gap-10">
             <div class="label label-default label-filled">
                 <span>default</span>
-                <span class="rioglyph rioglyph-user">
+                <span class="rioglyph rioglyph-driver">
                 </span>
             </div>
             <div class="label label-primary label-filled">
                 <span>primary</span>
-                <span class="rioglyph rioglyph-user">
+                <span class="rioglyph rioglyph-van">
                 </span>
             </div>
             <div class="label label-secondary label-filled">
                 <span>secondary</span>
-                <span class="rioglyph rioglyph-trailer">
+                <span class="rioglyph rioglyph-businessman">
                 </span>
             </div>
             <div class="label label-info label-filled">
                 <span>info</span>
-                <span class="rioglyph rioglyph-van">
+                <span class="rioglyph rioglyph-bus">
                 </span>
             </div>
             <div class="label label-success label-filled">
@@ -12144,7 +12288,7 @@ muted
             </div>
             <div class="label label-warning label-filled">
                 <span>warning</span>
-                <span class="rioglyph rioglyph-user">
+                <span class="rioglyph rioglyph-car">
                 </span>
             </div>
             <div class="label label-danger label-filled">
@@ -12154,7 +12298,7 @@ muted
             </div>
             <div class="label label-muted label-filled">
                 <span>muted</span>
-                <span class="rioglyph rioglyph-car">
+                <span class="rioglyph rioglyph-bus">
                 </span>
             </div>
         </div>
@@ -13083,6 +13227,8 @@ progress
 
 ## Wells
 
+Forms
+
 ### Example: Example 90
 
 Hi, my name is well-sm
@@ -13867,6 +14013,8 @@ Lorem ipsum
 
 ## Input resize
 
+Animate
+
 ### Example: Example 94
 
 resize-none resize-vertical
@@ -14373,6 +14521,8 @@ export default AnimationsSlideExample;
 
 ## Transition
 
+CSS Filter
+
 ### Example: Example 96
 
 Transition properties
@@ -14506,6 +14656,8 @@ blur-0
 
 ## Backdrop blur
 
+Utilities
+
 ### Example: Example 98
 
 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. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.
@@ -14572,6 +14724,8 @@ backdrop-blur-1
 
 ## Aspect ratio
 
+The aspect-ratio class property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
+
 ### Example: Example 99
 
 With fixed width
@@ -14699,6 +14853,8 @@ inset-0
 
 ## Helper
 
+Transform
+
 ### Example: Example 101
 
 clearance clearfix children-first-border-top-none first-child-border-top-none children-last-border-bottom-none last-child-border-bottom-none children-first-margin-top-0 first-child-margin-top-0 children-last-margin-bottom-0 last-child-margin-bottom-0
@@ -14722,6 +14878,8 @@ clearance clearfix children-first-border-top-none first-child-border-top-none ch
 
 ## Rotate
 
+> Note: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.
+
 ### Example: Example 102
 
 Rotate 360°
@@ -14835,6 +14993,8 @@ rotate-0
 
 ## Scale
 
+> Note: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.
+
 ### Example: Example 103
 
 Scale
@@ -14924,6 +15084,12 @@ scale-50
 
 ## Translate
 
+Translate classes to move certain element with css transform. For example you can useposition-relative for the parent element and for the child element a combination of something likeposition-absolutetop-50pcttranslate-x-50pct-y-50pctleft-50pct
+
+> Note: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.
+
+Visibility
+
 ### Example: Example 104