@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

package/dist/docs/foundations.md

@@ -3,7 +3,7 @@
 *Category:* Foundations
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#foundations
-*Captured:* 2026-02-03T14:06:11.490Z
+*Captured:* 2026-02-23T15:50:16.270Z
 
 You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light
 
@@ -100,7 +100,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-van" aria-hidden="true">
+                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
                     </span>Default</button>
             </div>
         </div>
@@ -113,31 +113,31 @@ muted-filled
             </div>
             <div class="btn-toolbar">
                 <button type="button" class="btn btn-default btn-icon-only">
-                    <span class="rioglyph rioglyph-user" aria-hidden="true">
+                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-primary btn-icon-only">
-                    <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                    <span class="rioglyph rioglyph-user" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-secondary 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-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-icon-only">
-                    <span class="rioglyph rioglyph-user" aria-hidden="true">
+                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-warning btn-icon-only">
-                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                    <span class="rioglyph rioglyph-car" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-danger btn-icon-only">
-                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                    <span class="rioglyph rioglyph-bus" aria-hidden="true">
                     </span>
                 </button>
             </div>
@@ -151,17 +151,17 @@ muted-filled
             </div>
             <div class="btn-toolbar">
                 <button type="button" class="btn btn-muted-filled">
-                    <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
                     </span>Muted filled</button>
                 <button type="button" class="btn btn-muted-filled btn-icon-only">
-                    <span class="rioglyph rioglyph-car" aria-hidden="true">
+                    <span class="rioglyph rioglyph-bus" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-muted">
-                    <span class="rioglyph rioglyph-van" aria-hidden="true">
+                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
                     </span>Muted</button>
                 <button type="button" class="btn btn-muted btn-icon-only">
-                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                    <span class="rioglyph rioglyph-bus" aria-hidden="true">
                     </span>
                 </button>
             </div>
@@ -176,32 +176,32 @@ muted-filled
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-primary btn-link">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-link">
-                <span class="rioglyph rioglyph-car" 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-link">
-                <span class="rioglyph rioglyph-businessman" 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-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-link">
-                <span class="rioglyph rioglyph-businessman" 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 btn-link">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -218,22 +218,22 @@ muted-filled
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-primary">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info">
-                <span class="rioglyph rioglyph-truck" 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-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
@@ -243,7 +243,7 @@ muted-filled
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -260,12 +260,12 @@ 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-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-outline">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
@@ -275,17 +275,17 @@ muted-filled
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-outline">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-outline">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-outline">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -597,37 +597,37 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-xs">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary btn-xs">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" 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-van" 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-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-xs">
-                <span class="rioglyph rioglyph-user" 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-xs">
-                <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-xs">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -642,31 +642,31 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default 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-primary btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-driver" 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-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-xs 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-success btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-warning btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" 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-truck" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -682,37 +682,37 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-sm">
-                <span class="rioglyph rioglyph-van" 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-truck" 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-sm">
-                <span class="rioglyph rioglyph-van" 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-sm">
-                <span class="rioglyph rioglyph-truck" 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-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-sm">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-sm">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -731,27 +731,27 @@ LG icon buttons
                 </span>
             </button>
             <button type="button" class="btn btn-primary btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-driver" 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-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" 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-trailer" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-danger btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -767,22 +767,22 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary">
-                <span class="rioglyph rioglyph-driver" 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">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <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-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
@@ -812,19 +812,19 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-icon-only">
-                <span class="rioglyph rioglyph-user" 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-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-icon-only">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-icon-only">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-success btn-icon-only">
@@ -832,11 +832,11 @@ LG icon buttons
                 </span>
             </button>
             <button type="button" class="btn btn-warning btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" 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-driver" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -857,12 +857,12 @@ LG icon buttons
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary btn-lg">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-lg">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
@@ -872,17 +872,17 @@ LG icon buttons
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-lg">
-                <span class="rioglyph rioglyph-bus" 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-lg">
-                <span class="rioglyph rioglyph-trailer" 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-lg">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -897,27 +897,27 @@ 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-driver" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-primary btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-success btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-warning btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-danger btn-lg btn-icon-only">
@@ -1086,32 +1086,32 @@ Click meClick meClick meClick meClick meClick me
 ```html
 <div class="btn-toolbar align-items-start">
     <button type="button" class="btn btn-primary btn-action text-size-h1">
-        <span class="rioglyph rioglyph-truck" aria-hidden="true">
+        <span class="rioglyph rioglyph-trailer" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
     <button type="button" class="btn btn-secondary btn-action text-size-h2">
-        <span class="rioglyph rioglyph-truck" aria-hidden="true">
+        <span class="rioglyph rioglyph-driver" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
     <button type="button" class="btn btn-info btn-action text-size-h3">
-        <span class="rioglyph rioglyph-bus" aria-hidden="true">
+        <span class="rioglyph rioglyph-truck" 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-van" 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-businessman" 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-car" aria-hidden="true">
+        <span class="rioglyph rioglyph-user" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
@@ -2951,6 +2951,7 @@ shadow-accent
 shadow-default
 shadow-smooth
 shadow-hard
+shadow-focused
 
 Direction shadows
 
@@ -2984,6 +2985,7 @@ shadow-accent
 shadow-default
 shadow-smooth
 shadow-hard
+shadow-focused
 
 Direction shadows
 
@@ -3035,6 +3037,9 @@ Item
         <div class="height-100 rounded bg-white shadow-hard display-grid place-items-center">
             <span class="hidden-xs ">shadow-hard</span>
         </div>
+        <div class="height-100 rounded bg-white shadow-focused display-grid place-items-center">
+            <span class="hidden-xs ">shadow-focused</span>
+        </div>
     </div>
     <div class="margin-top-50">
         <div class="description-headline">
@@ -3081,7 +3086,7 @@ Item
     </div>
     <div class="margin-bottom-20">
         <div class="description-headline">
-            <h5 class="">Accent shadow for list items</h5>
+            <h4 class="">Accent shadow for list items</h4>
         </div>
         <div class="max-width-1000">
             <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0" data-capture-callout="true">
@@ -3133,10 +3138,79 @@ Item
 shadow-subtle
 ```
 
-## RIOglyph
+## Hover shadows
+
+Use hover-shadow-* class to choose the hover elevation. Transition is included by default. For the tight focused preset use shadow-focused.
 
 ### Example: Example 22
 
+hover-shadow-accent
+hover-shadow-default
+hover-shadow-hard-down
+hover-shadow-focused
+
+Custom hover settings
+Customize hover animation with CSS vars:--shadow-hover-duration,--shadow-hover-easing, and--shadow-hover-delay
+Defaults are var(--shadow-hover-duration, 140ms) var(--shadow-hover-easing, ease-out) var(--shadow-hover-delay, 0ms)
+hover-shadow-focused (custom)
+hover-shadow-focused (custom)
+
+#### Summary
+
+hover-shadow-accent
+hover-shadow-default
+hover-shadow-hard-down
+hover-shadow-focused
+
+Custom hover settings
+Customize hover animation with CSS vars:--shadow-hover-duration,--shadow-hover-easing, and--shadow-hover-delay
+Defaults are var(--shadow-hover-duration, 140ms) var(--shadow-hover-easing, ease-out) var(--shadow-hover-delay, 0ms)
+hover-shadow-focused (custom)
+hover-shadow-focused (custom)
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="display-grid grid-cols-3 gap-20 text-color-darker margin-bottom-25">
+        <div class="shadow-none hover-shadow-accent display-grid place-items-center height-100 rounded bg-white ">
+            <span class="hidden-xs">hover-shadow-accent</span>
+        </div>
+        <div class="shadow-none border hover-shadow-default display-grid place-items-center height-100 rounded bg-white ">
+            <span class="hidden-xs">hover-shadow-default</span>
+        </div>
+        <div class="shadow-default hover-shadow-hard-down border display-grid place-items-center height-100 rounded bg-white ">
+            <span class="hidden-xs">hover-shadow-hard-down</span>
+        </div>
+        <div class="shadow-default hover-shadow-focused display-grid place-items-center height-100 rounded bg-white ">
+            <span class="hidden-xs">hover-shadow-focused</span>
+        </div>
+    </div>
+    <h5>Custom hover settings</h5>
+    <p>Customize hover animation with CSS vars:<code class="code-inline">--shadow-hover-duration</code>,<code class="code-inline">--shadow-hover-easing</code>, and<code class="code-inline">--shadow-hover-delay</code>
+        <br>Defaults are <code class="code-inline">var(--shadow-hover-duration, 140ms) var(--shadow-hover-easing, ease-out) var(--shadow-hover-delay, 0ms)</code>
+    </p>
+    <div class="display-grid grid-cols-3 gap-20">
+        <div class="shadow-default hover-shadow-focused display-grid place-items-center height-100 rounded bg-white max-width-500" style="--shadow-hover-duration: 50ms;">
+            <span class="hidden-xs">hover-shadow-focused (custom)</span>
+        </div>
+        <div class="shadow-default hover-shadow-focused display-grid place-items-center height-100 rounded bg-white max-width-500" style="--shadow-hover-duration: 250ms; --shadow-hover-delay: 50ms;">
+            <span class="hidden-xs">hover-shadow-focused (custom)</span>
+        </div>
+    </div>
+</div>
+```
+
+#### Classes (css)
+
+```css
+shadow-subtle
+```
+
+## RIOglyph
+
+### Example: Example 23
+
 Default
 
 Sized icons
@@ -3203,15 +3277,15 @@ Colored icons
             <hr class="margin-top-10 border-color-light">
         </div>
         <div class="display-flex flex-wrap gap-10">
-            <span class="rioglyph rioglyph-car text-color-primary text-size-h1">
+            <span class="rioglyph rioglyph-bus text-color-primary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-trailer text-color-secondary text-size-h1">
+            <span class="rioglyph rioglyph-driver text-color-secondary text-size-h1">
             </span>
             <span class="rioglyph rioglyph-trailer text-color-info text-size-h1">
             </span>
             <span class="rioglyph rioglyph-truck text-color-success text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-car text-color-warning text-size-h1">
+            <span class="rioglyph rioglyph-driver text-color-warning text-size-h1">
             </span>
             <span class="rioglyph rioglyph-driver text-color-danger text-size-h1">
             </span>
@@ -3222,7 +3296,7 @@ Colored icons
 
 ## Vehicle icons
 
-### Example: Example 23
+### Example: Example 24
 
 Vehicle icons
 
@@ -3283,7 +3357,7 @@ Baseline vehicle icons
 
 ## Pair icons
 
-### Example: Example 24
+### Example: Example 25
 
 Default
 
@@ -3580,7 +3654,7 @@ Sized
 
 ## Animated icons
 
-### Example: Example 25
+### Example: Example 26
 
 Spinning icons
 
@@ -3637,7 +3711,7 @@ Pulsing icons
 
 ## Disabled icons
 
-### Example: Example 26
+### Example: Example 27
 
 Default
 
@@ -3722,7 +3796,7 @@ Inverse
 
 ## Filled icons
 
-### Example: Example 27
+### Example: Example 28
 
 Default filled icons
 
@@ -3796,17 +3870,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-truck 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-van rioglyph-filled text-color-secondary text-size-h1">
+            <span class="rioglyph rioglyph-truck rioglyph-filled text-color-secondary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-businessman rioglyph-filled text-color-info text-size-h1">
+            <span class="rioglyph rioglyph-car rioglyph-filled text-color-info text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-bus rioglyph-filled text-color-success text-size-h1">
+            <span class="rioglyph rioglyph-van rioglyph-filled text-color-success text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-bus rioglyph-filled text-color-warning text-size-h1">
+            <span class="rioglyph rioglyph-truck 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-user rioglyph-filled text-color-danger text-size-h1">
             </span>
         </div>
     </div>
@@ -3865,7 +3939,7 @@ Not for decorative or unnecessary elements – If an icon doesn’t need extra e
 
 ## Custom icons
 
-### Example: Example 28
+### Example: Example 29
 
 Use external svgs as RIOglyph icons. Please read our guidelines
 
@@ -3877,7 +3951,7 @@ Use external svgs as RIOglyph icons. Please read our guidelines
 
 ```html
 <div>
-    <p>Use external svgs as RIOglyph icons. Please read our <a href="#start/guidelines/custom-rioglyph">guidelines</a>
+    <p>Use external svgs as RIOglyph icons. Please read our <a href="#/start/guidelines/custom-rioglyph" data-discover="true">guidelines</a>
     </p>
     <div class="display-flex gap-10">
         <div class="flex-1-1">
@@ -4059,7 +4133,7 @@ Primis ante volutpat Vivamus
 
 ## Icon library
 
-### Example: Example 30
+### Example: Example 31
 
 Search
 
@@ -4104,6 +4178,8 @@ rioglyph rioglyph-bookable-poi
 rioglyph rioglyph-bookmark-square
 rioglyph rioglyph-bookmark
 rioglyph rioglyph-border-crossing
+rioglyph rioglyph-box-open
+rioglyph rioglyph-box
 rioglyph rioglyph-brain
 rioglyph rioglyph-brake
 rioglyph rioglyph-branch-horizontal
@@ -4298,6 +4374,7 @@ rioglyph rioglyph-map
 rioglyph rioglyph-megaphone
 rioglyph rioglyph-menu-hamburger
 rioglyph rioglyph-merge
+rioglyph rioglyph-mesh-box
 rioglyph rioglyph-migrate
 rioglyph rioglyph-milage
 rioglyph rioglyph-minus-light
@@ -4325,6 +4402,7 @@ rioglyph rioglyph-option-horizontal
 rioglyph rioglyph-option-vertical
 rioglyph rioglyph-order
 rioglyph rioglyph-palette-broken
+rioglyph rioglyph-palette-empty
 rioglyph rioglyph-palette
 rioglyph rioglyph-paper-clip
 rioglyph rioglyph-parcel-broken
@@ -4465,6 +4543,9 @@ rioglyph rioglyph-to-top
 rioglyph rioglyph-tracking-package
 rioglyph rioglyph-traffic-lights
 rioglyph rioglyph-trailer-baseline
+rioglyph rioglyph-trailer-liquid
+rioglyph rioglyph-trailer-standard
+rioglyph rioglyph-trailer-tipping
 rioglyph rioglyph-trailer
 rioglyph rioglyph-trailerposition
 rioglyph rioglyph-train
@@ -4565,6 +4646,8 @@ rioglyph rioglyph-bookable-poi
 rioglyph rioglyph-bookmark-square
 rioglyph rioglyph-bookmark
 rioglyph rioglyph-border-crossing
+rioglyph rioglyph-box-open
+rioglyph rioglyph-box
 rioglyph rioglyph-brain
 rioglyph rioglyph-brake
 rioglyph rioglyph-branch-horizontal
@@ -4759,6 +4842,7 @@ rioglyph rioglyph-map
 rioglyph rioglyph-megaphone
 rioglyph rioglyph-menu-hamburger
 rioglyph rioglyph-merge
+rioglyph rioglyph-mesh-box
 rioglyph rioglyph-migrate
 rioglyph rioglyph-milage
 rioglyph rioglyph-minus-light
@@ -4786,6 +4870,7 @@ rioglyph rioglyph-option-horizontal
 rioglyph rioglyph-option-vertical
 rioglyph rioglyph-order
 rioglyph rioglyph-palette-broken
+rioglyph rioglyph-palette-empty
 rioglyph rioglyph-palette
 rioglyph rioglyph-paper-clip
 rioglyph rioglyph-parcel-broken
@@ -4926,6 +5011,9 @@ rioglyph rioglyph-to-top
 rioglyph rioglyph-tracking-package
 rioglyph rioglyph-traffic-lights
 rioglyph rioglyph-trailer-baseline
+rioglyph rioglyph-trailer-liquid
+rioglyph rioglyph-trailer-standard
+rioglyph rioglyph-trailer-tipping
 rioglyph rioglyph-trailer
 rioglyph rioglyph-trailerposition
 rioglyph rioglyph-train
@@ -5210,6 +5298,16 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-border-crossing </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-box-open   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-box-open </span>
+    </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-box   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-box </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-brain   text-size-h3 margin-right-10">
         </span>
@@ -6180,6 +6278,11 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-merge </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-mesh-box   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-mesh-box </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-migrate   text-size-h3 margin-right-10">
         </span>
@@ -6315,6 +6418,11 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-palette-broken </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-palette-empty   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-palette-empty </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-palette   text-size-h3 margin-right-10">
         </span>
@@ -7015,6 +7123,21 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-trailer-baseline </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-trailer-liquid   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-trailer-liquid </span>
+    </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-trailer-standard   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-trailer-standard </span>
+    </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-trailer-tipping   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-trailer-tipping </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-trailer   text-size-h3 margin-right-10">
         </span>
@@ -7290,7 +7413,7 @@ rioglyph rioglyph-xmas-santa
 
 ## Text styles
 
-### Example: Example 31
+### Example: Example 32
 
 Headline size
 
@@ -7639,7 +7762,7 @@ h1
 
 ## Alignment
 
-### Example: Example 33
+### Example: Example 34
 
 text-left
 text-center
@@ -7669,7 +7792,7 @@ text-left
 
 ## Blockquote
 
-### Example: Example 34
+### Example: Example 35
 
 Lorem ipsum white.Lorem ipsum black.Lorem ipsum decent.Lorem ipsum lightest.Lorem ipsum lighter.Lorem ipsum light.Lorem ipsum gray.Lorem ipsum dark.Lorem ipsum darker.Lorem ipsum darkest.
 
@@ -7702,7 +7825,7 @@ quote-color-white
 
 ## Code
 
-### Example: Example 35
+### Example: Example 36
 
 var test = 'Hello World!';
 This is an inline Codeblock for use in text.
@@ -7740,7 +7863,7 @@ console.log(test);</code>
 
 You can disable all pointer events by addingpointer-events-none
 
-### Example: Example 36
+### Example: Example 37
 
 cursor-default
 cursor-pointer
@@ -7806,9 +7929,11 @@ cursor-default
 
 ## Ellipsis
 
+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 37
+### 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.
 
@@ -7881,6 +8006,55 @@ Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus
 ellipsis-1
 ```
 
+## Ellipsis-middle
+
+The class ellipsis-middle expects two child elements where the first child is the start and the second child is the end that should always remain visible.
+
+### Example: Example 39
+
+2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e
+2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e
+2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e
+
+#### Summary
+
+2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e
+2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e
+2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e
+
+#### HTML (html)
+
+```html
+<div class="max-width-500">
+    <div class="position-relative border rounded padding-15" style="width: 400px;">
+        <div class="space-y-15">
+            <div class="ellipsis-middle border rounded padding-x-10 padding-y-5 text-size-16">
+                <span>2bb5e796-6c5e-4bc4-871b-f3af-d46</span>
+                <span>9-1c1e</span>
+            </div>
+            <div class="ellipsis-middle border rounded padding-x-10 padding-y-5 text-size-16">
+                <span>2bb5e796-6c5e-4bc4-871b-f3af-</span>
+                <span>d469-1c1e</span>
+            </div>
+            <div class="ellipsis-middle border rounded padding-x-10 padding-y-5 text-size-16">
+                <span>2bb5e796-6c5e-4bc4-871b-f3</span>
+                <span>af-d469-1c1e</span>
+            </div>
+        </div>
+        <div class="Resizer resize-horizontal resize-right right-0 display-grid place-items-center width-auto height-100pct padding-x-2">
+            <div class="height-30 width-2 bg-gray">
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Classes (css)
+
+```css
+ellipsis-middle
+```
+
 ## Line height
 
 When working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.
@@ -7889,7 +8063,7 @@ 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 38
+### Example: Example 40
 
 line-height-10
 
@@ -8108,7 +8282,7 @@ Lorem ipsum dolor sit amet, dui eget elit.
 line-height-10
 ```
 
-### Example: Example 39
+### Example: Example 41
 
 line-height-h1
 
@@ -8235,7 +8409,7 @@ line-height-h1
 
 ## User select
 
-### Example: Example 40
+### Example: Example 42
 
 user-select-all
 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.
@@ -8272,7 +8446,7 @@ user-select-all
 
 ## Text box
 
-### Example: Example 41
+### Example: Example 43
 
 text-box-trim-start
 
@@ -8383,7 +8557,7 @@ text-boxnormal
 
 ## Text wrapping
 
-### Example: Example 42
+### Example: Example 44
 
 Word break
 
@@ -8486,7 +8660,7 @@ word-break-all
 
 > 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 43
+### Example: Example 45
 
 col-12
 
@@ -8711,7 +8885,7 @@ row
 
 ## Responsive cols
 
-### Example: Example 44
+### Example: Example 46
 
 col-xs-6 col-sm-3
 
@@ -8752,7 +8926,7 @@ col-xs-6 col-sm-3
 
 ## Equal Height Cols
 
-### Example: Example 45
+### Example: Example 47
 
 Lorem ipsum dolor sit amet, dui eget elit.
 
@@ -8787,7 +8961,7 @@ row equal-height
 
 ## Container fluid
 
-### Example: Example 46
+### Example: Example 48
 
 container fluid-small
 container fluid-default
@@ -8838,7 +9012,7 @@ 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.
 
-### Example: Example 47
+### Example: Example 49
 
 container
 
@@ -8938,7 +9112,7 @@ cq-container
 
 ## Flexbox
 
-### Example: Example 49
+### Example: Example 51
 
 Center
 
@@ -9149,7 +9323,7 @@ display-flex
 
 ## Grid
 
-### Example: Example 50
+### Example: Example 52
 
 grid-cols-1
 
@@ -9450,7 +9624,7 @@ display-grid
 
 ## Grid colspan / rowspan
 
-### Example: Example 51
+### Example: Example 53
 
 grid-colspan-3
 
@@ -9482,7 +9656,7 @@ grid-colspan-auto
 
 ## Grid column-start / column-end
 
-### Example: Example 52
+### Example: Example 54
 
 
 
@@ -9559,7 +9733,7 @@ Dynamic Column Creation: "auto-fit" automatically creates as many columns as wil
 
 Responsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.
 
-### Example: Example 53
+### Example: Example 55
 
 
 
@@ -9596,7 +9770,7 @@ The auto value sizes the grid column based on the content, but it can also take
 
 Choosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.
 
-### Example: Example 54
+### Example: Example 56
 
 max-content
 1fr
@@ -9906,7 +10080,7 @@ grid-rows-auto-1fr-auto
 
 ## Grid placement
 
-### Example: Example 56
+### Example: Example 58
 
 place-items-center
 
@@ -9930,7 +10104,7 @@ display-grid place-items-center place-self-center
 
 ## Grid stacking
 
-### Example: Example 57
+### Example: Example 59
 
 stack item 1
 stack item 2
@@ -9971,7 +10145,7 @@ display-grid grid-stack
 
 The subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.
 
-### Example: Example 58
+### Example: Example 60
 
 Form example
 Connection
@@ -9980,6 +10154,7 @@ Credentials
 UsernamePasswordCheckboxYet another level of nesting
 
 Subgrid enabled
+
 Submit
 
 #### Summary
@@ -9991,6 +10166,7 @@ Credentials
 UsernamePasswordCheckboxYet another level of nesting
 
 Subgrid enabled
+
 Submit
 
 #### HTML (html)
@@ -10026,12 +10202,13 @@ Submit
         </section>
         <footer class="display-flex grid-colspan-2 justify-content-between align-items-center">
             <div class="uikit-switch">
-                <label class="switch-label label-position-right">
+                <label class="switch-label uikit-switch label-position-right">
                     <input type="checkbox" class="switch-input" checked="">
                     <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                         <div class="switch-handle">
                         </div>
-                    </div>Subgrid enabled
+                    </div>
+                    <div class="switch-text-wrapper user-select-none padding-top-1">Subgrid enabled</div>
                 </label>
             </div>
             <button type="button" class="btn btn-default btn-component" tabindex="0">Submit</button>
@@ -10046,11 +10223,12 @@ Submit
 grid-cols-subgrid
 ```
 
-### Example: Example 59
+### Example: Example 61
 
 Full NameEmailMessage
 
 Subgrid enabled
+
 Submit
 
 #### Summary
@@ -10058,6 +10236,7 @@ Submit
 Full NameEmailMessage
 
 Subgrid enabled
+
 Submit
 
 #### HTML (html)
@@ -10080,12 +10259,13 @@ Submit
         </label>
         <footer class="grid-column-start-2 display-flex justify-content-between align-items-center">
             <div class="uikit-switch">
-                <label class="switch-label label-position-right">
+                <label class="switch-label uikit-switch label-position-right">
                     <input type="checkbox" class="switch-input" checked="">
                     <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                         <div class="switch-handle">
                         </div>
-                    </div>Subgrid enabled
+                    </div>
+                    <div class="switch-text-wrapper user-select-none padding-top-1">Subgrid enabled</div>
                 </label>
             </div>
             <button type="button" class="btn btn-default btn-component" tabindex="0">Submit</button>
@@ -10100,7 +10280,7 @@ Submit
 grid-cols-subgrid
 ```
 
-### Example: Example 60
+### Example: Example 62
 
 Subgrid Cards
 Article title
@@ -10234,12 +10414,13 @@ Subgrid enabled
         </article>
     </div>
     <div class="uikit-switch">
-        <label class="switch-label label-position-right">
+        <label class="switch-label uikit-switch label-position-right">
             <input type="checkbox" class="switch-input" checked="">
             <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                 <div class="switch-handle">
                 </div>
-            </div>Subgrid enabled
+            </div>
+            <div class="switch-text-wrapper user-select-none padding-top-1">Subgrid enabled</div>
         </label>
     </div>
 </div>
@@ -10291,7 +10472,7 @@ position-relative
 
 > 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 62
+### Example: Example 64
 
 gap-0
 gap-0
@@ -10455,7 +10636,7 @@ gap-0
 
 > Note: For flex or grid solutions please use gap instead.
 
-### Example: Example 63
+### Example: Example 65
 
 space-y-0
 space-y-0
@@ -10617,7 +10798,7 @@ space-x-0
 
 ## Margin
 
-### Example: Example 64
+### Example: Example 66
 
 Surrouding
 
@@ -11413,7 +11594,7 @@ margin-auto
 
 ## Margin helper
 
-### Example: Example 65
+### Example: Example 67
 
 Last child (self class)
 
@@ -11556,7 +11737,7 @@ children-first-margin-top-0
 
 ## Padding
 
-### Example: Example 66
+### Example: Example 68
 
 Surrouding
 
@@ -12198,7 +12379,7 @@ padding-0
 
 ## Height
 
-### Example: Example 67
+### Example: Example 69
 
 
 
@@ -12231,7 +12412,7 @@ height-auto
 
 ## Width
 
-### Example: Example 68
+### Example: Example 70
 
 30px
 35px
@@ -12354,7 +12535,7 @@ 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.
 
-### Example: Example 69
+### Example: Example 71
 
 max-contentThis_is_a_really_long_word_that_will_not_break.
 
@@ -12397,7 +12578,7 @@ width-auto
 
 ## Breadcrumb
 
-### Example: Example 70
+### Example: Example 72
 
 level 1
 level 2
@@ -12438,7 +12619,7 @@ level 4
 
 > See Pager for the actual React component.
 
-### Example: Example 71
+### Example: Example 73
 
 Pager with label
 
@@ -12635,7 +12816,7 @@ You don’t need to offer dropdowns for rows per page, reducing UI clutter.
         </span>
         <span>Not for Tables</span>
     </h5>
-    <p>Tables should use a “<a href="#components/loadMore">Load more</a>” button instead of pagination.</p>
+    <p>Tables should use a “<a class="" href="#/components/loadMore" data-discover="true">Load more</a>” button instead of pagination.</p>
     <h6>Why "Load more" is preferred</h6>
     <ul class="space-y-10">
         <li>
@@ -12664,7 +12845,9 @@ You don’t need to offer dropdowns for rows per page, reducing UI clutter.
 
 ## Pills
 
-### Example: Example 73
+**Condensed filled nav-pills as view toggle**
+
+### Example: Example 75
 
 Standard
 
@@ -12847,7 +13030,7 @@ Fourth tab
 nav
 ```
 
-### Example: Example 74
+### Example: Example 76
 
 Filled
 
@@ -12858,6 +13041,12 @@ Fourth tab
 
 Filled with icons only
 
+Filled condensed (for use with other form elements)
+
+Shipments
+Vehicles
+Trailer
+
 #### Summary
 
 Filled
@@ -12869,6 +13058,12 @@ Fourth tab
 
 Filled with icons only
 
+Filled condensed (for use with other form elements)
+
+Shipments
+Vehicles
+Trailer
+
 #### HTML (html)
 
 ```html
@@ -12925,6 +13120,39 @@ Filled with icons only
             </li>
         </ul>
     </div>
+    <div>
+        <div class="lead ">
+            <div class="display-flex justify-content-between">
+                <div>Filled condensed (for use with other form elements)</div>
+            </div>
+            <hr class="margin-top-10 border-color-light">
+        </div>
+        <div class="max-width-350">
+            <ul class="nav nav-pills nav-pills-filled nav-pills-filled-condensed nav-justified shadow-subtle">
+                <li class="active">
+                    <span class="display-flex flex-row align-items-center gap-5">
+                        <span class="rioglyph rioglyph-parcel">
+                        </span>
+                        <span>Shipments</span>
+                    </span>
+                </li>
+                <li>
+                    <span class="display-flex flex-row align-items-center gap-5">
+                        <span class="rioglyph rioglyph-truck">
+                        </span>
+                        <span>Vehicles</span>
+                    </span>
+                </li>
+                <li>
+                    <span class="display-flex flex-row align-items-center gap-5">
+                        <span class="rioglyph rioglyph-trailer">
+                        </span>
+                        <span>Trailer</span>
+                    </span>
+                </li>
+            </ul>
+        </div>
+    </div>
 </div>
 ```
 
@@ -13117,9 +13345,152 @@ Dolor sit amet
 nav
 ```
 
+### Example: Example 78
+
+Shipments
+Vehicles
+
+Please selectOption 1
+Option 2
+
+LaneLoad IDETAStatus
+
+Rotterdam → MunichLD-4827110:40In transit
+Hamburg → LyonLD-5172312:15At cross-dock
+Milan → ZurichLD-6001814:05Delivered
+
+#### Summary
+
+Shipments
+Vehicles
+
+Please selectOption 1
+Option 2
+
+LaneLoad IDETAStatus
+
+Rotterdam → MunichLD-4827110:40In transit
+Hamburg → LyonLD-5172312:15At cross-dock
+Milan → ZurichLD-6001814:05Delivered
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="table-toolbar">
+        <div class="table-toolbar-container">
+            <div class="table-toolbar-group-left">
+                <div class="table-toolbar-column">
+                    <ul class="nav nav-pills nav-pills-filled nav-pills-filled-condensed">
+                        <li class="active">
+                            <span class="display-flex flex-row align-items-center gap-5">
+                                <span class="rioglyph rioglyph-parcel">
+                                </span>
+                                <span>Shipments</span>
+                            </span>
+                        </li>
+                        <li>
+                            <span class="display-flex flex-row align-items-center gap-5">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                                <span>Vehicles</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="table-toolbar-column">
+                    <div class="select dropdown min-width-200 dropup">
+                        <button type="button" id="2" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+                            <span class="selected-option-text">
+                                <span class="placeholder">Please select</span>
+                            </span>
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
+                            </span>
+                        </button>
+                        <ul class="dropdown-menu" role="menu">
+                            <li class="" role="listitem">
+                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
+                                    <span class="selected-option-dropdown-item">Option 1</span>
+                                    <input type="hidden" value="1">
+                                </a>
+                            </li>
+                            <li class="" role="listitem">
+                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
+                                    <span class="selected-option-dropdown-item">Option 2</span>
+                                    <input type="hidden" value="2">
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="table-toolbar-group-right">
+                <div class="table-toolbar-column">
+                    <div class="table-toolbar-search input-group">
+                        <span class="input-group-addon">
+                            <span class="rioglyph rioglyph-search">
+                            </span>
+                        </span>
+                        <div class="ClearableInput input-group">
+                            <input placeholder="Search in table" class="form-control" type="text" tabindex="0" value="">
+                            <span class="clearButton hide">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table-responsive">
+        <table class="table table-hover table-head-filled table-bordered">
+            <thead>
+                <tr>
+                    <th>Lane</th>
+                    <th>Load ID</th>
+                    <th>ETA</th>
+                    <th>Status</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Rotterdam → Munich</td>
+                    <td>LD-48271</td>
+                    <td>10:40</td>
+                    <td>In transit</td>
+                </tr>
+                <tr>
+                    <td>Hamburg → Lyon</td>
+                    <td>LD-51723</td>
+                    <td>12:15</td>
+                    <td>At cross-dock</td>
+                </tr>
+                <tr>
+                    <td>Milan → Zurich</td>
+                    <td>LD-60018</td>
+                    <td>14:05</td>
+                    <td>Delivered</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+```
+
+#### Classes (css)
+
+```css
+nav
+```
+
 ## Tabs
 
-### Example: Example 76
+### Example: Example 79
 
 Standard
 
@@ -13312,7 +13683,7 @@ nav
 
 ## Common table style
 
-### Example: Example 77
+### Example: Example 80
 
 LabelNewAction
 
@@ -13436,7 +13807,7 @@ ColumnColumnColumnColumn
                                             <tr>
                                                 <td data-value="1" data-month="1" data-year="2026" class="rdtDay">1</td>
                                                 <td data-value="2" data-month="1" data-year="2026" class="rdtDay">2</td>
-                                                <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtToday">3</td>
+                                                <td data-value="3" data-month="1" data-year="2026" class="rdtDay">3</td>
                                                 <td data-value="4" data-month="1" data-year="2026" class="rdtDay">4</td>
                                                 <td data-value="5" data-month="1" data-year="2026" class="rdtDay">5</td>
                                                 <td data-value="6" data-month="1" data-year="2026" class="rdtDay">6</td>
@@ -13462,7 +13833,7 @@ ColumnColumnColumnColumn
                                             </tr>
                                             <tr>
                                                 <td data-value="22" data-month="1" data-year="2026" class="rdtDay">22</td>
-                                                <td data-value="23" data-month="1" data-year="2026" class="rdtDay">23</td>
+                                                <td data-value="23" data-month="1" data-year="2026" class="rdtDay rdtToday">23</td>
                                                 <td data-value="24" data-month="1" data-year="2026" class="rdtDay">24</td>
                                                 <td data-value="25" data-month="1" data-year="2026" class="rdtDay">25</td>
                                                 <td data-value="26" data-month="1" data-year="2026" class="rdtDay">26</td>
@@ -13707,7 +14078,7 @@ table
 
 Use the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.
 
-### Example: Example 79
+### Example: Example 82
 
 Column headColumn headColumn headColumn head
 
@@ -13776,7 +14147,7 @@ table-rounded
 
 ## Hover table
 
-### Example: Example 80
+### Example: Example 83
 
 Head columnHead columnHead columnHead column
 
@@ -13845,7 +14216,7 @@ table
 
 ## Bordered table
 
-### Example: Example 81
+### Example: Example 84
 
 Head columnHead columnHead columnHead column
 
@@ -13914,7 +14285,7 @@ table
 
 ## Striped table
 
-### Example: Example 82
+### Example: Example 85
 
 Head columnHead columnHead columnHead column
 
@@ -13983,7 +14354,7 @@ table
 
 ## Grouped table
 
-### Example: Example 83
+### Example: Example 86
 
 Head columnHead columnHead columnHead column
 
@@ -14352,7 +14723,7 @@ table
 
 ## Sticky table header
 
-### Example: Example 84
+### Example: Example 87
 
 Sticky column headSticky column headSticky column headSticky column head
 
@@ -14469,7 +14840,7 @@ table
 
 ## Sticky table columns
 
-### Example: Example 85
+### Example: Example 88
 
 HeadHeadHeadHeadHeadHeadHeadHeadHead
 
@@ -14651,7 +15022,7 @@ Sticky first columnContent goes hereContent goes hereContent goes hereContent go
 table
 ```
 
-### Example: Example 86
+### Example: Example 89
 
 HeadHeadHeadHeadHeadHeadHeadHeadHead
 
@@ -14837,7 +15208,7 @@ table
 
 Showing table grid lines my be used in data heavy tables also known as DataTables.
 
-### Example: Example 87
+### Example: Example 90
 
 Head columnHead columnHead columnHead column
 
@@ -14906,7 +15277,7 @@ table
 
 ## Table row span
 
-### Example: Example 88
+### Example: Example 91
 
 Head columnHead columnHead columnHead column
 
@@ -14967,7 +15338,7 @@ ColumnColumnColumn
 
 ## Table double row header
 
-### Example: Example 89
+### Example: Example 92
 
 Double row header with filled header
 Scores
@@ -15155,7 +15526,7 @@ Total Profit304292030
 
 ## Condensed table
 
-### Example: Example 90
+### Example: Example 93
 
 Head columnHead columnHead columnHead column
 
@@ -15226,7 +15597,7 @@ table
 
 The table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.
 
-### Example: Example 91
+### Example: Example 94
 
 Head columnHead columnHead columnHead columnHead column
 
@@ -15588,7 +15959,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="1p4s5eqcr5u" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="cl6onbt9khs" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15619,7 +15990,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="0j0f8rkf3nxr" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="w0dn9r0sqod" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15650,7 +16021,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="phxk0ozh86" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="ktx5kiiruh" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15681,7 +16052,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="fxg3knnpo7" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="mmw8jjjduos" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15712,7 +16083,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="qcdzophb7ti" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="n0hqivas03e" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15739,7 +16110,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="58159vdbz17" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="txg4ofmz5t" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15770,7 +16141,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="9j6qmbguczb" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="hrkrstxnmc7" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15801,7 +16172,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="gd6ck2wgoa9" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="5vr584c307j" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15832,7 +16203,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="v6o9q803j2p" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="ipel3pjj6d" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -15859,7 +16230,7 @@ Load more
                     <td class="table-action">
                         <span>
                             <div class="dropdown btn-group">
-                                <button type="button" id="g1ytmipghks" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <button type="button" id="d874h2uqsz" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                     <span class="rioglyph rioglyph-option-vertical">
                                     </span>
                                 </button>
@@ -16138,7 +16509,7 @@ alert-primary
 
 ## Badges
 
-### Example: Example 95
+### Example: Example 98
 
 Unlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.
 Use badges for numeric indicators, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., "New" or "Beta"). Badges are commonly placed on icons, buttons, menus, or navigation elements.
@@ -16418,7 +16789,7 @@ badge-default
 
 ## Callouts
 
-### Example: Example 96
+### Example: Example 99
 
 Callout default
 At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.
@@ -16514,7 +16885,7 @@ callout-default
 
 ## Counter
 
-### Example: Example 97
+### Example: Example 100
 
 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.
 
@@ -16679,7 +17050,7 @@ color-gray
 
 ## Key
 
-### Example: Example 98
+### Example: Example 101
 
 Keys examplePro tip: press m to comment
 Press ctrl + a to select all
@@ -16737,7 +17108,7 @@ Mac specific keys - see DeviceUtils⌘⌥⌃
         <div class="divider-line bg-light" style="width: 100%; height: 1px;">
         </div>
     </div>
-    <label>Mac specific keys - see <a href="#components/deviceUtils">DeviceUtils</a>
+    <label>Mac specific keys - see <a class="" href="#/components/deviceUtils" data-discover="true">DeviceUtils</a>
     </label>
     <p>
         <kbd>⌘</kbd>
@@ -16752,7 +17123,7 @@ Mac specific keys - see DeviceUtils⌘⌥⌃
 
 > Note: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.
 
-### Example: Example 99
+### Example: Example 102
 
 Labels are small, colored indicators used to represent statuses, categories, or highlights in the UI.
 The standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.
@@ -16923,42 +17294,42 @@ muted
         <h5>Labels width icons</h5>
         <div class="display-flex flex-wrap gap-10">
             <div class="label label-default">
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-van">
                 </span>
                 <span>default</span>
             </div>
             <div class="label label-primary">
-                <span class="rioglyph rioglyph-van">
+                <span class="rioglyph rioglyph-businessman">
                 </span>
                 <span>primary</span>
             </div>
             <div class="label label-secondary">
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-trailer">
                 </span>
                 <span>secondary</span>
             </div>
             <div class="label label-info">
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-truck">
                 </span>
                 <span>info</span>
             </div>
             <div class="label label-success">
-                <span class="rioglyph rioglyph-businessman">
+                <span class="rioglyph rioglyph-driver">
                 </span>
                 <span>success</span>
             </div>
             <div class="label label-warning">
-                <span class="rioglyph rioglyph-bus">
+                <span class="rioglyph rioglyph-user">
                 </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-van">
+                <span class="rioglyph rioglyph-car">
                 </span>
                 <span>muted</span>
             </div>
@@ -16969,42 +17340,42 @@ muted
         <div class="display-flex flex-wrap gap-10">
             <div class="label label-default label-filled">
                 <span>default</span>
-                <span class="rioglyph rioglyph-car">
+                <span class="rioglyph rioglyph-businessman">
                 </span>
             </div>
             <div class="label label-primary label-filled">
                 <span>primary</span>
-                <span class="rioglyph rioglyph-car">
+                <span class="rioglyph rioglyph-user">
                 </span>
             </div>
             <div class="label label-secondary label-filled">
                 <span>secondary</span>
-                <span class="rioglyph rioglyph-truck">
+                <span class="rioglyph rioglyph-bus">
                 </span>
             </div>
             <div class="label label-info label-filled">
                 <span>info</span>
-                <span class="rioglyph rioglyph-trailer">
+                <span class="rioglyph rioglyph-user">
                 </span>
             </div>
             <div class="label label-success label-filled">
                 <span>success</span>
-                <span class="rioglyph rioglyph-bus">
+                <span class="rioglyph rioglyph-van">
                 </span>
             </div>
             <div class="label label-warning label-filled">
                 <span>warning</span>
-                <span class="rioglyph rioglyph-bus">
+                <span class="rioglyph rioglyph-user">
                 </span>
             </div>
             <div class="label label-danger label-filled">
                 <span>danger</span>
-                <span class="rioglyph rioglyph-businessman">
+                <span class="rioglyph rioglyph-trailer">
                 </span>
             </div>
             <div class="label label-muted label-filled">
                 <span>muted</span>
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-truck">
                 </span>
             </div>
         </div>
@@ -17046,7 +17417,7 @@ label-default
 
 ## Lists
 
-### Example: Example 100
+### Example: Example 103
 
 Ordered list
 
@@ -17703,7 +18074,7 @@ list-group border rounded
 
 ## Panels
 
-### Example: Example 102
+### Example: Example 105
 
 panel-heading1
 
@@ -17910,7 +18281,7 @@ panel-default
 
 ## Progress bars
 
-### Example: Example 103
+### Example: Example 106
 
 Standard
 
@@ -18132,7 +18503,7 @@ progress
 
 ## Wells
 
-### Example: Example 104
+### Example: Example 107
 
 Hi, my name is well-sm
 
@@ -18175,7 +18546,7 @@ well
 
 ## Forms
 
-### Example: Example 105
+### Example: Example 108
 
 Legend
 
@@ -18314,9 +18685,9 @@ Action
                     <span>Legend</span>
                     <div class="btn-group">
                         <div class="uikit-switch">
-                            <label class="switch-label">
+                            <label class="switch-label uikit-switch">
                                 <input type="checkbox" class="switch-input">
-                                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                                <div class="switch-content" style="color: var(--brand-primary);">
                                     <div class="switch-text" data-on="Horizontal" data-off="Horizontal">
                                     </div>
                                     <div class="switch-handle">
@@ -18646,7 +19017,7 @@ Action
 
 ## Form sized examples
 
-### Example: Example 106
+### Example: Example 109
 
 Size by form-Group class
 form-group-sm
@@ -18941,7 +19312,7 @@ An HTML <fieldset> element is used to group related elements within a form. It i
 
 Allows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.
 
-### Example: Example 107
+### Example: Example 110
 
 A form with fieldsetLorem ipsum
 Dolor Sit amet
@@ -19042,7 +19413,7 @@ Lorem ipsum
 
 ## Input resize
 
-### Example: Example 108
+### Example: Example 111
 
 resize-noneresize-vertical
 
@@ -19061,7 +19432,7 @@ resize-noneresize-vertical
 
 ## Animations
 
-### Example: Example 109
+### Example: Example 112
 
 slide-out
 leftupdownright
@@ -19085,7 +19456,8 @@ Test animationReset
 
 ```tsx
 import { useState } from 'react';
-import classNames from 'classnames';
+
+import classNames from '@rio-cloud/rio-uikit/classNames';
 import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
 import Button from '@rio-cloud/rio-uikit/Button';
 
@@ -19637,7 +20009,7 @@ export default () => {
 
 ## Transition
 
-### Example: Example 110
+### Example: Example 113
 
 Transition properties
 
@@ -19742,7 +20114,7 @@ transition-duration-05
 
 ## Blur
 
-### Example: Example 111
+### Example: Example 114
 
 
 
@@ -19795,7 +20167,7 @@ blur-0
 
 ## Backdrop blur
 
-### Example: Example 112
+### Example: Example 115
 
 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.
 
@@ -19865,7 +20237,7 @@ backdrop-blur-1
 
 ## Aspect ratio
 
-### Example: Example 113
+### Example: Example 116
 
 With fixed width
 
@@ -19952,7 +20324,7 @@ aspect-ratio-1
 
 ## Inset
 
-### Example: Example 114
+### Example: Example 117
 
 inset-0
 
@@ -20023,7 +20395,7 @@ inset-0
 
 ## Helper
 
-### Example: Example 115
+### Example: Example 118
 
 clearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildren-last-border-bottom-nonelast-child-border-bottom-nonechildren-first-margin-top-0first-child-margin-top-0children-last-margin-bottom-0last-child-margin-bottom-0
 
@@ -20052,7 +20424,7 @@ clearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildr
 
 > 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 116
+### Example: Example 119
 
 Rotate 360°
 
@@ -20173,7 +20545,7 @@ rotate-0
 
 > 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 117
+### Example: Example 120
 
 Scale
 
@@ -20270,7 +20642,7 @@ scale-50
 
 > 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 118
+### Example: Example 121
 
 
 
@@ -20311,7 +20683,7 @@ translate-x-50pct
 
 ## Display
 
-### Example: Example 119
+### Example: Example 122
 
 display-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedisplay-none
 
@@ -20340,7 +20712,7 @@ display-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedi
 
 ## Overflow
 
-### Example: Example 120
+### Example: Example 123
 
 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.
 
@@ -20421,7 +20793,7 @@ overflow-auto
 
 ## Visibility
 
-### Example: Example 121
+### Example: Example 124
 
 Visible only at a certain breakpoint
 
@@ -20873,7 +21245,7 @@ visibility-hidden
 
 ## Z-index
 
-### Example: Example 122
+### Example: Example 125