@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

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-27T14:59:08.566Z
 
 You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light
 
@@ -65,7 +65,7 @@ muted-filled
             <div class="btn-toolbar">
                 <button type="button" class="btn btn-default">Default</button>
                 <button type="button" class="btn btn-default">
-                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                    <span class="rioglyph rioglyph-user" aria-hidden="true">
                     </span>Default</button>
             </div>
         </div>
@@ -82,27 +82,27 @@ muted-filled
                     </span>
                 </button>
                 <button type="button" class="btn btn-primary btn-icon-only">
-                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                    <span class="rioglyph rioglyph-user" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-secondary 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-info btn-icon-only">
-                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-success btn-icon-only">
-                    <span class="rioglyph rioglyph-truck" 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-van" aria-hidden="true">
+                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                     </span>
                 </button>
                 <button type="button" class="btn btn-danger btn-icon-only">
-                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                    <span class="rioglyph rioglyph-user" aria-hidden="true">
                     </span>
                 </button>
             </div>
@@ -116,17 +116,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-businessman" 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>
                 </button>
                 <button type="button" class="btn btn-muted">
-                    <span class="rioglyph rioglyph-car" aria-hidden="true">
+                    <span class="rioglyph rioglyph-driver" 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-car" aria-hidden="true">
                     </span>
                 </button>
             </div>
@@ -141,17 +141,17 @@ 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-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-link">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info btn-link">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
@@ -161,12 +161,12 @@ muted-filled
                 <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-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-link">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -198,17 +198,17 @@ muted-filled
                 <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-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-truck" 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,12 +225,12 @@ muted-filled
         </div>
         <div class="btn-toolbar padding-10 bg-checkerboard rounded">
             <button type="button" class="btn btn-primary btn-outline">
-                <span class="rioglyph rioglyph-van" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
             <button type="button" class="btn btn-secondary btn-outline">
-                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
@@ -240,17 +240,17 @@ muted-filled
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-outline">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" 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-van" 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-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -526,37 +526,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-businessman" 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-car" 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-bus" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-xs">
-                <span class="rioglyph rioglyph-businessman" 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-xs">
-                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -571,31 +571,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-driver" 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-user" 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-businessman" 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-user" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -611,37 +611,37 @@ 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-trailer" 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-trailer" 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-trailer" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">secondary</span>
             </button>
             <button type="button" class="btn btn-info btn-sm">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">info</span>
             </button>
             <button type="button" class="btn btn-success btn-sm">
-                <span class="rioglyph rioglyph-driver" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">success</span>
             </button>
             <button type="button" class="btn btn-warning btn-sm">
-                <span class="rioglyph rioglyph-car" aria-hidden="true">
+                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger btn-sm">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -656,31 +656,31 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-sm btn-icon-only">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" 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-car" 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-driver" 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-driver" 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-car" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -696,12 +696,12 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                 </span>
                 <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-van" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">primary</span>
             </button>
@@ -711,22 +711,22 @@ LG icon buttons
                 <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-driver" 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-car" 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-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">warning</span>
             </button>
             <button type="button" class="btn btn-danger">
-                <span class="rioglyph rioglyph-truck" aria-hidden="true">
+                <span class="rioglyph rioglyph-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -741,7 +741,7 @@ 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-van" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-primary btn-icon-only">
@@ -753,19 +753,19 @@ LG icon buttons
                 </span>
             </button>
             <button type="button" class="btn btn-info 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-success btn-icon-only">
-                <span class="rioglyph rioglyph-user" aria-hidden="true">
+                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-warning btn-icon-only">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-trailer" 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-user" aria-hidden="true">
                 </span>
             </button>
         </div>
@@ -781,37 +781,37 @@ LG icon buttons
         </div>
         <div class="btn-toolbar">
             <button type="button" class="btn btn-default btn-lg">
-                <span class="rioglyph rioglyph-bus" aria-hidden="true">
+                <span class="rioglyph rioglyph-car" aria-hidden="true">
                 </span>
                 <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-car" 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-truck" 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-driver" 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-user" 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-businessman" 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-user" aria-hidden="true">
                 </span>
                 <span class="text-capitalize">danger</span>
             </button>
@@ -826,11 +826,11 @@ 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-user" 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-user" aria-hidden="true">
                 </span>
             </button>
             <button type="button" class="btn btn-secondary btn-lg btn-icon-only">
@@ -846,11 +846,11 @@ LG icon buttons
                 </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-bus" 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>
@@ -980,6 +980,8 @@ btn-toolbar
 
 ## Action buttons
 
+Colors
+
 ### Example: Example 5
 
 Click me Click me Click me Click me Click me Click me
@@ -989,27 +991,27 @@ 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-truck" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
     <button type="button" class="btn btn-secondary btn-action text-size-h2">
-        <span class="rioglyph rioglyph-businessman" aria-hidden="true">
+        <span class="rioglyph rioglyph-user" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
     <button type="button" class="btn btn-info btn-action text-size-h3">
-        <span class="rioglyph rioglyph-user" aria-hidden="true">
+        <span class="rioglyph rioglyph-van" 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-bus" 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-truck" aria-hidden="true">
         </span>
         <span class="">Click me</span>
     </button>
@@ -1609,6 +1611,8 @@ hover-text-color-white
 
 ## SVGs
 
+Styling
+
 ### Example: Example 10
 
 
@@ -2446,6 +2450,8 @@ rounded-small
 
 ## Shadows
 
+Shadow class for panels and blocks
+
 The default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.
 
 Do not use hard shadows on tables, in dialogs, or on elements placed on white background.
@@ -2595,7 +2601,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>
@@ -2648,6 +2654,8 @@ shadow-subtle
 
 Use hover-shadow-* class to choose the hover elevation. Transition is included by default. For the tight focused preset use shadow-focused.
 
+Icons
+
 ### Example: Example 22
 
 hover-shadow-accent
@@ -2702,6 +2710,8 @@ shadow-subtle
 
 ## RIOglyph
 
+DownloadDownload all RIOglyph icons as SVG images here.
+
 ### Example: Example 23
 
 Default
@@ -2762,15 +2772,15 @@ 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-bus 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>
-            <span class="rioglyph rioglyph-van text-color-success text-size-h1">
+            <span class="rioglyph rioglyph-user text-color-success text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-driver text-color-warning text-size-h1">
+            <span class="rioglyph rioglyph-trailer text-color-warning text-size-h1">
             </span>
             <span class="rioglyph rioglyph-user text-color-danger text-size-h1">
             </span>
@@ -3304,17 +3314,17 @@ Not for decorative or unnecessary elements – If an icon doesn’t need extra e
             <hr class="margin-top-10 border-color-light">
         </div>
         <div class="display-flex flex-wrap gap-10">
-            <span class="rioglyph rioglyph-bus rioglyph-filled text-color-primary text-size-h1">
+            <span class="rioglyph rioglyph-car 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-truck rioglyph-filled text-color-secondary text-size-h1">
             </span>
-            <span class="rioglyph rioglyph-user rioglyph-filled text-color-info text-size-h1">
+            <span class="rioglyph rioglyph-businessman 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-truck 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-user 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-car rioglyph-filled text-color-danger text-size-h1">
             </span>
         </div>
     </div>
@@ -3534,6 +3544,8 @@ Primis ante volutpat Vivamus
 
 ## Icon library
 
+Text
+
 ### Example: Example 31
 
 Search
@@ -3574,6 +3586,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 +3602,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 +3649,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 +3878,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 +3898,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 +3936,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 +4224,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 +4304,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 +4539,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 +5684,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 +5784,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 +5974,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>
@@ -7148,6 +7196,8 @@ user-select-all
 
 ## Text box
 
+The text-box properties enable trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.
+
 ### Example: Example 43
 
 text-box-trim-start
@@ -7241,6 +7291,8 @@ text-boxnormal
 
 ## Text wrapping
 
+Layout
+
 ### Example: Example 44
 
 Word break
@@ -7322,6 +7374,8 @@ word-break-all
 
 ## Cols
 
+Column classes indicate the number of columns you like to use out of the possible 12 per row. They must be immediate children of rows.
+
 > Note: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active
 
 ### Example: Example 45
@@ -7491,6 +7545,11 @@ row
 
 ## Responsive cols
 
+|  | ls | sm | md | lg | xl |
+| --- | --- | --- | --- | --- | --- |
+| min-width | 480px | 768px | 992px | 1200px | 1700px |
+| class | col-ls-* | col-sm-* | col-md-* | col-lg-* | col-xl-* |
+
 ### Example: Example 46
 
 col-xs-6 col-sm-3
@@ -7551,6 +7610,10 @@ row equal-height
 
 ## Container fluid
 
+|  | small | default | large | extra-large | ultra-large |
+| --- | --- | --- | --- | --- | --- |
+| max-width | 980px | 1280px | 1440px | 1680px | 1920px |
+
 ### Example: Example 48
 
 container fluid-small
@@ -7594,6 +7657,10 @@ container
 
 > Note: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.
 
+|  | ls | sm | md | lg | xl |
+| --- | --- | --- | --- | --- | --- |
+| max-width | 440px | 728px | 952px | 1160px | 1660px |
+
 ### Example: Example 49
 
 container
@@ -7618,6 +7685,13 @@ While traditional container classes like container and fluid-default respond to
 
 By reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.
 
+| Classic container | Container query |
+| --- | --- |
+| container, fluid-default | e.g., cq-600, cq-700 (custom class names) |
+| Layout adapts to viewport width | Layout adapts to container width |
+| Typically applied at page layout level | Used inside components and layout elements |
+| Based on media queries | Based on @container CSS rules |
+
 ## Usage
 
 The UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.
@@ -7631,6 +7705,12 @@ The UIKIT provides atomic utility classes for container queries, enabling you to
 </div>
 ```
 
+<div class="cq-container">
+
+<!-- content goes here -->
+
+</div>
+
 ```html
 <div class="cq-container">
 <div class="padding-10 cq-400:padding-15 cq-600:padding-25">
@@ -7639,6 +7719,16 @@ The UIKIT provides atomic utility classes for container queries, enabling you to
 </div>
 ```
 
+<div class="cq-container">
+
+<div class="padding-10 cq-400:padding-15 cq-600:padding-25">
+
+<!-- more content goes here -->
+
+</div>
+
+</div>
+
 The class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]
 
 - cq: is the prefix for all container query utilities.
@@ -7652,6 +7742,54 @@ Our container query utilities are based on a set of predefined width breakpoints
 
 We use a "max-width" query for the smallest breakpoint (300px) to target styles up to that size, and "min-width" queries for all larger breakpoints to target styles from that size upwards.
 
+| Identifier (in class) | Value | Query type | Description |
+| --- | --- | --- | --- |
+| 300 | 300px | max-width | Styles applied when container width is ≤ 300px |
+| 400 | 400px | min-width | Styles applied when container width is ≥ 400px |
+| 500 | 500px | min-width | Styles applied when container width is ≥ 500px |
+| 600 | 600px | min-width | Styles applied when container width is ≥ 600px |
+| 700 | 700px | min-width | Styles applied when container width is ≥ 700px |
+
+300
+
+300px
+
+max-width
+
+Styles applied when container width is ≤ 300px
+
+400
+
+400px
+
+min-width
+
+Styles applied when container width is ≥ 400px
+
+500
+
+500px
+
+min-width
+
+Styles applied when container width is ≥ 500px
+
+600
+
+600px
+
+min-width
+
+Styles applied when container width is ≥ 600px
+
+700
+
+700px
+
+min-width
+
+Styles applied when container width is ≥ 700px
+
 ### Example: Container query example and classes
 
 Container query example and classes
@@ -8455,6 +8593,8 @@ display-grid place-items-center place-self-center
 
 ## Grid stacking
 
+This is an alternative to the commonly known position absolute using grid-template-areas under the hood and giving all items the same grid area. To make the usage easier, use the following two classes grid-stack and grid-stack-item
+
 ### Example: Example 59
 
 stack item 1
@@ -8719,6 +8859,8 @@ grid-cols-subgrid
 
 ## Position
 
+Spacing
+
 ### Example: Lorem ipsum dolor sit amet
 
 Lorem ipsum dolor sit amet
@@ -8749,6 +8891,8 @@ position-relative
 
 ## Gap
 
+Gap classes can be used for flexbox and grid layouts.
+
 > Note: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.
 
 ### Example: Example 64
@@ -8867,6 +9011,8 @@ gap-0
 
 ## Space
 
+Space between child elements of non-flex and non-grid solutions.
+
 > Note: For flex or grid solutions please use gap instead.
 
 ### Example: Example 65
@@ -9720,6 +9866,8 @@ children-first-margin-top-0
 
 ## Padding
 
+Sizing
+
 ### Example: Example 68
 
 Surrouding
@@ -10316,6 +10464,14 @@ The min-width property defines the smallest width an element can shrink to. When
 - min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.
 - min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.
 
+| Property | Description | Allows wrapping | Typical use |
+| --- | --- | --- | --- |
+| min-content | Shrinks to the smallest possible width without overflowing. | Yes | Compress content safely |
+| max-content | Expands to fit all content on a single line without wrapping. | No | Prevent text breaking or wrapping |
+| fit-content | Balances between min-content and max-content; adapts naturally. | Yes | Adaptive layouts |
+
+Navigation
+
 ### Example: Example 71
 
 max-content This_is_a_really_long_word_that_will_not_break.
@@ -10327,7 +10483,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>
@@ -10573,6 +10729,8 @@ You don’t need to offer dropdowns for rows per page, reducing UI clutter.
 
 **Condensed filled nav-pills as view toggle**
 
+For use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.
+
 ### Example: Example 75
 
 Standard
@@ -11036,11 +11194,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">
@@ -11122,6 +11282,8 @@ nav
 
 ## Tabs
 
+Elements
+
 ### Example: Example 79
 
 Standard
@@ -11273,2441 +11435,27 @@ 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
-
-#### 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">
-                        </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
+Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+See More
 
 #### HTML (html)
 
@@ -13838,7 +11586,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 +11847,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 +11920,9 @@ callout-default
 
 ## Counter
 
-### Example: Example 100
+The counter component is a pure CSS component that can be applied to any element in order to count the child elements in a nice way. This works for list items as well as for div's or other HTML tags.
+
+### Example: Example 83
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
 
@@ -14299,7 +12049,7 @@ color-gray
 
 ## Key
 
-### Example: Example 101
+### Example: Example 84
 
 Keys example Pro tip: press m to comment
 Press ctrl + a to select all
@@ -14362,7 +12112,7 @@ Mac specific keys - see DeviceUtils ⌘ ⌥ ⌃ 
 
 > Note: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.
 
-### Example: Example 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,27 +12217,27 @@ 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-user">
                 </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-driver">
                 </span>
                 <span>secondary</span>
             </div>
             <div class="label label-info">
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-truck">
                 </span>
                 <span>info</span>
             </div>
             <div class="label label-success">
-                <span class="rioglyph rioglyph-truck">
+                <span class="rioglyph rioglyph-van">
                 </span>
                 <span>success</span>
             </div>
@@ -14497,12 +12247,12 @@ muted
                 <span>warning</span>
             </div>
             <div class="label label-danger">
-                <span class="rioglyph rioglyph-truck">
+                <span class="rioglyph rioglyph-trailer">
                 </span>
                 <span>danger</span>
             </div>
             <div class="label label-muted">
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-user">
                 </span>
                 <span>muted</span>
             </div>
@@ -14513,42 +12263,42 @@ 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-trailer">
                 </span>
             </div>
             <div class="label label-primary label-filled">
                 <span>primary</span>
-                <span class="rioglyph rioglyph-user">
+                <span class="rioglyph rioglyph-truck">
                 </span>
             </div>
             <div class="label label-secondary label-filled">
                 <span>secondary</span>
-                <span class="rioglyph rioglyph-user">
+                <span class="rioglyph rioglyph-car">
                 </span>
             </div>
             <div class="label label-info label-filled">
                 <span>info</span>
-                <span class="rioglyph rioglyph-driver">
+                <span class="rioglyph rioglyph-businessman">
                 </span>
             </div>
             <div class="label label-success label-filled">
                 <span>success</span>
-                <span class="rioglyph rioglyph-van">
+                <span class="rioglyph rioglyph-user">
                 </span>
             </div>
             <div class="label label-warning label-filled">
                 <span>warning</span>
-                <span class="rioglyph rioglyph-businessman">
+                <span class="rioglyph rioglyph-car">
                 </span>
             </div>
             <div class="label label-danger label-filled">
                 <span>danger</span>
-                <span class="rioglyph rioglyph-car">
+                <span class="rioglyph rioglyph-driver">
                 </span>
             </div>
             <div class="label label-muted label-filled">
                 <span>muted</span>
-                <span class="rioglyph rioglyph-van">
+                <span class="rioglyph rioglyph-driver">
                 </span>
             </div>
         </div>
@@ -14590,7 +12340,7 @@ label-default
 
 ## Lists
 
-### Example: Example 103
+### Example: Example 86
 
 Ordered list
 
@@ -14952,7 +12702,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 +12730,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 +12852,7 @@ list-group border rounded
 
 ## Panels
 
-### Example: Example 105
+### Example: Example 88
 
 panel-heading 1
 
@@ -15272,7 +13022,7 @@ panel-default
 
 ## Progress bars
 
-### Example: Example 106
+### Example: Example 89
 
 Standard
 
@@ -15477,7 +13227,9 @@ progress
 
 ## Wells
 
-### Example: Example 107
+Forms
+
+### Example: Example 90
 
 Hi, my name is well-sm
 
@@ -15512,7 +13264,7 @@ well
 
 ## Forms
 
-### Example: Example 108
+### Example: Example 91
 
 Legend
 
@@ -15917,7 +13669,7 @@ Action
 
 ## Form sized examples
 
-### Example: Example 109
+### Example: Example 92
 
 Size by form-Group class
 form-group-sm
@@ -15996,11 +13748,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 +13763,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 +13856,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 +13928,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 +14013,9 @@ Lorem ipsum
 
 ## Input resize
 
-### Example: Example 111
+Animate
+
+### Example: Example 94
 
 resize-none resize-vertical
 
@@ -16274,9 +14028,17 @@ resize-none resize-vertical
 </div>
 ```
 
-## Animations
+## CSS Animations
+
+### Example: Example 95
+
+slide
+
+fade
 
-### Example: Example 112
+scale
+
+rotate
 
 slide-out
 
@@ -16284,11 +14046,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
 
@@ -16299,316 +14063,117 @@ 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 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 />
+            <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 />
-            <div className='display-flex justify-content-center align-items-center height-300'>
+            <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 +14196,334 @@ 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
+CSS Filter
+
+### Example: Example 96
 
 Transition properties
 
@@ -16933,7 +14607,7 @@ transition-duration-05
 
 ## Blur
 
-### Example: Example 114
+### Example: Example 97
 
 
 
@@ -16982,7 +14656,9 @@ blur-0
 
 ## Backdrop blur
 
-### Example: Example 115
+Utilities
+
+### Example: Example 98
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.
 
@@ -17048,7 +14724,9 @@ backdrop-blur-1
 
 ## Aspect ratio
 
-### Example: Example 116
+The aspect-ratio class property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
+
+### Example: Example 99
 
 With fixed width
 
@@ -17115,7 +14793,7 @@ aspect-ratio-1
 
 ## Inset
 
-### Example: Example 117
+### Example: Example 100
 
 inset-0
 
@@ -17175,7 +14853,9 @@ inset-0
 
 ## Helper
 
-### Example: Example 118
+Transform
+
+### Example: Example 101
 
 clearance clearfix children-first-border-top-none first-child-border-top-none children-last-border-bottom-none last-child-border-bottom-none children-first-margin-top-0 first-child-margin-top-0 children-last-margin-bottom-0 last-child-margin-bottom-0
 
@@ -17200,7 +14880,7 @@ clearance clearfix children-first-border-top-none first-child-border-top-none ch
 
 > 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°
 
@@ -17315,7 +14995,7 @@ rotate-0
 
 > Note: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.
 
-### Example: Example 120
+### Example: Example 103
 
 Scale
 
@@ -17404,9 +15084,13 @@ scale-50
 
 ## Translate
 
+Translate classes to move certain element with css transform. For example you can useposition-relative for the parent element and for the child element a combination of something likeposition-absolutetop-50pcttranslate-x-50pct-y-50pctleft-50pct
+
 > Note: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.
 
-### Example: Example 121
+Visibility
+
+### Example: Example 104
 
 
 
@@ -17443,7 +15127,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 +15152,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 +15213,7 @@ overflow-auto
 
 ## Visibility
 
-### Example: Example 124
+### Example: Example 107
 
 Visible only at a certain breakpoint
 
@@ -17929,7 +15613,7 @@ visibility-hidden
 
 ## Z-index
 
-### Example: Example 125
+### Example: Example 108