@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/foundations.md

@@ -3,7 +3,7 @@
 *Category:* Foundations
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#foundations
-*Captured:* 2026-03-06T10:42:10.280Z
+*Captured:* 2026-04-20T12:55:25.820Z
 
 You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light
 
@@ -11,10 +11,6 @@ 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
@@ -78,31 +74,31 @@ muted-filled
             </div>
             <div class="btn-toolbar">
                 <button type="button" class="btn btn-default 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-primary btn-icon-only">
-                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                    <span class="rioglyph rioglyph-van" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-secondary btn-icon-only">
-                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                    <span class="rioglyph rioglyph-bus" 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-van" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-success 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-warning 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-danger btn-icon-only">
-                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                    <span class="rioglyph rioglyph-car" aria-hidden="true">
                     </span>
                 </button>
             </div>
@@ -116,17 +112,17 @@ muted-filled
             </div>
             <div class="btn-toolbar">
                 <button type="button" class="btn btn-muted-filled">
-                    <span class="rioglyph rioglyph-van" aria-hidden="true">
+                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                     </span>Muted filled</button>
                 <button type="button" class="btn btn-muted-filled 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-muted">
-                    <span class="rioglyph rioglyph-car" 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-van" aria-hidden="true">
+                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
                     </span>
                 </button>
             </div>
@@ -141,7 +137,7 @@ muted-filled
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-primary btn-link">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
@@ -151,22 +147,22 @@ muted-filled
                 <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-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-link">
-                <span class="rioglyph rioglyph-truck" 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-link">
-                <span class="rioglyph rioglyph-bus" 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-link">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -183,32 +179,32 @@ muted-filled
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-primary">
-                <span class="rioglyph rioglyph-trailer" 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-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" 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-businessman" 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">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <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-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -225,7 +221,7 @@ 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-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
@@ -235,22 +231,22 @@ muted-filled
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info btn-outline">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <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-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-outline">
-                <span class="rioglyph rioglyph-businessman" 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-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -526,37 +522,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-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary btn-xs">
-                <span class="rioglyph rioglyph-trailer" 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 btn-xs">
-                <span class="rioglyph rioglyph-truck" 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-xs">
-                <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 btn-xs">
-                <span class="rioglyph rioglyph-truck" 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-xs">
-                <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-xs">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -571,31 +567,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-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary 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-info btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-success 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-warning btn-xs 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-danger btn-xs btn-icon-only">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -611,17 +607,17 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-sm">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary btn-sm">
-                <span class="rioglyph rioglyph-van" 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 btn-sm">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
@@ -636,7 +632,7 @@ LG icon buttons
                 <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>
@@ -656,31 +652,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-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-primary btn-sm 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-secondary btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-sm 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-success 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-warning btn-sm 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-danger btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -701,32 +697,32 @@ LG icon buttons
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary">
-                <span class="rioglyph rioglyph-truck" 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">
-                <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">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success">
-                <span class="rioglyph rioglyph-trailer" 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">
-                <span class="rioglyph rioglyph-businessman" 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">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -741,15 +737,15 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default 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-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-secondary btn-icon-only">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-icon-only">
@@ -757,15 +753,15 @@ LG icon buttons
                 </span>
             </button>
             <button type="button" class="btn btn-success 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-warning btn-icon-only">
-                <span class="rioglyph rioglyph-bus" 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-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -786,32 +782,32 @@ LG icon buttons
                 <span class="text-capitalize">default</span>
             </button>
             <button type="button" class="btn btn-primary btn-lg">
-                <span class="rioglyph rioglyph-trailer" 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-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>
             <button type="button" class="btn btn-info btn-lg">
-                <span class="rioglyph rioglyph-car" 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-lg">
-                <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-lg">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-lg">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -826,31 +822,31 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-lg 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-primary btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-info btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-success btn-lg 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-warning btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-danger btn-lg btn-icon-only">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -989,7 +985,7 @@ Click me Click me Click me Click me Click me Click 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-user" aria-hidden="true">
+        <span class="rioglyph rioglyph-bus" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
@@ -999,22 +995,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-user" aria-hidden="true">
+        <span class="rioglyph rioglyph-car" 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-user" aria-hidden="true">
+        <span class="rioglyph rioglyph-truck" 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-van" 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-bus" aria-hidden="true">
+        <span class="rioglyph rioglyph-van" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
@@ -2595,7 +2591,7 @@ Item
             <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">
+            <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
                 <div>
                     <span class="label label-info label-condensed label-filled">Note</span>
                 </div>
@@ -2762,17 +2758,17 @@ Colored icons
             <hr class="margin-top-10 border-color-light">
         </div>
         <div class="display-flex flex-wrap gap-10">
-            <span class="rioglyph rioglyph-businessman text-color-primary text-size-h1">
+            <span class="rioglyph rioglyph-van text-color-primary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-businessman text-color-secondary text-size-h1">
+            <span class="rioglyph rioglyph-bus text-color-secondary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-car text-color-info text-size-h1">
+            <span class="rioglyph rioglyph-driver text-color-info text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-van text-color-success text-size-h1">
+            <span class="rioglyph rioglyph-car text-color-success text-size-h1">
             </span>
             <span class="rioglyph rioglyph-driver text-color-warning text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-user text-color-danger text-size-h1">
+            <span class="rioglyph rioglyph-driver text-color-danger text-size-h1">
             </span>
         </div>
     </div>
@@ -3304,17 +3300,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-bus rioglyph-filled text-color-primary text-size-h1">
+            <span class="rioglyph rioglyph-driver rioglyph-filled text-color-primary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-trailer rioglyph-filled text-color-secondary text-size-h1">
+            <span class="rioglyph rioglyph-driver 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-van rioglyph-filled text-color-success text-size-h1">
+            <span class="rioglyph rioglyph-driver rioglyph-filled text-color-success text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-van rioglyph-filled text-color-warning text-size-h1">
+            <span class="rioglyph rioglyph-trailer rioglyph-filled text-color-warning text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-truck rioglyph-filled text-color-danger text-size-h1">
+            <span class="rioglyph rioglyph-businessman rioglyph-filled text-color-danger text-size-h1">
             </span>
         </div>
     </div>
@@ -3574,6 +3570,7 @@ rioglyph rioglyph-battery-level-empty
 rioglyph rioglyph-battery-level-full
 rioglyph rioglyph-battery-level-low
 rioglyph rioglyph-beacon
+rioglyph rioglyph-big-bag
 rioglyph rioglyph-book
 rioglyph rioglyph-bookable-poi
 rioglyph rioglyph-bookmark-square
@@ -3589,6 +3586,7 @@ rioglyph rioglyph-branch-vertical
 rioglyph rioglyph-broadcast
 rioglyph rioglyph-building
 rioglyph rioglyph-bulb
+rioglyph rioglyph-bulk-container
 rioglyph rioglyph-bus-baseline
 rioglyph rioglyph-bus-breakdown
 rioglyph rioglyph-bus
@@ -3635,6 +3633,7 @@ rioglyph rioglyph-code-braces
 rioglyph rioglyph-code-brackets
 rioglyph rioglyph-coffee
 rioglyph rioglyph-cog
+rioglyph rioglyph-coil
 rioglyph rioglyph-color-swatch
 rioglyph rioglyph-comment
 rioglyph rioglyph-compare
@@ -3863,6 +3862,7 @@ rioglyph rioglyph-road
 rioglyph rioglyph-robot
 rioglyph rioglyph-rocket
 rioglyph rioglyph-role-management
+rioglyph rioglyph-roll-container
 rioglyph rioglyph-route-option
 rioglyph rioglyph-route-view
 rioglyph rioglyph-route
@@ -3882,6 +3882,7 @@ rioglyph rioglyph-settings
 rioglyph rioglyph-share-alt
 rioglyph rioglyph-share-nodes
 rioglyph rioglyph-share
+rioglyph rioglyph-shelve-empty
 rioglyph rioglyph-shelve
 rioglyph rioglyph-ship
 rioglyph rioglyph-shopping-bag
@@ -3919,6 +3920,7 @@ rioglyph rioglyph-status-driving
 rioglyph rioglyph-status-resting
 rioglyph rioglyph-status-working
 rioglyph rioglyph-steering-wheel
+rioglyph rioglyph-stillage
 rioglyph rioglyph-stopover
 rioglyph rioglyph-support
 rioglyph rioglyph-table-view
@@ -4206,6 +4208,11 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-beacon </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-big-bag   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-big-bag </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-book   text-size-h3 margin-right-10">
         </span>
@@ -4281,6 +4288,11 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-bulb </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-bulk-container   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-bulk-container </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-bus-baseline   text-size-h3 margin-right-10">
         </span>
@@ -4511,6 +4523,11 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-cog </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-coil   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-coil </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-color-swatch   text-size-h3 margin-right-10">
         </span>
@@ -5651,6 +5668,11 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-role-management </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-roll-container   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-roll-container </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-route-option   text-size-h3 margin-right-10">
         </span>
@@ -5746,6 +5768,11 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-share </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-shelve-empty   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-shelve-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-shelve   text-size-h3 margin-right-10">
         </span>
@@ -5931,6 +5958,11 @@ rioglyph rioglyph-xmas-santa
         </span>
         <span class="text-light user-select-all">rioglyph rioglyph-steering-wheel </span>
     </div>
+    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
+        <span class="rioglyph rioglyph-icon-off rioglyph-stillage   text-size-h3 margin-right-10">
+        </span>
+        <span class="text-light user-select-all">rioglyph rioglyph-stillage </span>
+    </div>
     <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
         <span class="rioglyph rioglyph-icon-off rioglyph-stopover   text-size-h3 margin-right-10">
         </span>
@@ -6738,8 +6770,6 @@ 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.
@@ -6842,8 +6872,6 @@ 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
@@ -7322,8 +7350,6 @@ word-break-all
 
 ## Cols
 
-> 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
@@ -7592,8 +7618,6 @@ 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.
-
 ### Example: Example 49
 
 container
@@ -8749,8 +8773,6 @@ position-relative
 
 ## Gap
 
-> 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
@@ -8867,8 +8889,6 @@ gap-0
 
 ## Space
 
-> Note: For flex or grid solutions please use gap instead.
-
 ### Example: Example 65
 
 space-y-0
@@ -10327,7 +10347,7 @@ fit-content This text fits naturally within the box.
 #### HTML (html)
 
 ```html
-<div class="display-flex gap-20 bg-lightest padding-20 rounded" style="max-width: 520px;">
+<div class="display-flex flex-column-xs gap-20 bg-lightest padding-20 rounded" style="max-width: 520px;">
     <div class="bg-info padding-10 rounded min-width-max-content border">
         <b>max-content</b>
         <p class="max-width-150">This_is_a_really_long_word_that_will_not_break.</p>
@@ -11036,11 +11056,13 @@ Milan → Zurich LD-60018 14:05 Delivered
                             <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 class="select-toggle-actions">
+                                <span class="clearButton hide pointer-events-none">
+                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                    </span>
+                                </span>
+                                <span class="caret">
                                 </span>
-                            </span>
-                            <span class="caret">
                             </span>
                         </button>
                         <ul class="dropdown-menu" role="menu">
@@ -11273,2461 +11295,47 @@ Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu
 nav
 ```
 
-## Table
-
-> See also our Table components like TableToolbar, TableSearch,TableViewToggles, TableCardsSorting, and TableSettingsDialog. For a more advanced table demo checkout our demo service
-
-## Common table style
-
-### Example: Example 80
+## Alerts
 
-Label New Action
+### Example: Lorem ipsum
 
-‹ March 2026 ›
-Su Mo Tu We Th Fr Sa
+Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+See More
 
-22 23 24 25 26 27 28
-1 2 3 4 5 6 7
-8 9 10 11 12 13 14
-15 16 17 18 19 20 21
-22 23 24 25 26 27 28
-29 30 31 1 2 3 4
+Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+See More
 
-12:00 AM
+Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+See More
 
-Label
+Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+See More
 
-Head column Head column Head column Head column
+Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+See More
 
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
+Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+See More
 
 #### HTML (html)
 
 ```html
-<div>
-    <div class="table-toolbar">
-        <div class="table-toolbar-container">
-            <div class="table-toolbar-group-left">
-                <div class="table-toolbar-column">
-                    <label class="table-toolbar-label">Label</label>
-                    <div class="btn-toolbar table-btn-toolbar">
-                        <button type="button" class="btn btn-primary btn-component" tabindex="0">
-                            <span class="rioglyph rioglyph-plus">
-                            </span>New</button>
-                        <button type="button" class="btn btn-default btn-component" tabindex="0">Action</button>
-                    </div>
-                </div>
-                <div class="table-toolbar-column">
-                    <div class="min-width-200">
-                        <div class="rdt DatePicker form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">
-                                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
-                                    </span>
-                                </span>
-                                <div class="ClearableInput input-group">
-                                    <input type="text" class="form-control" placeholder="Select date" value="">
-                                </div>
-                            </div>
-                            <div class="rdtPicker">
-                                <div class="rdtDays">
-                                    <table>
-                                        <thead>
-                                            <tr>
-                                                <th class="rdtPrev">
-                                                    <span>‹</span>
-                                                </th>
-                                                <th class="rdtSwitch" colspan="5" data-value="2">March 2026</th>
-                                                <th class="rdtNext">
-                                                    <span>›</span>
-                                                </th>
-                                            </tr>
-                                            <tr>
-                                                <th class="dow">Su</th>
-                                                <th class="dow">Mo</th>
-                                                <th class="dow">Tu</th>
-                                                <th class="dow">We</th>
-                                                <th class="dow">Th</th>
-                                                <th class="dow">Fr</th>
-                                                <th class="dow">Sa</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td data-value="22" data-month="1" data-year="2026" class="rdtDay rdtOld">22</td>
-                                                <td data-value="23" data-month="1" data-year="2026" class="rdtDay rdtOld">23</td>
-                                                <td data-value="24" data-month="1" data-year="2026" class="rdtDay rdtOld">24</td>
-                                                <td data-value="25" data-month="1" data-year="2026" class="rdtDay rdtOld">25</td>
-                                                <td data-value="26" data-month="1" data-year="2026" class="rdtDay rdtOld">26</td>
-                                                <td data-value="27" data-month="1" data-year="2026" class="rdtDay rdtOld">27</td>
-                                                <td data-value="28" data-month="1" data-year="2026" class="rdtDay rdtOld">28</td>
-                                            </tr>
-                                            <tr>
-                                                <td data-value="1" data-month="2" data-year="2026" class="rdtDay">1</td>
-                                                <td data-value="2" data-month="2" data-year="2026" class="rdtDay">2</td>
-                                                <td data-value="3" data-month="2" data-year="2026" class="rdtDay">3</td>
-                                                <td data-value="4" data-month="2" data-year="2026" class="rdtDay">4</td>
-                                                <td data-value="5" data-month="2" data-year="2026" class="rdtDay">5</td>
-                                                <td data-value="6" data-month="2" data-year="2026" class="rdtDay rdtToday">6</td>
-                                                <td data-value="7" data-month="2" data-year="2026" class="rdtDay">7</td>
-                                            </tr>
-                                            <tr>
-                                                <td data-value="8" data-month="2" data-year="2026" class="rdtDay">8</td>
-                                                <td data-value="9" data-month="2" data-year="2026" class="rdtDay">9</td>
-                                                <td data-value="10" data-month="2" data-year="2026" class="rdtDay">10</td>
-                                                <td data-value="11" data-month="2" data-year="2026" class="rdtDay">11</td>
-                                                <td data-value="12" data-month="2" data-year="2026" class="rdtDay">12</td>
-                                                <td data-value="13" data-month="2" data-year="2026" class="rdtDay">13</td>
-                                                <td data-value="14" data-month="2" data-year="2026" class="rdtDay">14</td>
-                                            </tr>
-                                            <tr>
-                                                <td data-value="15" data-month="2" data-year="2026" class="rdtDay">15</td>
-                                                <td data-value="16" data-month="2" data-year="2026" class="rdtDay">16</td>
-                                                <td data-value="17" data-month="2" data-year="2026" class="rdtDay">17</td>
-                                                <td data-value="18" data-month="2" data-year="2026" class="rdtDay">18</td>
-                                                <td data-value="19" data-month="2" data-year="2026" class="rdtDay">19</td>
-                                                <td data-value="20" data-month="2" data-year="2026" class="rdtDay">20</td>
-                                                <td data-value="21" data-month="2" data-year="2026" class="rdtDay">21</td>
-                                            </tr>
-                                            <tr>
-                                                <td data-value="22" data-month="2" data-year="2026" class="rdtDay">22</td>
-                                                <td data-value="23" data-month="2" data-year="2026" class="rdtDay">23</td>
-                                                <td data-value="24" data-month="2" data-year="2026" class="rdtDay">24</td>
-                                                <td data-value="25" data-month="2" data-year="2026" class="rdtDay">25</td>
-                                                <td data-value="26" data-month="2" data-year="2026" class="rdtDay">26</td>
-                                                <td data-value="27" data-month="2" data-year="2026" class="rdtDay">27</td>
-                                                <td data-value="28" data-month="2" data-year="2026" class="rdtDay">28</td>
-                                            </tr>
-                                            <tr>
-                                                <td data-value="29" data-month="2" data-year="2026" class="rdtDay">29</td>
-                                                <td data-value="30" data-month="2" data-year="2026" class="rdtDay">30</td>
-                                                <td data-value="31" data-month="2" data-year="2026" class="rdtDay">31</td>
-                                                <td data-value="1" data-month="3" data-year="2026" class="rdtDay rdtNew">1</td>
-                                                <td data-value="2" data-month="3" data-year="2026" class="rdtDay rdtNew">2</td>
-                                                <td data-value="3" data-month="3" data-year="2026" class="rdtDay rdtNew">3</td>
-                                                <td data-value="4" data-month="3" data-year="2026" class="rdtDay rdtNew">4</td>
-                                            </tr>
-                                        </tbody>
-                                        <tfoot>
-                                            <tr>
-                                                <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
-                                            </tr>
-                                        </tfoot>
-                                    </table>
-                                </div>
-                            </div>
-                        </div>
-                    </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 type="text" placeholder="Search..." class="form-control">
-                            <span class="clearButton hide">
-                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
-                                </span>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                <div class="table-toolbar-column table-toolbar-column-spacer">
-                    <label class="table-toolbar-label">Label</label>
-                    <div class="btn-toolbar">
-                        <div class="TableViewToggles btn-group display-flex flex-row">
-                            <button class="btn btn-default btn-icon-only active" type="button">
-                                <span class="rioglyph rioglyph-table-view">
-                                </span>
-                            </button>
-                            <button class="btn btn-default btn-icon-only" type="button">
-                                <span class="rioglyph rioglyph-th-list">
-                                </span>
-                            </button>
-                            <button class="btn btn-default btn-icon-only" type="button">
-                                <span class="rioglyph rioglyph-split-view">
-                                </span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="table-toolbar-column">
-                    <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
-                        <span class="rioglyph rioglyph-settings">
+<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-3-md gap-20">
+    <div class="alert alert-dismissible alert-primary" data-capture-callout="true">
+        <button type="button" class="btn btn-icon-only close" data-dismiss="alert">
+            <span class="rioglyph rioglyph-remove">
+            </span>
+        </button>
+        <div class="display-flex gap-10">
+            <span class="text-color-primary text-size-h4 rioglyph rioglyph-info-sign">
+            </span>
+            <div>
+                <strong class="text-size-16">Lorem ipsum</strong>
+                <div class="margin-y-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
+                <div class="text-medium text-uppercase text-size-12">
+                    <a href="#" class="alert-link">See More<span class="text-color-primary margin-left-3 rioglyph rioglyph-new-window">
                         </span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="table-responsive">
-        <table class="table table-hover table-head-filled table-bordered">
-            <thead>
-                <tr>
-                    <th class="user-select-none sort-column" title="">Head column</th>
-                    <th class="user-select-none sort-column" title="">Head column</th>
-                    <th class="user-select-none sort-column" title="">Head column</th>
-                    <th class="user-select-none sort-column" title="">Head column</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr class="active">
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr class="info">
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr class="success">
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr class="danger">
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr class="warning">
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Table head
-
-### Example: Default table head
-
-Default table head
-
-Column head Column head Column head Column head
-
-Column Column Column Column
-
-Table head filled
-
-Column head Column head Column head Column head
-
-Column Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="margin-bottom-20">
-    <div class="description-headline">
-        <h4 class="margin-top-0">Default table head</h4>
-    </div>
-</div>
-<div class="table-responsive">
-    <table class="table margin-bottom-50">
-        <thead>
-            <tr>
-                <th>Column head</th>
-                <th>Column head</th>
-                <th>Column head</th>
-                <th>Column head</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-<div class="margin-bottom-20">
-    <div class="description-headline">
-        <h4 class="margin-top-0">Table head filled</h4>
-    </div>
-</div>
-<div class="table-responsive">
-    <table class="table table-head-filled">
-        <thead>
-            <tr>
-                <th>Column head</th>
-                <th>Column head</th>
-                <th>Column head</th>
-                <th>Column head</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Rounded 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 82
-
-Column head Column head Column head Column head
-
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="bg-white rounded border shadow-none padding-0 margin-y-25 table-responsive">
-    <table class="table table-head-filled table-rounded">
-        <thead>
-            <tr>
-                <th>Column head</th>
-                <th>Column head</th>
-                <th>Column head</th>
-                <th>Column head</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table-rounded
-```
-
-## Hover table
-
-### Example: Example 83
-
-Head column Head column Head column Head column
-
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="table-responsive">
-    <table class="table table-head-filled table-hover">
-        <thead>
-            <tr>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Bordered table
-
-### Example: Example 84
-
-Head column Head column Head column Head column
-
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="table-responsive">
-    <table class="table table-head-filled table-bordered">
-        <thead>
-            <tr>
-                <th class="user-select-none sort-column" title="">Head column</th>
-                <th class="user-select-none sort-column" title="">Head column</th>
-                <th class="user-select-none sort-column" title="">Head column</th>
-                <th class="user-select-none sort-column" title="">Head column</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Striped table
-
-### Example: Example 85
-
-Head column Head column Head column Head column
-
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="table-responsive">
-    <table class="table table-head-filled table-striped">
-        <thead>
-            <tr>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Grouped table
-
-### Example: Example 86
-
-Head column Head column Head column Head column
-
-CompactRow column CompactRow column CompactRow column CompactRow column
-CompactRow column CompactRow column CompactRow column CompactRow column
-CompactRow column CompactRow column CompactRow column CompactRow column
-CompactRow column CompactRow column CompactRow column CompactRow column
-CompactRow column CompactRow column CompactRow column CompactRow column
-CompactRow column CompactRow column CompactRow column CompactRow column
-ExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column
-ExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column
-ExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column
-CompactRow column CompactRow column CompactRow column CompactRow column
-CompactRow column CompactRow column CompactRow column CompactRow column
-
-#### React (tsx)
-
-```tsx
-import React, { useState } from 'react';
-
-const columns = [...Array(4)];
-
-const rowData = Array.from({ length: 8 }, () => ({
-    id: crypto.randomUUID(),
-}));
-
-const extendedRowData = Array.from({ length: 3 }, () => ({
-    id: crypto.randomUUID(),
-}));
-
-const TableGroupedExample = () => {
-    const [expandedRows, setExpandedRows] = useState<string[]>([rowData[5].id]);
-
-    const handleToggleRow = (id: string) => {
-        if (expandedRows.includes(id)) {
-            setExpandedRows(expandedRows.filter(expanded => expanded !== id));
-        } else {
-            setExpandedRows([...expandedRows, id]);
-        }
-    };
-
-    return (
-        <div className='table-responsive'>
-            <table className='table table-head-filled'>
-                <thead>
-                    <tr>
-                        {columns.map(() => (
-                            <th key={crypto.randomUUID()}>Head column</th>
-                        ))}
-                        <th className='table-action' />
-                    </tr>
-                </thead>
-                <tbody>
-                    {rowData.map(row => {
-                        const isExpanded = expandedRows.includes(row.id);
-                        return (
-                            <React.Fragment key={row.id}>
-                                <tr className='compactRow'>
-                                    {columns.map(() => (
-                                        <td key={crypto.randomUUID()}>
-                                            <span>CompactRow column</span>
-                                        </td>
-                                    ))}
-                                    <td className='table-action' onClick={() => handleToggleRow(row.id)}>
-                                        <span>
-                                            <span className='btn btn-muted btn-icon-only'>
-                                                <span
-                                                    className={`rioglyph ${
-                                                        isExpanded ? 'rioglyph-chevron-up' : 'rioglyph-chevron-down'
-                                                    }`}
-                                                />
-                                            </span>
-                                        </span>
-                                    </td>
-                                </tr>
-
-                                {isExpanded &&
-                                    extendedRowData.map(() => (
-                                        <tr className='extendedRow' key={crypto.randomUUID()}>
-                                            {columns.map(() => (
-                                                <td key={crypto.randomUUID()}>
-                                                    <span>ExtendedRow column</span>
-                                                </td>
-                                            ))}
-                                            <td className='table-action' />
-                                        </tr>
-                                    ))}
-                            </React.Fragment>
-                        );
-                    })}
-                </tbody>
-            </table>
-        </div>
-    );
-};
-
-export default TableGroupedExample;
-```
-
-#### HTML (html)
-
-```html
-<div class="table-responsive">
-    <table class="table table-head-filled">
-        <thead>
-            <tr>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th class="table-action">
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr class="compactRow">
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td class="table-action">
-                    <span>
-                        <span class="btn btn-muted btn-icon-only">
-                            <span class="rioglyph rioglyph-chevron-down">
-                            </span>
-                        </span>
-                    </span>
-                </td>
-            </tr>
-            <tr class="compactRow">
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td class="table-action">
-                    <span>
-                        <span class="btn btn-muted btn-icon-only">
-                            <span class="rioglyph rioglyph-chevron-down">
-                            </span>
-                        </span>
-                    </span>
-                </td>
-            </tr>
-            <tr class="compactRow">
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td class="table-action">
-                    <span>
-                        <span class="btn btn-muted btn-icon-only">
-                            <span class="rioglyph rioglyph-chevron-down">
-                            </span>
-                        </span>
-                    </span>
-                </td>
-            </tr>
-            <tr class="compactRow">
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td class="table-action">
-                    <span>
-                        <span class="btn btn-muted btn-icon-only">
-                            <span class="rioglyph rioglyph-chevron-down">
-                            </span>
-                        </span>
-                    </span>
-                </td>
-            </tr>
-            <tr class="compactRow">
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td class="table-action">
-                    <span>
-                        <span class="btn btn-muted btn-icon-only">
-                            <span class="rioglyph rioglyph-chevron-down">
-                            </span>
-                        </span>
-                    </span>
-                </td>
-            </tr>
-            <tr class="compactRow">
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td class="table-action">
-                    <span>
-                        <span class="btn btn-muted btn-icon-only">
-                            <span class="rioglyph rioglyph-chevron-up">
-                            </span>
-                        </span>
-                    </span>
-                </td>
-            </tr>
-            <tr class="extendedRow">
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td class="table-action">
-                </td>
-            </tr>
-            <tr class="extendedRow">
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td class="table-action">
-                </td>
-            </tr>
-            <tr class="extendedRow">
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td>
-                    <span>ExtendedRow column</span>
-                </td>
-                <td class="table-action">
-                </td>
-            </tr>
-            <tr class="compactRow">
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td class="table-action">
-                    <span>
-                        <span class="btn btn-muted btn-icon-only">
-                            <span class="rioglyph rioglyph-chevron-down">
-                            </span>
-                        </span>
-                    </span>
-                </td>
-            </tr>
-            <tr class="compactRow">
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td>
-                    <span>CompactRow column</span>
-                </td>
-                <td class="table-action">
-                    <span>
-                        <span class="btn btn-muted btn-icon-only">
-                            <span class="rioglyph rioglyph-chevron-down">
-                            </span>
-                        </span>
-                    </span>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Sticky table header
-
-### Example: Example 87
-
-Sticky column head Sticky column head Sticky column head Sticky column head
-
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="height-300 overflow-y-scroll">
-    <table class="table table-head-filled table-sticky-in-container">
-        <thead>
-            <tr>
-                <th class="user-select-none sort-column" title="">Sticky column head</th>
-                <th class="user-select-none sort-column" title="">Sticky column head</th>
-                <th class="user-select-none sort-column" title="">Sticky column head</th>
-                <th class="user-select-none sort-column" title="">Sticky column head</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Sticky table columns
-
-### Example: Example 88
-
-Head Head Head Head Head Head Head Head Head
-
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
-
-#### HTML (html)
-
-```html
-<div class="table-responsive height-300 overflow-y-scroll">
-    <table class="table table-head-filled table-sticky-in-container table-sticky-column-first">
-        <thead>
-            <tr>
-                <th class="user-select-none sort-column" title="">
-                </th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Sticky first column</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-### Example: Example 89
-
-Head Head Head Head Head Head Head Head Head
-
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
-
-#### HTML (html)
-
-```html
-<div class="table-responsive height-300 overflow-y-scroll">
-    <table class="table table-head-filled table-sticky-in-container table-sticky-column-last">
-        <thead>
-            <tr>
-                <th class="user-select-none sort-column" title="">
-                </th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-                <th class="user-select-none sort-column" title="">Head</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-            <tr>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Content goes here</td>
-                <td class="text-nowrap">Sticky last column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Table grid lines
-
-Showing table grid lines my be used in data heavy tables also known as DataTables.
-
-### Example: Example 90
-
-Head column Head column Head column Head column
-
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="table-responsive">
-    <table class="table table-head-filled table-grid-lines">
-        <thead>
-            <tr>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Table row span
-
-### Example: Example 91
-
-Head column Head column Head column Head column
-
-Column Column Column Column
-Column Column Column
-Column Column Column Column
-Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="table-responsive rounded border">
-    <table class="table table-head-filled table-grid-lines table-rounded">
-        <thead>
-            <tr>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td rowspan="2">Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td rowspan="2">Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-## Table double row header
-
-### Example: Example 92
-
-Double row header with filled header
-Scores
-Head column Head column Head column Head column
-
-Column Column Column Column
-Column Column Column Column
-
-Double row header with border and footer
-Years
-2021 2022 2023 2024 2025
-
-Product 1 Income 50 70 80 90 100
-Expense 37 63 70 82 91
-Profit 13 7 10 8 9
-
-Product 2 Income 50 67 79 90 54
-Expense 33 70 50 79 30
-Profit 17 -3 19 12 21
-
-Total Profit 30 4 29 20 30
-
-#### HTML (html)
-
-```html
-<div>
-    <h5 class="margin-top-0">Double row header with filled header</h5>
-    <div class="table-responsive">
-        <table class="table table-head-filled">
-            <thead>
-                <tr>
-                    <th class="padding-y-10 bg-white border-none">
-                    </th>
-                    <th class="padding-y-10 bg-white border-none">
-                    </th>
-                    <th colspan="2" class="padding-y-10 text-center border-none">Scores</th>
-                </tr>
-                <tr>
-                    <th>Head column</th>
-                    <th>Head column</th>
-                    <th>Head column</th>
-                    <th>Head column</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-                <tr>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                    <td>Column</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
-    </div>
-    <h5>Double row header with border and footer</h5>
-    <div class="table-responsive rounded border">
-        <table class="table table-head-filled table-grid-lines table-rounded">
-            <colgroup>
-                <col style="width: 120px;">
-                <col style="width: 120px;">
-                <col>
-                <col>
-            </colgroup>
-            <thead>
-                <tr>
-                    <th colspan="2" class="bg-white border-width-1 border-right-only">
-                    </th>
-                    <th colspan="5" class="text-center border-none">Years</th>
-                </tr>
-                <tr>
-                    <th colspan="2" class="bg-white border-top-none">
-                    </th>
-                    <th class="text-center">2021</th>
-                    <th class="text-center">2022</th>
-                    <th class="text-center">2023</th>
-                    <th class="text-center">2024</th>
-                    <th class="text-center">2025</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td rowspan="3">Product 1</td>
-                    <td>Income</td>
-                    <td class="text-right">50</td>
-                    <td class="text-right">70</td>
-                    <td class="text-right">80</td>
-                    <td class="text-right">90</td>
-                    <td class="text-right">100</td>
-                </tr>
-                <tr>
-                    <td>Expense</td>
-                    <td class="text-right">37</td>
-                    <td class="text-right">63</td>
-                    <td class="text-right">70</td>
-                    <td class="text-right">82</td>
-                    <td class="text-right">91</td>
-                </tr>
-                <tr>
-                    <td>Profit</td>
-                    <td class="text-right">13</td>
-                    <td class="text-right">7</td>
-                    <td class="text-right">10</td>
-                    <td class="text-right">8</td>
-                    <td class="text-right">9</td>
-                </tr>
-                <tr>
-                    <td colspan="7" class="padding-0" height="1">
-                    </td>
-                </tr>
-                <tr>
-                    <td rowspan="3">Product 2</td>
-                    <td>Income</td>
-                    <td class="text-right">50</td>
-                    <td class="text-right">67</td>
-                    <td class="text-right">79</td>
-                    <td class="text-right">90</td>
-                    <td class="text-right">54</td>
-                </tr>
-                <tr>
-                    <td>Expense</td>
-                    <td class="text-right">33</td>
-                    <td class="text-right">70</td>
-                    <td class="text-right">50</td>
-                    <td class="text-right">79</td>
-                    <td class="text-right">30</td>
-                </tr>
-                <tr>
-                    <td>Profit</td>
-                    <td class="text-right">17</td>
-                    <td class="text-right">-3</td>
-                    <td class="text-right">19</td>
-                    <td class="text-right">12</td>
-                    <td class="text-right">21</td>
-                </tr>
-            </tbody>
-            <tfoot class="text-bold">
-                <tr>
-                    <td colspan="7" class="bg-lighter padding-0" height="2">
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">Total Profit</td>
-                    <td class="text-right">30</td>
-                    <td class="text-right">4</td>
-                    <td class="text-right">29</td>
-                    <td class="text-right">20</td>
-                    <td class="text-right">30</td>
-                </tr>
-            </tfoot>
-        </table>
-    </div>
-</div>
-```
-
-## Condensed table
-
-### Example: Example 93
-
-Head column Head column Head column Head column
-
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-Column Column Column Column
-
-#### HTML (html)
-
-```html
-<div class="table-responsive">
-    <table class="table table-head-filled table-condensed">
-        <thead>
-            <tr>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-                <th>Head column</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-            <tr>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-                <td>Column</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Fixed table layout
-
-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 94
-
-Head column Head column Head column Head column Head column
-
-Every column has a different length of content but the width of each colum is always the same
-Every column has a different length of content but the width of each colum is always the same
-Every column has a different length of content but the width of each colum is always the same
-Every column has a different length of content but the width of each colum is always the same
-
-#### HTML (html)
-
-```html
-<table class="table table-head-filled table-layout-fixed">
-    <thead>
-        <tr>
-            <th class="ellipsis-1">Head column</th>
-            <th class="ellipsis-1">Head column</th>
-            <th class="ellipsis-1">Head column</th>
-            <th class="ellipsis-1">Head column</th>
-            <th class="ellipsis-1">Head column</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>Every</td>
-            <td>column has a different</td>
-            <td>length of content</td>
-            <td>but the width of each colum is always</td>
-            <td>the same</td>
-        </tr>
-        <tr>
-            <td>Every</td>
-            <td>column has a different</td>
-            <td>length of content</td>
-            <td>but the width of each colum is always</td>
-            <td>the same</td>
-        </tr>
-        <tr>
-            <td>Every</td>
-            <td>column has a different</td>
-            <td>length of content</td>
-            <td>but the width of each colum is always</td>
-            <td>the same</td>
-        </tr>
-        <tr>
-            <td>Every</td>
-            <td>column has a different</td>
-            <td>length of content</td>
-            <td>but the width of each colum is always</td>
-            <td>the same</td>
-        </tr>
-    </tbody>
-</table>
-```
-
-#### Classes (css)
-
-```css
-table
-```
-
-## Responsive tables
-
-Tables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.
-
-There are some options to tackle this problem
-
-- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.
-- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.
-- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.
-- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the "..." at the end.
-
-## Table cards
-
-### Example: Label
-
-New Button
-
-Filter
-
-Label
-
-Id Id
-Name
-VIN
-Status
-Duration
-
-Id Name VIN Status Duration
-
-233 Ipsum No data Inactive 5h 15m
-
-456 No data 456 Active 4h 55m
-
-878 No data 878 Active 9h 10m
-
-895 No data 895 Active 8h 45m
-
-978 Ipsum No data Inactive 6h 35m
-
-2345 Lorem 2345 Active 11h 50m
-
-2445 No data 2445 Active 7h 25m
-
-3456 No data 3456 Active 12h 00m
-
-4567 No data 4567 Active 10h 20m
-
-7354 Lorem 7354 Active 10h 30m
-
-70 / 100
-
-Load more
-
-#### HTML (html)
-
-```html
-<div>
-    <div class="table-toolbar">
-        <div class="table-toolbar-container">
-            <div class="table-toolbar-group-left">
-                <div class="table-toolbar-column">
-                    <div class="display-grid grid-cols-3 display-flex-ls btn-toolbar">
-                        <button type="button" class="btn btn-primary btn-component" tabindex="0">
-                            <span class="rioglyph rioglyph-plus">
-                            </span>New</button>
-                        <div class="dropdown btn-group">
-                            <button type="button" id="myActionButton" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Button<span class="caret">
-                                </span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="table-toolbar-group-right">
-                <div class="table-toolbar-column">
-                    <button type="button" class="btn btn-default btn-component" tabindex="0">
-                        <span class="rioglyph rioglyph-filter">
-                        </span>Filter</button>
-                </div>
-                <div class="table-toolbar-column table-toolbar-column-spacer">
-                    <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 class="table-toolbar-column display-flex flex-row align-items-end gap-15">
-                    <div>
-                        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 table-toolbar-label">Label</div>
-                        <div class="TableViewToggles btn-group display-flex flex-row">
-                            <button class="btn btn-default btn-icon-only" type="button">
-                                <span class="rioglyph rioglyph-table-view">
-                                </span>
-                            </button>
-                            <button class="btn btn-default btn-icon-only" type="button">
-                                <span class="rioglyph rioglyph-th-list">
-                                </span>
-                            </button>
-                            <button class="btn btn-default btn-icon-only active" type="button">
-                                <span class="rioglyph rioglyph-split-view">
-                                </span>
-                            </button>
-                        </div>
-                    </div>
-                    <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
-                        <span class="rioglyph rioglyph-settings">
-                        </span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="table-toolbar-cards-sorting btn-toolbar">
-        <div class="btn-group margin-left-0">
-            <button type="button" class="btn btn-default btn-toggle active btn-component btn-icon-only" tabindex="0">
-                <span class="rioglyph rioglyph-sort-by-attributes-alt">
-                </span>
-            </button>
-            <button type="button" class="btn btn-default btn-toggle btn-component btn-icon-only" tabindex="0">
-                <span class="rioglyph rioglyph-sort-by-attributes">
-                </span>
-            </button>
-        </div>
-        <div class="btn-group">
-            <div class="select dropdown dropup">
-                <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
-                    <span class="selected-option-text">Id</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="vehicleId" data-item-index="0">
-                            <span class="selected-option-dropdown-item">Id</span>
-                            <input type="hidden" value="vehicleId">
-                        </a>
-                    </li>
-                    <li class="" role="listitem">
-                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="name" data-item-index="1">
-                            <span class="selected-option-dropdown-item">Name</span>
-                            <input type="hidden" value="name">
-                        </a>
-                    </li>
-                    <li class="" role="listitem">
-                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="vin" data-item-index="2">
-                            <span class="selected-option-dropdown-item">VIN</span>
-                            <input type="hidden" value="vin">
-                        </a>
-                    </li>
-                    <li class="" role="listitem">
-                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="status" data-item-index="3">
-                            <span class="selected-option-dropdown-item">Status</span>
-                            <input type="hidden" value="status">
-                        </a>
-                    </li>
-                    <li class="" role="listitem">
-                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="duration" data-item-index="4">
-                            <span class="selected-option-dropdown-item">Duration</span>
-                            <input type="hidden" value="duration">
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    <div class="table-responsive">
-        <table class="table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled table-cards table-multi-cards">
-            <colgroup>
-                <col class="" style="min-width: 60px; width: 60px;">
-                <col class="" style="min-width: 200px; width: 200px;">
-                <col class="">
-                <col class="">
-                <col class="">
-                <col class="table-action">
-            </colgroup>
-            <thead>
-                <tr>
-                    <th class="user-select-none sort-column" data-field="vehicleId" data-sortby="vehicleId" title="Id">
-                        <span>
-                            <span class="sort-arrows sort-asc">
-                            </span>
-                            <span>Id</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="name" data-sortby="name" title="Name">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>Name</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="vin" data-sortby="vin" title="VIN">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>VIN</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="status" data-sortby="status" title="Status">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>Status</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="duration" data-sortby="duration" title="Duration">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>Duration</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column table-action" title="">
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr data-id="233" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>233</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>Ipsum</span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Inactive</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>5h 15m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="wqfnerno0c" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="456" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>456</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>456</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>4h 55m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="wpzxvpfscu" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="878" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>878</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>878</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>9h 10m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="nc22yw4t0v" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="895" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>895</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>895</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>8h 45m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="2z1jc3fowz" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="978" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>978</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>Ipsum</span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Inactive</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>6h 35m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="nxopl8b5e9b" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="2345" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>2345</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>Lorem</span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>2345</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>11h 50m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="2vsumnh9jak" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="2445" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>2445</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>2445</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>7h 25m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="of9p07ftwle" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="3456" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>3456</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>3456</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>12h 00m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="4whpwzgpocu" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="4567" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>4567</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>4567</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>10h 20m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="32p0qchuq3w" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="7354" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>7354</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>Lorem</span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>7354</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>10h 30m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="kum3pybxdpn" 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>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable">
-        <div class="min-width-150">
-            <div class="text-center margin-bottom-3">
-                <span class="text-medium">70</span>
-                <span class="margin-left-5 margin-right-5">/</span>
-                <span class="text-medium">100</span>
-            </div>
-            <div class="progress height-2 margin-bottom-10 bg-white">
-                <div class="progress-bar" style="width: 70%;">
-                </div>
-            </div>
-            <div class="display-flex justify-content-center">
-                <button class="btn btn-link padding-right-20 margin-top--5" type="button">
-                    <span class="rioglyph rioglyph-arrow-down">
-                    </span>Load more</button>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-#### Classes (css)
-
-```css
-table-cards
-```
-
-## States in tables
-
-### Example: No entries found
-
-Head column Head column Head column Head column Head column
-
-No entries found
-We could not find any data entries for your search query. Please refine your search
-
-#### HTML (html)
-
-```html
-<table class="table table-head-filled table-layout-fixed">
-    <thead>
-        <tr>
-            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
-            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
-            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
-            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
-            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td colspan="5">
-                <div class="display-flex justify-content-center max-width-100pct">
-                    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15 border-none">
-                        <div class="display-flex flex-column align-items-center text-center padding-25">
-                            <div class="text-size-h2 margin-bottom-20">
-                                <span class="rioglyph rioglyph-looking-glass-man text-color-light text-size-300pct">
-                                </span>
-                            </div>
-                            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">No entries found</div>
-                            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">We could not find any data entries for your search query. Please refine your search</div>
-                        </div>
-                    </div>
-                </div>
-            </td>
-        </tr>
-    </tbody>
-</table>
-```
-
-## Alerts
-
-### Example: Lorem ipsum
-
-Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
-See More
-
-Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
-See More
-
-Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
-See More
-
-Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
-See More
-
-Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
-See More
-
-Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
-See More
-
-#### HTML (html)
-
-```html
-<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-3-md gap-20">
-    <div class="alert alert-dismissible alert-primary" data-capture-callout="true">
-        <button type="button" class="btn btn-icon-only close" data-dismiss="alert">
-            <span class="rioglyph rioglyph-remove">
-            </span>
-        </button>
-        <div class="display-flex gap-10">
-            <span class="text-color-primary text-size-h4 rioglyph rioglyph-info-sign">
-            </span>
-            <div>
-                <strong class="text-size-16">Lorem ipsum</strong>
-                <div class="margin-y-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
-                <div class="text-medium text-uppercase text-size-12">
-                    <a href="#" class="alert-link">See More<span class="text-color-primary margin-left-3 rioglyph rioglyph-new-window">
-                        </span>
-                    </a>
+                    </a>
                 </div>
             </div>
         </div>
@@ -13838,7 +11446,7 @@ alert-primary
 
 ## Badges
 
-### Example: Example 98
+### Example: Example 81
 
 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.
@@ -14099,7 +11707,7 @@ badge-default
 
 ## Callouts
 
-### Example: Example 99
+### Example: Example 82
 
 Callout default
 At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.
@@ -14172,7 +11780,7 @@ callout-default
 
 ## Counter
 
-### Example: Example 100
+### 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.
 
@@ -14299,7 +11907,7 @@ color-gray
 
 ## Key
 
-### Example: Example 101
+### Example: Example 84
 
 Keys example Pro tip: press m to comment
 Press ctrl + a to select all
@@ -14360,9 +11968,7 @@ 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 102
+### Example: Example 85
 
 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.
@@ -14467,17 +12073,17 @@ muted
         <h5>Labels width icons</h5>
         <div class="display-flex flex-wrap gap-10">
             <div class="label label-default">
-                <span class="rioglyph rioglyph-businessman">
+                <span class="rioglyph rioglyph-bus">
                 </span>
                 <span>default</span>
             </div>
             <div class="label label-primary">
-                <span class="rioglyph rioglyph-trailer">
+                <span class="rioglyph rioglyph-user">
                 </span>
                 <span>primary</span>
             </div>
             <div class="label label-secondary">
-                <span class="rioglyph rioglyph-trailer">
+                <span class="rioglyph rioglyph-businessman">
                 </span>
                 <span>secondary</span>
             </div>
@@ -14487,22 +12093,22 @@ muted
                 <span>info</span>
             </div>
             <div class="label label-success">
-                <span class="rioglyph rioglyph-truck">
+                <span class="rioglyph rioglyph-businessman">
                 </span>
                 <span>success</span>
             </div>
             <div class="label label-warning">
-                <span class="rioglyph rioglyph-trailer">
+                <span class="rioglyph rioglyph-businessman">
                 </span>
                 <span>warning</span>
             </div>
             <div class="label label-danger">
-                <span class="rioglyph rioglyph-truck">
+                <span class="rioglyph rioglyph-van">
                 </span>
                 <span>danger</span>
             </div>
             <div class="label label-muted">
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-businessman">
                 </span>
                 <span>muted</span>
             </div>
@@ -14513,7 +12119,7 @@ muted
         <div class="display-flex flex-wrap gap-10">
             <div class="label label-default label-filled">
                 <span>default</span>
-                <span class="rioglyph rioglyph-bus">
+                <span class="rioglyph rioglyph-user">
                 </span>
             </div>
             <div class="label label-primary label-filled">
@@ -14523,32 +12129,32 @@ muted
             </div>
             <div class="label label-secondary label-filled">
                 <span>secondary</span>
-                <span class="rioglyph rioglyph-user">
+                <span class="rioglyph rioglyph-trailer">
                 </span>
             </div>
             <div class="label label-info label-filled">
                 <span>info</span>
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-van">
                 </span>
             </div>
             <div class="label label-success label-filled">
                 <span>success</span>
-                <span class="rioglyph rioglyph-van">
+                <span class="rioglyph rioglyph-bus">
                 </span>
             </div>
             <div class="label label-warning label-filled">
                 <span>warning</span>
-                <span class="rioglyph rioglyph-businessman">
+                <span class="rioglyph rioglyph-user">
                 </span>
             </div>
             <div class="label label-danger label-filled">
                 <span>danger</span>
-                <span class="rioglyph rioglyph-car">
+                <span class="rioglyph rioglyph-user">
                 </span>
             </div>
             <div class="label label-muted label-filled">
                 <span>muted</span>
-                <span class="rioglyph rioglyph-van">
+                <span class="rioglyph rioglyph-car">
                 </span>
             </div>
         </div>
@@ -14590,7 +12196,7 @@ label-default
 
 ## Lists
 
-### Example: Example 103
+### Example: Example 86
 
 Ordered list
 
@@ -14952,7 +12558,7 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                     </div>
                 </button>
                 <button class="list-group-item list-group-item-info">
-                    <div class="display-flex gap-10" data-capture-callout="true">
+                    <div class="display-flex gap-10">
                         <div class="width-100pct">
                             <div class="text-size-20 text-medium">Headline <span>info</span>
                             </div>
@@ -14980,7 +12586,7 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                     </div>
                 </button>
                 <button class="list-group-item list-group-item-warning">
-                    <div class="display-flex gap-10" data-capture-callout="true">
+                    <div class="display-flex gap-10">
                         <div class="width-100pct">
                             <div class="text-size-20 text-medium">Headline <span>warning</span>
                             </div>
@@ -15102,7 +12708,7 @@ list-group border rounded
 
 ## Panels
 
-### Example: Example 105
+### Example: Example 88
 
 panel-heading 1
 
@@ -15272,7 +12878,7 @@ panel-default
 
 ## Progress bars
 
-### Example: Example 106
+### Example: Example 89
 
 Standard
 
@@ -15477,7 +13083,7 @@ progress
 
 ## Wells
 
-### Example: Example 107
+### Example: Example 90
 
 Hi, my name is well-sm
 
@@ -15512,7 +13118,7 @@ well
 
 ## Forms
 
-### Example: Example 108
+### Example: Example 91
 
 Legend
 
@@ -15917,7 +13523,7 @@ Action
 
 ## Form sized examples
 
-### Example: Example 109
+### Example: Example 92
 
 Size by form-Group class
 form-group-sm
@@ -15996,11 +13602,11 @@ input-group-lg 1 2 3 4 5
                 <span class="form-control-feedback rioglyph rioglyph-error-sign">
                 </span>
             </div>
-            <div class="form-group form-group">
+            <div class="form-group">
                 <label for="input4">form-group</label>
                 <input id="input4" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
             </div>
-            <div class="form-group form-group">
+            <div class="form-group">
                 <label for="input5">form-group</label>
                 <div class="input-group">
                     <span class="input-group-addon">
@@ -16011,7 +13617,7 @@ input-group-lg 1 2 3 4 5
                     <span class="input-group-addon">XX</span>
                 </div>
             </div>
-            <div class="form-group form-group has-error has-feedback">
+            <div class="form-group has-error has-feedback">
                 <label for="input6">form-group</label>
                 <input id="input6" type="text" class="form-control">
                 <span class="form-control-feedback rioglyph rioglyph-error-sign">
@@ -16104,7 +13710,7 @@ input-group-lg 1 2 3 4 5
             </div>
             <div class="form-group">
                 <label for="input14">input-group</label>
-                <div class="input-group input-group">
+                <div class="input-group">
                     <span class="input-group-addon">
                         <span class="rioglyph rioglyph-heart">
                         </span>
@@ -16176,7 +13782,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 110
+### Example: Example 93
 
 A form with fieldset Lorem ipsum
 Dolor Sit amet
@@ -16261,7 +13867,7 @@ Lorem ipsum
 
 ## Input resize
 
-### Example: Example 111
+### Example: Example 94
 
 resize-none resize-vertical
 
@@ -16274,9 +13880,17 @@ resize-none resize-vertical
 </div>
 ```
 
-## Animations
+## CSS Animations
+
+### Example: Example 95
+
+slide
 
-### Example: Example 112
+fade
+
+scale
+
+rotate
 
 slide-out
 
@@ -16284,11 +13898,13 @@ left up down right
 
 3s 2s 1s 09s 08s 07s 06s 05s 04s 03s 02s 01s
 
-loop restart
+d-3s d-2s d-1s d-09s d-08s d-07s d-06s d-05s d-04s d-03s d-02s d-01s
+
+one time loop restart
 
 linear ease ease-in ease-out ease-in-out
 
-infinite repeat-1 repeat-2 repeat-3
+infinite no repeat repeat-1 repeat-2 repeat-3
 
 Test animation Reset
 
@@ -16296,319 +13912,120 @@ Test animation Reset
 
 ```tsx
 import { useState } from 'react';
-
-import classNames from '@rio-cloud/rio-uikit/classNames';
-import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
-import Button from '@rio-cloud/rio-uikit/Button';
-
-export default () => {
-    const [currentAnimationType, setCurrentAnimationType] = useState('slide-out');
-    const [currentAnimationDirection, setCurrentAnimationDirection] = useState('left');
-    const [currentAnimation, setCurrentAnimation] = useState('infinite');
-    const [currentAnimationLooping, setCurrentAnimationLooping] = useState('loop');
-    const [currentAnimationEasing, setCurrentAnimationEasing] = useState('ease-in-out');
-    const [currentAnimationDuration, setCurrentAnimationDuration] = useState('1s');
-    const [playAnimation, setPlayAnimation] = useState(false);
-
-    const handleSelectAnimationType = (selectedAnimationType: string) => {
-        setCurrentAnimationType(selectedAnimationType);
-        setPlayAnimation(false);
-    };
-
-    const handleSelectAnimationDirection = (selectedAnimationDirection: string) => {
-        setCurrentAnimationDirection(selectedAnimationDirection);
-        setPlayAnimation(false);
-    };
-
-    const handleSelectAnimation = (selectedAnimation: string) => {
-        setCurrentAnimation(selectedAnimation);
-        setPlayAnimation(false);
-    };
-
-    const handleSelectAnimationLooping = (selectedAnimationLooping: string) => {
-        setCurrentAnimationLooping(selectedAnimationLooping);
-        setPlayAnimation(false);
-    };
-
-    const handleSelectAnimationEasing = (selectedAnimationEasing: string) => {
-        setCurrentAnimationEasing(selectedAnimationEasing);
-        setPlayAnimation(false);
-    };
-
-    const handleSelectAnimationDuration = (selectedAnimationDuration: string) => {
-        setCurrentAnimationDuration(selectedAnimationDuration);
-        setPlayAnimation(false);
-    };
-
-    const handleStartAnimation = () => {
-        setPlayAnimation(true);
-    };
-
-    const handleStopAnimation = () => {
-        setPlayAnimation(false);
-    };
-
-    const animationClassName = classNames(
-        playAnimation &&
-            `animated-${currentAnimationDuration} ${currentAnimation} ${currentAnimationEasing}
-            ${currentAnimationLooping}`,
-        playAnimation && `${currentAnimationType}-${currentAnimationDirection}`
-    );
-
-    return (
-        <>
-            <div className='display-flex justify-content-center'>
-                <RadioButton
-                    name='type'
-                    onChange={() => handleSelectAnimationType('slide-out')}
-                    checked={currentAnimationType === 'slide-out'}
-                    inline
-                >
-                    slide-out
-                </RadioButton>
-            </div>
-            <hr />
-            <div className='display-flex justify-content-center'>
-                <RadioButton
-                    name='direction'
-                    onChange={() => handleSelectAnimationDirection('left')}
-                    checked={currentAnimationDirection === 'left'}
-                    inline
-                >
-                    left
-                </RadioButton>
-                <RadioButton
-                    name='direction'
-                    onChange={() => handleSelectAnimationDirection('up')}
-                    checked={currentAnimationDirection === 'up'}
-                    inline
-                >
-                    up
-                </RadioButton>
-                <RadioButton
-                    name='direction'
-                    onChange={() => handleSelectAnimationDirection('down')}
-                    checked={currentAnimationDirection === 'down'}
-                    inline
-                >
-                    down
-                </RadioButton>
-                <RadioButton
-                    name='direction'
-                    onChange={() => handleSelectAnimationDirection('right')}
-                    checked={currentAnimationDirection === 'right'}
-                    inline
-                >
-                    right
-                </RadioButton>
-            </div>
-            <hr />
-            <div className='display-flex flex-wrap justify-content-center'>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('3s')}
-                    checked={currentAnimationDuration === '3s'}
-                    inline
-                >
-                    3s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('2s')}
-                    checked={currentAnimationDuration === '2s'}
-                    inline
-                >
-                    2s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('1s')}
-                    checked={currentAnimationDuration === '1s'}
-                    inline
-                >
-                    1s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('09s')}
-                    checked={currentAnimationDuration === '09s'}
-                    inline
-                >
-                    09s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('08s')}
-                    checked={currentAnimationDuration === '08s'}
-                    inline
-                >
-                    08s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('07s')}
-                    checked={currentAnimationDuration === '07s'}
-                    inline
-                >
-                    07s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('06s')}
-                    checked={currentAnimationDuration === '06s'}
-                    inline
-                >
-                    06s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('05s')}
-                    checked={currentAnimationDuration === '05s'}
-                    inline
-                >
-                    05s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('04s')}
-                    checked={currentAnimationDuration === '04s'}
-                    inline
-                >
-                    04s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('03s')}
-                    checked={currentAnimationDuration === '03s'}
-                    inline
-                >
-                    03s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('02s')}
-                    checked={currentAnimationDuration === '02s'}
-                    inline
-                >
-                    02s
-                </RadioButton>
-                <RadioButton
-                    name='duration'
-                    onChange={() => handleSelectAnimationDuration('01s')}
-                    checked={currentAnimationDuration === '01s'}
-                    inline
-                >
-                    01s
-                </RadioButton>
-            </div>
-            <hr />
+
+import classNames from '@rio-cloud/rio-uikit/classNames';
+import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
+
+import AnimationDelayControl from './controls/AnimationDelayControl';
+import AnimationDirectionControl from './controls/AnimationDirectionControl';
+import AnimationDurationControl from './controls/AnimationDurationControl';
+import AnimationLoopingControl from './controls/AnimationLoopingControl';
+import AnimationEasingControl from './controls/AnimationEasingControl';
+import AnimationPlaybackControl from './controls/AnimationPlaybackControl';
+import AnimationRepeatControl from './controls/AnimationRepeatControl';
+import type {
+    AnimationDelay,
+    AnimationDirection,
+    AnimationDuration,
+    AnimationEasing,
+    AnimationLooping,
+    AnimationRepeat,
+} from './controls/animationControlOptions';
+
+const AnimationsSlideExample = () => {
+    const [currentAnimationType, setCurrentAnimationType] = useState('slide-out');
+    const [currentAnimationDirection, setCurrentAnimationDirection] = useState<AnimationDirection>('left');
+    const [currentAnimation, setCurrentAnimation] = useState<AnimationRepeat>('infinite');
+    const [currentAnimationLooping, setCurrentAnimationLooping] = useState<AnimationLooping>('loop');
+    const [currentAnimationEasing, setCurrentAnimationEasing] = useState<AnimationEasing>('ease-in-out');
+    const [currentAnimationDelay, setCurrentAnimationDelay] = useState<AnimationDelay>('01s');
+    const [currentAnimationDuration, setCurrentAnimationDuration] = useState<AnimationDuration>('1s');
+    const [playAnimation, setPlayAnimation] = useState(false);
+
+    const resetAnimation = () => setPlayAnimation(false);
+
+    const animationClassName = classNames(
+        playAnimation &&
+            `animated-${currentAnimationDuration} animated-delay-${currentAnimationDelay} ${currentAnimation} ${currentAnimationEasing}`,
+        playAnimation && currentAnimationLooping !== 'one-time' && currentAnimationLooping,
+        playAnimation && `${currentAnimationType}-${currentAnimationDirection}`
+    );
+
+    return (
+        <>
             <div className='display-flex justify-content-center'>
                 <RadioButton
-                    name='looping'
-                    onChange={() => handleSelectAnimationLooping('loop')}
-                    checked={currentAnimationLooping === 'loop'}
-                    inline
-                >
-                    loop
-                </RadioButton>
-                <RadioButton
-                    name='looping'
-                    onChange={() => handleSelectAnimationLooping('restart')}
-                    checked={currentAnimationLooping === 'restart'}
+                    name='type'
+                    onChange={() => {
+                        setCurrentAnimationType('slide-out');
+                        resetAnimation();
+                    }}
+                    checked={currentAnimationType === 'slide-out'}
                     inline
                 >
-                    restart
+                    slide-out
                 </RadioButton>
             </div>
             <hr />
-            <div className='display-flex justify-content-center'>
-                <RadioButton
-                    name='easing'
-                    onChange={() => handleSelectAnimationEasing('linear')}
-                    checked={currentAnimationEasing === 'linear'}
-                    inline
-                >
-                    linear
-                </RadioButton>
-                <RadioButton
-                    name='easing'
-                    onChange={() => handleSelectAnimationEasing('ease')}
-                    checked={currentAnimationEasing === 'ease'}
-                    inline
-                >
-                    ease
-                </RadioButton>
-                <RadioButton
-                    name='easing'
-                    onChange={() => handleSelectAnimationEasing('ease-in')}
-                    checked={currentAnimationEasing === 'ease-in'}
-                    inline
-                >
-                    ease-in
-                </RadioButton>
-                <RadioButton
-                    name='easing'
-                    onChange={() => handleSelectAnimationEasing('ease-out')}
-                    checked={currentAnimationEasing === 'ease-out'}
-                    inline
-                >
-                    ease-out
-                </RadioButton>
-                <RadioButton
-                    name='easing'
-                    onChange={() => handleSelectAnimationEasing('ease-in-out')}
-                    checked={currentAnimationEasing === 'ease-in-out'}
-                    inline
-                >
-                    ease-in-out
-                </RadioButton>
-            </div>
+            <AnimationDirectionControl
+                value={currentAnimationDirection}
+                onChange={value => {
+                    setCurrentAnimationDirection(value);
+                    resetAnimation();
+                }}
+            />
             <hr />
-            <div className='display-flex justify-content-center'>
-                <RadioButton
-                    name='animation'
-                    onChange={() => handleSelectAnimation('infinite')}
-                    checked={currentAnimation === 'infinite'}
-                    inline
-                >
-                    infinite
-                </RadioButton>
-                <RadioButton
-                    name='animation'
-                    onChange={() => handleSelectAnimation('repeat-1')}
-                    checked={currentAnimation === 'repeat-1'}
-                    inline
-                >
-                    repeat-1
-                </RadioButton>
-                <RadioButton
-                    name='animation'
-                    onChange={() => handleSelectAnimation('repeat-2')}
-                    checked={currentAnimation === 'repeat-2'}
-                    inline
-                >
-                    repeat-2
-                </RadioButton>
-                <RadioButton
-                    name='animation'
-                    onChange={() => handleSelectAnimation('repeat-3')}
-                    checked={currentAnimation === 'repeat-3'}
-                    inline
-                >
-                    repeat-3
-                </RadioButton>
-            </div>
+            <AnimationDurationControl
+                value={currentAnimationDuration}
+                onChange={value => {
+                    setCurrentAnimationDuration(value);
+                    resetAnimation();
+                }}
+            />
             <hr />
-            <div className='display-flex justify-content-center'>
-                <Button bsStyle='primary' className='margin-right-10' onClick={handleStartAnimation}>
-                    Test animation
-                </Button>
-                <Button className='margin-left-10' onClick={handleStopAnimation}>
-                    Reset
-                </Button>
-            </div>
+            <AnimationDelayControl
+                value={currentAnimationDelay}
+                onChange={value => {
+                    if (!value) {
+                        return;
+                    }
+
+                    setCurrentAnimationDelay(value);
+                    resetAnimation();
+                }}
+            />
             <hr />
-            <div className='display-flex justify-content-center align-items-center height-300'>
+            <AnimationLoopingControl
+                value={currentAnimationLooping}
+                onChange={value => {
+                    setCurrentAnimationLooping(value);
+                    resetAnimation();
+                }}
+            />
+            <hr />
+            <AnimationEasingControl
+                value={currentAnimationEasing}
+                onChange={value => {
+                    setCurrentAnimationEasing(value);
+                    resetAnimation();
+                }}
+            />
+            <hr />
+            <AnimationRepeatControl
+                value={currentAnimation}
+                onChange={value => {
+                    setCurrentAnimation(value);
+                    resetAnimation();
+                }}
+            />
+            <hr />
+            <AnimationPlaybackControl
+                isPlaying={playAnimation}
+                onPlay={() => setPlayAnimation(true)}
+                onReset={resetAnimation}
+            />
+            <hr />
+            <div className='display-flex justify-content-center align-items-center height-300 overflow-hidden'>
                 <div className={animationClassName}>
                     <svg
                         className='margin-5 margin-left-0 scale-200'
@@ -16631,225 +14048,332 @@ export default () => {
             </div>
             <hr />
             <div className='display-flex justify-content-center'>
-                <code className='code hidden-empty'>{`${animationClassName}`}</code>
+                <code className='code hidden-empty'>{animationClassName}</code>
             </div>
         </>
     );
 };
+
+export default AnimationsSlideExample;
 ```
 
 #### HTML (html)
 
 ```html
-<div class="display-flex justify-content-center">
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="type" value="" checked="">
-        <span class="radio-text">
-            <span>slide-out</span>
-        </span>
-    </label>
-</div>
-<hr>
-<div class="display-flex justify-content-center">
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="direction" value="" checked="">
-        <span class="radio-text">
-            <span>left</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="direction" value="">
-        <span class="radio-text">
-            <span>up</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="direction" value="">
-        <span class="radio-text">
-            <span>down</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="direction" value="">
-        <span class="radio-text">
-            <span>right</span>
-        </span>
-    </label>
-</div>
-<hr>
-<div class="display-flex flex-wrap justify-content-center">
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>3s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>2s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="" checked="">
-        <span class="radio-text">
-            <span>1s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>09s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>08s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>07s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>06s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>05s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>04s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>03s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>02s</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="duration" value="">
-        <span class="radio-text">
-            <span>01s</span>
-        </span>
-    </label>
-</div>
-<hr>
-<div class="display-flex justify-content-center">
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="looping" value="" checked="">
-        <span class="radio-text">
-            <span>loop</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="looping" value="">
-        <span class="radio-text">
-            <span>restart</span>
-        </span>
-    </label>
-</div>
-<hr>
-<div class="display-flex justify-content-center">
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="easing" value="">
-        <span class="radio-text">
-            <span>linear</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="easing" value="">
-        <span class="radio-text">
-            <span>ease</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="easing" value="">
-        <span class="radio-text">
-            <span>ease-in</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="easing" value="">
-        <span class="radio-text">
-            <span>ease-out</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="easing" value="" checked="">
-        <span class="radio-text">
-            <span>ease-in-out</span>
-        </span>
-    </label>
-</div>
-<hr>
-<div class="display-flex justify-content-center">
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="animation" value="" checked="">
-        <span class="radio-text">
-            <span>infinite</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="animation" value="">
-        <span class="radio-text">
-            <span>repeat-1</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="animation" value="">
-        <span class="radio-text">
-            <span>repeat-2</span>
-        </span>
-    </label>
-    <label class="radio radio-inline" tabindex="0">
-        <input type="radio" class="" name="animation" value="">
-        <span class="radio-text">
-            <span>repeat-3</span>
-        </span>
-    </label>
-</div>
-<hr>
-<div class="display-flex justify-content-center">
-    <button type="button" class="btn btn-primary btn-component margin-right-10" tabindex="0">Test animation</button>
-    <button type="button" class="btn btn-default btn-component margin-left-10" tabindex="0">Reset</button>
-</div>
-<hr>
-<div class="display-flex justify-content-center align-items-center height-300">
-    <div class="">
-        <svg class="margin-5 margin-left-0 scale-200" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
-            </path>
-        </svg>
+<div>
+    <ul class="nav nav-pills nav-pills-filled nav-justified margin-bottom-25">
+        <li class="active">
+            <div role="button" tabindex="0" class="text-transform-capitalize">slide</div>
+        </li>
+        <li class="">
+            <div role="button" tabindex="0" class="text-transform-capitalize">fade</div>
+        </li>
+        <li class="">
+            <div role="button" tabindex="0" class="text-transform-capitalize">scale</div>
+        </li>
+        <li class="">
+            <div role="button" tabindex="0" class="text-transform-capitalize">rotate</div>
+        </li>
+    </ul>
+    <div class="margin-top-15">
+        <div class="display-flex justify-content-center">
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="type" value="" checked="">
+                <span class="radio-text">
+                    <span>slide-out</span>
+                </span>
+            </label>
+        </div>
+        <hr>
+        <div class="display-flex justify-content-center">
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="direction" value="" checked="">
+                <span class="radio-text">
+                    <span>left</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="direction" value="">
+                <span class="radio-text">
+                    <span>up</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="direction" value="">
+                <span class="radio-text">
+                    <span>down</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="direction" value="">
+                <span class="radio-text">
+                    <span>right</span>
+                </span>
+            </label>
+        </div>
+        <hr>
+        <div class="display-flex flex-wrap justify-content-center">
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>3s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>2s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="" checked="">
+                <span class="radio-text">
+                    <span>1s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>09s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>08s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>07s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>06s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>05s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>04s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>03s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>02s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="duration" value="">
+                <span class="radio-text">
+                    <span>01s</span>
+                </span>
+            </label>
+        </div>
+        <hr>
+        <div class="display-flex flex-wrap justify-content-center">
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-3s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-2s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-1s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-09s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-08s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-07s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-06s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-05s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-04s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-03s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="">
+                <span class="radio-text">
+                    <span>d-02s</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="delay" value="" checked="">
+                <span class="radio-text">
+                    <span>d-01s</span>
+                </span>
+            </label>
+        </div>
+        <hr>
+        <div class="display-flex justify-content-center">
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="looping" value="">
+                <span class="radio-text">
+                    <span>one time</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="looping" value="" checked="">
+                <span class="radio-text">
+                    <span>loop</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="looping" value="">
+                <span class="radio-text">
+                    <span>restart</span>
+                </span>
+            </label>
+        </div>
+        <hr>
+        <div class="display-flex justify-content-center">
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="easing" value="">
+                <span class="radio-text">
+                    <span>linear</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="easing" value="">
+                <span class="radio-text">
+                    <span>ease</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="easing" value="">
+                <span class="radio-text">
+                    <span>ease-in</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="easing" value="">
+                <span class="radio-text">
+                    <span>ease-out</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="easing" value="" checked="">
+                <span class="radio-text">
+                    <span>ease-in-out</span>
+                </span>
+            </label>
+        </div>
+        <hr>
+        <div class="display-flex justify-content-center">
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="animation" value="" checked="">
+                <span class="radio-text">
+                    <span>infinite</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="animation" value="">
+                <span class="radio-text">
+                    <span>no repeat</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="animation" value="">
+                <span class="radio-text">
+                    <span>repeat-1</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="animation" value="">
+                <span class="radio-text">
+                    <span>repeat-2</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="animation" value="">
+                <span class="radio-text">
+                    <span>repeat-3</span>
+                </span>
+            </label>
+        </div>
+        <hr>
+        <div class="display-flex justify-content-center">
+            <button type="button" class="btn btn-primary btn-component margin-right-10" tabindex="0">Test animation</button>
+            <button type="button" class="btn btn-default btn-component margin-left-10" tabindex="0">Reset</button>
+        </div>
+        <hr>
+        <div class="display-flex justify-content-center align-items-center height-300 overflow-hidden">
+            <div class="">
+                <svg class="margin-5 margin-left-0 scale-200" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
+                    </path>
+                </svg>
+            </div>
+        </div>
+        <hr>
+        <div class="display-flex justify-content-center">
+            <code class="code hidden-empty">
+            </code>
+        </div>
     </div>
 </div>
-<hr>
-<div class="display-flex justify-content-center">
-    <code class="code hidden-empty">
-    </code>
-</div>
 ```
 
 ## Transition
 
-### Example: Example 113
+### Example: Example 96
 
 Transition properties
 
@@ -16933,7 +14457,7 @@ transition-duration-05
 
 ## Blur
 
-### Example: Example 114
+### Example: Example 97
 
 
 
@@ -16982,7 +14506,7 @@ blur-0
 
 ## Backdrop blur
 
-### Example: Example 115
+### 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.
 
@@ -17048,7 +14572,7 @@ backdrop-blur-1
 
 ## Aspect ratio
 
-### Example: Example 116
+### Example: Example 99
 
 With fixed width
 
@@ -17115,7 +14639,7 @@ aspect-ratio-1
 
 ## Inset
 
-### Example: Example 117
+### Example: Example 100
 
 inset-0
 
@@ -17175,7 +14699,7 @@ inset-0
 
 ## Helper
 
-### Example: Example 118
+### 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
 
@@ -17198,9 +14722,7 @@ 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 119
+### Example: Example 102
 
 Rotate 360°
 
@@ -17313,9 +14835,7 @@ 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 120
+### Example: Example 103
 
 Scale
 
@@ -17404,9 +14924,7 @@ scale-50
 
 ## Translate
 
-> 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 121
+### Example: Example 104
 
 
 
@@ -17443,7 +14961,7 @@ translate-x-50pct
 
 ## Display
 
-### Example: Example 122
+### Example: Example 105
 
 display-block display-inline-block display-flex display-inline-flex display-inline display-none
 
@@ -17468,7 +14986,7 @@ display-block display-inline-block display-flex display-inline-flex display-inli
 
 ## Overflow
 
-### Example: Example 123
+### Example: Example 106
 
 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.
 
@@ -17529,7 +15047,7 @@ overflow-auto
 
 ## Visibility
 
-### Example: Example 124
+### Example: Example 107
 
 Visible only at a certain breakpoint
 
@@ -17929,7 +15447,7 @@ visibility-hidden
 
 ## Z-index
 
-### Example: Example 125
+### Example: Example 108