tuix-webcomponents 0.93.0 → 0.94.0

package/custom-elements.json

@@ -231,6 +231,22 @@
             "module": "./tuix-table/interfaces/tuix-table.interface.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "SortDirection",
+          "declaration": {
+            "name": "SortDirection",
+            "module": "./tuix-table/interfaces/tuix-table.interface.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SortEventDetail",
+          "declaration": {
+            "name": "SortEventDetail",
+            "module": "./tuix-table/interfaces/tuix-table.interface.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ThreeDotsLoaderConfig",
@@ -247,6 +263,14 @@
             "module": "./tuix-table/interfaces/tuix-table.interface.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "TuixSortEvent",
+          "declaration": {
+            "name": "TuixSortEvent",
+            "module": "./tuix-table/interfaces/tuix-table.interface.js"
+          }
+        },
         {
           "kind": "js",
           "name": "TuixTableElement",
@@ -875,6 +899,244 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-checkbox/TuixCheckbox.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "hostStyles",
+          "default": "css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n    --t-label-right-default-justify: flex-start;\n    --t-label-left-default-justify: space-between;\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxContainerStyles",
+          "default": "css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    --t-checkbox-size-box: 1.5rem;\n    --t-checkbox-shadow-width: 2px;\n    --t-checkbox-border-radius: 0.25rem;\n    display: block;\n    position: relative;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    min-width: var(--t-checkbox-size-box);\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-checkbox-container {\n      --t-checkbox-size-box: 1rem;\n      --t-checkbox-shadow-width: 1px;\n      --t-checkbox-border-radius: 0.125rem;\n      margin-top: 1px;\n    }\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxCheckmarkStyles",
+          "default": "css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    border-radius: var(--t-checkbox-border-radius);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n    width: calc(var(--t-checkbox-size-box) - 0.5rem);\n    height: calc(var(--t-checkbox-size-box) - 0.5rem);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n      var(--t-stroke-color-focus);\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxLabelStyles",
+          "default": "css`\n  .t-checkbox-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "hostStyles",
+          "declaration": {
+            "name": "hostStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxContainerStyles",
+          "declaration": {
+            "name": "checkboxContainerStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxCheckmarkStyles",
+          "declaration": {
+            "name": "checkboxCheckmarkStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxLabelStyles",
+          "declaration": {
+            "name": "checkboxLabelStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-checkbox/TuixCheckbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TuixCheckbox",
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "checked"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "error",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "attribute": "labelSide"
+            },
+            {
+              "kind": "method",
+              "name": "_onCheckboxChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getIconMode",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getFullContainerClasses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ClassInfo"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "checked"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "error"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "fieldName": "labelSide"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "tuix-checkbox",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TuixCheckbox",
+          "declaration": {
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tuix-checkbox",
+          "declaration": {
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-dropdown/TuixDropdown.styles.ts",
@@ -1451,244 +1713,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-checkbox/TuixCheckbox.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "hostStyles",
-          "default": "css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n    --t-label-right-default-justify: flex-start;\n    --t-label-left-default-justify: space-between;\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "checkboxContainerStyles",
-          "default": "css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    --t-checkbox-size-box: 1.5rem;\n    --t-checkbox-shadow-width: 2px;\n    --t-checkbox-border-radius: 0.25rem;\n    display: block;\n    position: relative;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    min-width: var(--t-checkbox-size-box);\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-checkbox-container {\n      --t-checkbox-size-box: 1rem;\n      --t-checkbox-shadow-width: 1px;\n      --t-checkbox-border-radius: 0.125rem;\n      margin-top: 1px;\n    }\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "checkboxCheckmarkStyles",
-          "default": "css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    border-radius: var(--t-checkbox-border-radius);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n    width: calc(var(--t-checkbox-size-box) - 0.5rem);\n    height: calc(var(--t-checkbox-size-box) - 0.5rem);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n      var(--t-stroke-color-focus);\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "checkboxLabelStyles",
-          "default": "css`\n  .t-checkbox-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "hostStyles",
-          "declaration": {
-            "name": "hostStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxContainerStyles",
-          "declaration": {
-            "name": "checkboxContainerStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxCheckmarkStyles",
-          "declaration": {
-            "name": "checkboxCheckmarkStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxLabelStyles",
-          "declaration": {
-            "name": "checkboxLabelStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-checkbox/TuixCheckbox.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "TuixCheckbox",
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "checked"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "dark",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "error",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "labelSide",
-              "type": {
-                "text": "CheckboxLabelSide"
-              },
-              "attribute": "labelSide"
-            },
-            {
-              "kind": "method",
-              "name": "_onCheckboxChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_getIconMode",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_getFullContainerClasses",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "ClassInfo"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "checked"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dark"
-            },
-            {
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "error"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "label"
-            },
-            {
-              "name": "labelSide",
-              "type": {
-                "text": "CheckboxLabelSide"
-              },
-              "fieldName": "labelSide"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "tuix-checkbox",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TuixCheckbox",
-          "declaration": {
-            "name": "TuixCheckbox",
-            "module": "src/tuix-checkbox/TuixCheckbox.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "tuix-checkbox",
-          "declaration": {
-            "name": "TuixCheckbox",
-            "module": "src/tuix-checkbox/TuixCheckbox.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-icon/TuixIcon.icons.ts",
@@ -3041,22 +3065,128 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-radio-button/TuixRadioButton.styles.ts",
+      "path": "src/tuix-paper/TuixPaper.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "radioHostStyles",
-          "default": "css`\n  ${hostStyles}\n  :host {\n    --t-margin-between-radio-buttons: 1rem;\n    --t-radio-button-inner-color-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "radioButtonContainerStyles",
-          "default": "css`\n  .t-radio-button-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-radio-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-radio-button-container {\n    --t-radio-button-size-box: 1.5rem;\n    --t-radio-button-shadow-width: 2px;\n    display: block;\n    position: relative;\n    height: var(--t-radio-button-size-box);\n    width: var(--t-radio-button-size-box);\n    min-width: var(--t-radio-button-size-box);\n  }\n  .t-radio-button-container .t-radio-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-radio-button-container {\n      --t-radio-button-size-box: 1rem;\n      --t-radio-button-shadow-width: 1px;\n      margin-top: 1px;\n    }\n  }\n`"
-        },
+          "name": "paperStyles",
+          "default": "css`\n  ${unsafeCSS(`\n  .elevation {\n    background-color: ${Palette.WHITE};\n  }\n  .elevation.dark_${PaperElevation.VARIANT_0} {\n    background-color: ${Palette.BLACK};\n  }\n  ${calculatedStyles}\n  .elevation.variant_${PaperElevation.VARIANT_4} {\n    box-shadow: 0px 7px 24px ${Palette.SHADOW};\n  }\n  .elevation.dark_${PaperElevation.VARIANT_4} {\n    background-color: rgb(33, 33, 40);\n  }\n`)}\n`"
+        }
+      ],
+      "exports": [
         {
-          "kind": "variable",
-          "name": "radioButtonStyles",
-          "default": "css`\n  .t-radio-button-full-container.t-multiple-options {\n    margin-bottom: var(--t-margin-between-radio-buttons);\n  }\n  .t-radio-button-container .t-radio-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-radio-button-size-box);\n    width: var(--t-radio-button-size-box);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n    border-radius: 50%;\n  }\n  .t-radio-button-container\n    .t-radio-button:checked\n    ~ .t-radio-button-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {\n    box-shadow: 0 0 0px var(--t-radio-button-shadow-width)\n      var(--t-stroke-color-focus);\n  }\n  .t-radio-button-full-container:hover\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-full-container.t-with-error\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n\n  .t-radio-button-container\n    .t-radio-button:disabled\n    ~ .t-radio-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`"
+          "kind": "js",
+          "name": "paperStyles",
+          "declaration": {
+            "name": "paperStyles",
+            "module": "src/tuix-paper/TuixPaper.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-paper/TuixPaper.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TuixPaper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "elevation",
+              "attribute": "elevation"
+            },
+            {
+              "kind": "field",
+              "name": "borderRadius",
+              "attribute": "border-radius"
+            },
+            {
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_getOptionalClasses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ClassInfo"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "elevation",
+              "fieldName": "elevation"
+            },
+            {
+              "name": "border-radius",
+              "fieldName": "borderRadius"
+            },
+            {
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "tuix-paper",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TuixPaper",
+          "declaration": {
+            "name": "TuixPaper",
+            "module": "src/tuix-paper/TuixPaper.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tuix-paper",
+          "declaration": {
+            "name": "TuixPaper",
+            "module": "src/tuix-paper/TuixPaper.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-radio-button/TuixRadioButton.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "radioHostStyles",
+          "default": "css`\n  ${hostStyles}\n  :host {\n    --t-margin-between-radio-buttons: 1rem;\n    --t-radio-button-inner-color-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "radioButtonContainerStyles",
+          "default": "css`\n  .t-radio-button-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-radio-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-radio-button-container {\n    --t-radio-button-size-box: 1.5rem;\n    --t-radio-button-shadow-width: 2px;\n    display: block;\n    position: relative;\n    height: var(--t-radio-button-size-box);\n    width: var(--t-radio-button-size-box);\n    min-width: var(--t-radio-button-size-box);\n  }\n  .t-radio-button-container .t-radio-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-radio-button-container {\n      --t-radio-button-size-box: 1rem;\n      --t-radio-button-shadow-width: 1px;\n      margin-top: 1px;\n    }\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "radioButtonStyles",
+          "default": "css`\n  .t-radio-button-full-container.t-multiple-options {\n    margin-bottom: var(--t-margin-between-radio-buttons);\n  }\n  .t-radio-button-container .t-radio-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-radio-button-size-box);\n    width: var(--t-radio-button-size-box);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n    border-radius: 50%;\n  }\n  .t-radio-button-container\n    .t-radio-button:checked\n    ~ .t-radio-button-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {\n    box-shadow: 0 0 0px var(--t-radio-button-shadow-width)\n      var(--t-stroke-color-focus);\n  }\n  .t-radio-button-full-container:hover\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-full-container.t-with-error\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n\n  .t-radio-button-container\n    .t-radio-button:disabled\n    ~ .t-radio-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`"
         },
         {
           "kind": "variable",
@@ -3306,126 +3436,33 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-paper/TuixPaper.styles.ts",
+      "path": "src/tuix-table/TuixTable.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "paperStyles",
-          "default": "css`\n  ${unsafeCSS(`\n  .elevation {\n    background-color: ${Palette.WHITE};\n  }\n  .elevation.dark_${PaperElevation.VARIANT_0} {\n    background-color: ${Palette.BLACK};\n  }\n  ${calculatedStyles}\n  .elevation.variant_${PaperElevation.VARIANT_4} {\n    box-shadow: 0px 7px 24px ${Palette.SHADOW};\n  }\n  .elevation.dark_${PaperElevation.VARIANT_4} {\n    background-color: rgb(33, 33, 40);\n  }\n`)}\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "paperStyles",
-          "declaration": {
-            "name": "paperStyles",
-            "module": "src/tuix-paper/TuixPaper.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-paper/TuixPaper.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "TuixPaper",
-          "members": [
-            {
-              "kind": "field",
-              "name": "elevation",
-              "attribute": "elevation"
-            },
-            {
-              "kind": "field",
-              "name": "borderRadius",
-              "attribute": "border-radius"
-            },
-            {
-              "kind": "field",
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "dark",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "_getOptionalClasses",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "ClassInfo"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "elevation",
-              "fieldName": "elevation"
-            },
-            {
-              "name": "border-radius",
-              "fieldName": "borderRadius"
-            },
-            {
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dark"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "tuix-paper",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TuixPaper",
-          "declaration": {
-            "name": "TuixPaper",
-            "module": "src/tuix-paper/TuixPaper.ts"
-          }
+          "name": "tableHostStyles",
+          "default": "css`\n  :host {\n    display: block;\n    width: 100%;\n\n    --t-table-header-bg: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-table-header-text-color: ${unsafeCSS(Palette.PRIMARY_700)};\n    --t-table-header-focus-color: ${unsafeCSS(Palette.MAIN)};\n    --t-table-cell-bg: ${unsafeCSS(Palette.WHITE)};\n    --t-table-cell-border-color: ${unsafeCSS(Palette.NEUTRAL_200)};\n    --t-table-entity-border-color: ${unsafeCSS(Palette.MAIN)};\n    --t-table-row-border-color: ${unsafeCSS(Palette.NEUTRAL_200)};\n    --t-table-mobile-header-bg: ${unsafeCSS(Palette.SECTION_BG)};\n    --t-table-footer-bg: ${unsafeCSS(Palette.WHITE)};\n    --t-table-dropdown-stroke: ${unsafeCSS(Palette.NEUTRAL_200)};\n    --t-table-dropdown-text-color: ${unsafeCSS(Palette.BLACK)};\n    --t-table-dropdown-option-bg: ${unsafeCSS(Palette.WHITE)};\n  }\n\n  :host([dark]) {\n    --t-table-header-bg: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-table-header-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n    --t-table-header-focus-color: ${unsafeCSS(DarkPalette.PRIMARY_300)};\n    --t-table-cell-bg: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-table-cell-border-color: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-table-entity-border-color: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-table-row-border-color: ${unsafeCSS(DarkPalette.ELEVATION_4)};\n    --t-table-mobile-header-bg: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-table-footer-bg: ${unsafeCSS(DarkPalette.PRIMARY_900)};\n    --t-table-dropdown-stroke: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-table-dropdown-text-color: ${unsafeCSS(DarkPalette.PRIMARY_50)};\n    --t-table-dropdown-option-bg: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n  }\n`"
         },
-        {
-          "kind": "custom-element-definition",
-          "name": "tuix-paper",
-          "declaration": {
-            "name": "TuixPaper",
-            "module": "src/tuix-paper/TuixPaper.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-table/TuixTable.styles.ts",
-      "declarations": [
         {
           "kind": "variable",
           "name": "tableStyles",
-          "default": "css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .table_wrapper {\n    width: 100%;\n    overflow-x: auto;\n  }\n\n  table {\n    min-width: 650px;\n    table-layout: fixed;\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  thead th {\n    box-sizing: border-box;\n    padding: 8px;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  tbody tr td {\n    box-sizing: border-box;\n    height: 52px;\n    padding: 6px 8px;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ::slotted(*) {\n    display: inline-flex;\n    align-items: center;\n    margin-right: 8px;\n    gap: 10px;\n  }\n\n  .dropdown_container {\n    position: relative;\n    border-radius: 4px;\n  }\n\n  .dropdown_container .items-per-page-dropdown {\n    width: 55px;\n    border: none;\n    background-color: transparent;\n    padding: 8px;\n    cursor: pointer;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n\n  .dropdown_container .items-per-page-dropdown:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  .dropdown_container .arrow-icon {\n    position: absolute;\n    right: 8px;\n    bottom: 8px;\n    cursor: pointer;\n    pointer-events: none;\n  }\n\n  footer.table_footer {\n    height: 48px;\n    padding: 8px;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  footer.table_footer .items-per-page {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation .buttons {\n    display: flex;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .mobile_table {\n    display: none;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .mobile_table {\n      display: block;\n    }\n\n    footer.table_footer {\n      align-items: flex-start;\n      gap: 8px;\n    }\n\n    .mobile_table .table_row {\n      display: flex;\n      min-height: 40px;\n    }\n\n    .mobile_table .table_row > * {\n      padding: 0 16px;\n      width: 50%;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n    }\n  }\n`"
+          "default": "css`\n  .table_wrapper {\n    width: 100%;\n    overflow-x: auto;\n  }\n\n  table {\n    min-width: 650px;\n    table-layout: fixed;\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  thead {\n    background-color: var(--t-table-header-bg);\n  }\n\n  thead th {\n    box-sizing: border-box;\n    padding: 8px 16px;\n    text-align: left;\n    overflow: hidden;\n  }\n\n  thead th.sortable {\n    cursor: pointer;\n  }\n\n  thead th.sortable:focus-visible {\n    outline: 2px solid var(--t-table-header-focus-color);\n    outline-offset: -2px;\n  }\n\n  thead th .header-cell {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n\n    ${unsafeCSS(LINK_TEXT_COLOR_VAR_NAME)}: var(--t-table-header-text-color);\n  }\n\n  thead th .header-cell .header-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  thead th .sort-icons {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n  }\n\n  thead th .sort-icons tuix-icon {\n    height: 12px;\n    display: flex;\n    align-items: center;\n  }\n\n  tbody tr td {\n    border-bottom: 1px solid var(--t-table-cell-border-color);\n    box-sizing: border-box;\n    height: 52px;\n    padding: 6px 16px;\n    text-align: left;\n    overflow-x: auto;\n    scrollbar-width: none;\n    background-color: var(--t-table-cell-bg);\n  }\n\n  tbody tr td::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n    display: none;\n  }\n\n  ::slotted(*) {\n    display: inline-flex;\n    align-items: center;\n    margin-right: 8px;\n    gap: 10px;\n  }\n\n  .dropdown_container {\n    position: relative;\n    border-radius: 4px;\n    outline: 1px solid var(--t-table-dropdown-stroke);\n  }\n\n  .dropdown_container .items-per-page-dropdown {\n    width: 55px;\n    border: none;\n    background-color: transparent;\n    color: var(--t-table-dropdown-text-color);\n    font-family: 'Rubik', sans-serif;\n    padding: 8px;\n    cursor: pointer;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n\n  .dropdown_container .items-per-page-dropdown option {\n    background-color: var(--t-table-dropdown-option-bg);\n  }\n\n  .dropdown_container .items-per-page-dropdown:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  .dropdown_container .arrow-icon {\n    position: absolute;\n    right: 8px;\n    bottom: 8px;\n    cursor: pointer;\n    pointer-events: none;\n  }\n\n  footer.table_footer {\n    height: 48px;\n    padding: 8px;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background-color: var(--t-table-footer-bg);\n    box-sizing: border-box;\n  }\n\n  footer.table_footer .items-per-page {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation .buttons {\n    display: flex;\n    gap: 8px;\n  }\n\n  footer.table_footer .navigation .buttons .arrow {\n    cursor: pointer;\n  }\n\n  .mobile_table .table_entity {\n    border-bottom: 2px solid var(--t-table-entity-border-color);\n  }\n\n  .mobile_table .table_row {\n    display: flex;\n    border-bottom: 1px solid var(--t-table-row-border-color);\n    min-height: 40px;\n  }\n\n  .mobile_table .table_row > * {\n    padding: 0 16px;\n    width: 50%;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n  }\n\n  .mobile_table .table_row .content {\n    padding: 12px 16px;\n  }\n\n  .mobile_table .table_row .content > * {\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .mobile_table .table_row .header {\n    background-color: var(--t-table-mobile-header-bg);\n\n    ${unsafeCSS(LINK_TEXT_COLOR_VAR_NAME)}: var(--t-table-header-text-color);\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    footer.table_footer.sticky {\n      position: sticky;\n      bottom: 0;\n    }\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    footer.table_footer {\n      position: sticky;\n      bottom: 0;\n    }\n\n    footer.table_footer .navigation .buttons {\n      gap: 4px;\n    }\n  }\n`"
         },
         {
           "kind": "variable",
           "name": "threeDots",
-          "default": "css`\n  .tuix-spinner-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 24px 0;\n  }\n\n  .three-dots-wrapper {\n    display: inline-flex;\n    gap: calc(var(--dot-size) * 0.5);\n    align-items: center;\n    justify-content: center;\n    position: relative;\n  }\n  .three-dots-wrapper .dot {\n    width: var(--dot-size);\n    height: var(--dot-size);\n    background: var(--dot-color);\n    border-radius: 50%;\n    display: inline-block;\n    animation: threeDots 0.9s infinite ease-in-out both;\n  }\n  .three-dots-wrapper .dot:nth-child(2) {\n    animation-delay: 0.15s;\n  }\n  .three-dots-wrapper .dot:nth-child(3) {\n    animation-delay: 0.3s;\n  }\n\n  @keyframes threeDots {\n    0%,\n    80%,\n    100% {\n      transform: scale(0.6);\n      opacity: 0.6;\n    }\n    40% {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .sr-only {\n    border: 0;\n    clip: rect(1px, 1px, 1px, 1px);\n    -webkit-clip-path: inset(50%);\n    clip-path: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    white-space: nowrap;\n  }\n\n  .clientsLoader,\n  .mobileClientsLoader,\n  .tabletClientsLoader {\n    display: flex;\n    justify-content: center;\n    padding: 16px 0;\n  }\n`"
+          "default": "css`\n  .tuix-spinner-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 24px 0;\n  }\n\n  .three-dots-wrapper {\n    display: inline-flex;\n    gap: calc(var(--dot-size) * 0.5);\n    align-items: center;\n    justify-content: center;\n    position: relative;\n  }\n  .three-dots-wrapper .dot {\n    width: var(--dot-size);\n    height: var(--dot-size);\n    background: var(--dot-color);\n    border-radius: 50%;\n    display: inline-block;\n    animation: threeDots 0.9s infinite ease-in-out both;\n  }\n  .three-dots-wrapper .dot:nth-child(2) {\n    animation-delay: 0.15s;\n  }\n  .three-dots-wrapper .dot:nth-child(3) {\n    animation-delay: 0.3s;\n  }\n\n  @keyframes threeDots {\n    0%,\n    80%,\n    100% {\n      transform: scale(0.6);\n      opacity: 0.6;\n    }\n    40% {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .sr-only {\n    border: 0;\n    clip: rect(1px, 1px, 1px, 1px);\n    -webkit-clip-path: inset(50%);\n    clip-path: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    white-space: nowrap;\n  }\n`"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "tableHostStyles",
+          "declaration": {
+            "name": "tableHostStyles",
+            "module": "src/tuix-table/TuixTable.styles.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "tableStyles",
@@ -3453,6 +3490,16 @@
           "description": "",
           "name": "TuixTable",
           "members": [
+            {
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "paginated",
@@ -3548,6 +3595,23 @@
               "default": "false",
               "attribute": "isLoadingData"
             },
+            {
+              "kind": "field",
+              "name": "sortBy",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "sortBy"
+            },
+            {
+              "kind": "field",
+              "name": "sortDirection",
+              "type": {
+                "text": "SortDirection"
+              },
+              "default": "'asc'",
+              "attribute": "sortDirection"
+            },
             {
               "kind": "field",
               "name": "_isTabletView",
@@ -3644,6 +3708,19 @@
               "name": "_setPageSize",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_sort",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "sortKey",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_computeHeaderPercents",
@@ -3651,8 +3728,22 @@
             },
             {
               "kind": "method",
-              "name": "_cellStyleString",
-              "privacy": "private"
+              "name": "_cellBackgroundColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "header",
+                  "type": {
+                    "text": "IDataTableHeader<any>"
+                  }
+                },
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -3673,6 +3764,51 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_renderSortIcons",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "header",
+                  "type": {
+                    "text": "IDataTableHeader<any>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_ariaSort",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "header",
+                  "type": {
+                    "text": "IDataTableHeader<any>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onHeaderKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "sortKey",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_renderHeaderCells",
@@ -3735,13 +3871,42 @@
               "name": "_renderTable",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_renderCard",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_renderCards",
               "privacy": "private"
             }
           ],
+          "events": [
+            {
+              "name": "sort",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
           "attributes": [
+            {
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark"
+            },
             {
               "name": "paginated",
               "type": {
@@ -3825,6 +3990,21 @@
               },
               "default": "false",
               "fieldName": "isLoadingData"
+            },
+            {
+              "name": "sortBy",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "sortBy"
+            },
+            {
+              "name": "sortDirection",
+              "type": {
+                "text": "SortDirection"
+              },
+              "default": "'asc'",
+              "fieldName": "sortDirection"
             }
           ],
           "superclass": {
@@ -4508,59 +4688,53 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
+      "path": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "meta",
+          "name": "CheckboxIconColorLight",
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixDropdown',\n  component: 'tuix-dropdown',\n  argTypes: {\n    value: {\n      control: 'object',\n    },\n    options: {\n      control: 'object',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    placeholder: {\n      control: 'text',\n    },\n    title: {\n      control: 'text',\n    },\n    description: {\n      control: 'text',\n    },\n    descriptionType: {\n      control: 'select',\n      options: [...Object.values(DescriptionType), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n    type: {\n      control: 'select',\n      options: [...Object.values(DropdownType)],\n    },\n    onInputSingle: { action: 'input-single' },\n    onSelect: { action: 'select' },\n  },\n  render: (args: ArgTypes) => html` <div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <tuix-dropdown\n      ?disabled=\"${args.disabled}\"\n      .value=\"${args.value}\"\n      .options=\"${args.options}\"\n      placeholder=\"${args.placeholder}\"\n      title=\"${args.title}\"\n      .description=\"${args.description}\"\n      descriptionType=\"${args.descriptionType}\"\n      ?dark=\"${args.dark}\"\n      .type=\"${args.type}\"\n      @input-single=\"${args.onInputSingle}\"\n      @select=\"${args.onSelect}\"\n    >\n    </tuix-dropdown>\n  </div>`,\n}"
+          "default": "{\n  [CheckboxIconMode.DEFAULT]: Palette.WHITE,\n  [CheckboxIconMode.DISABLED]: Palette.PRIMARY_300,\n  [CheckboxIconMode.ERROR]: Palette.WHITE,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixDropdownObjectList",
+          "name": "CheckboxIconColorDark",
           "type": {
-            "text": "Story"
+            "text": "object"
           },
-          "default": "{\n  args: {\n    value: '458ac6ca-9a57-48c5-8abf-768460397607',\n    // value: { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' }, // This works too\n    disabled: false,\n    title: 'Title',\n    dark: false,\n    options: [\n      { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' },\n      { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397602' },\n      { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397603' },\n      { name: 'apple2', value: '458ac6ca-9a57-48c5-8abf-768460397604' },\n      { name: 'orange2', value: '458ac6ca-9a57-48c5-8abf-768460397605' },\n      { name: 'tomato2', value: '458ac6ca-9a57-48c5-8abf-768460397606' },\n      { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397607' },\n      { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397608' },\n      { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397609' },\n    ],\n    type: DropdownType.SEARCH,\n  },\n}"
+          "default": "{\n  [CheckboxIconMode.DEFAULT]: DarkPalette.WHITE,\n  [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,\n  [CheckboxIconMode.ERROR]: DarkPalette.WHITE,\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "CheckboxIconColorLight",
           "declaration": {
-            "name": "meta",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
+            "name": "CheckboxIconColorLight",
+            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixDropdownObjectList",
+          "name": "CheckboxIconColorDark",
           "declaration": {
-            "name": "tuixDropdownObjectList",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
+            "name": "CheckboxIconColorDark",
+            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
+      "path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4568,15 +4742,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixDropdown',\n  component: 'tuix-dropdown',\n  argTypes: {\n    value: { control: 'text' },\n\n    options: {\n      control: 'select',\n      options: ['fruits', 'countries'],\n      mapping: {\n        fruits: fruits,\n        countries: countryPhoneArray,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    placeholder: { control: 'text' },\n    title: { control: 'text' },\n    description: { control: 'text' },\n    descriptionType: {\n      control: 'select',\n      options: [...Object.values(DescriptionType), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n    type: {\n      control: 'select',\n      options: [...Object.values(DropdownType)],\n    },\n    onInputSingle: { action: 'input-single' },\n    onSelect: { action: 'select' },\n  },\n  render: (args: ArgTypes) => html`<div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <tuix-dropdown\n      ?disabled=\"${args.disabled}\"\n      .value=\"${args.value}\"\n      .options=\"${args.options}\"\n      placeholder=\"${args.placeholder}\"\n      title=\"${args.title}\"\n      .description=\"${args.description}\"\n      descriptionType=\"${args.descriptionType}\"\n      ?dark=\"${args.dark}\"\n      .type=\"${args.type}\"\n      @input-single=\"${args.onInputSingle}\"\n      @select=\"${args.onSelect}\"\n    >\n    </tuix-dropdown>\n  </div>`,\n}"
+          "default": "{\n  title: 'TuixCheckbox',\n  component: 'tuix-checkbox',\n  argTypes: {\n    checked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    labelSide: {\n      control: 'select',\n      options: [...Object.values(CheckboxLabelSide)],\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh; ${args.dark\n        ? 'background-color:' + Palette.BLACK + ';'\n        : ''}}\"\n    >\n      <div\n        style=\"max-width: 300px; display: flex; gap: 16px; flex-direction: column\"\n      >\n        <tuix-checkbox\n          ?checked=\"${args.checked}\"\n          ?disabled=\"${args.disabled}\"\n          ?dark=\"${args.dark}\"\n          ?error=\"${args.error}\"\n          label=\"${args.label}\"\n          labelSide=\"${args.labelSide}\"\n          @change=\"${args.onChange}\"\n        ></tuix-checkbox>\n        <tuix-checkbox\n          ?checked=\"${args.checked}\"\n          ?disabled=\"${args.disabled}\"\n          ?dark=\"${args.dark}\"\n          ?error=\"${args.error}\"\n          labelSide=\"${args.labelSide}\"\n          @change=\"${args.onChange}\"\n        >\n          <tuix-text\n            size=\"${TextSize.FieldPlaceholder}\"\n            color=\"${TextVariant.PRIMARY}\"\n            ?dark=\"${args.dark}\"\n          >\n            Label from slot using a long text with max-width container\n          </tuix-text>\n        </tuix-checkbox>\n      </div>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixDropdownExample",
+          "name": "tuixCheckboxExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    value: 'apple2',\n    disabled: false,\n    title: 'Title',\n    dark: false,\n    options: [\n      'apple',\n      'orange',\n      'tomato',\n      'apple2',\n      'orange2',\n      'tomato2',\n      'apple3',\n      'orange3',\n      'tomato3',\n    ],\n    type: DropdownType.SINGLE,\n  },\n}"
+          "default": "{\n  args: {\n    checked: false,\n    disabled: false,\n    dark: false,\n    error: false,\n    label: 'Label from property',\n    labelSide: CheckboxLabelSide.RIGHT,\n  },\n}"
         }
       ],
       "exports": [
@@ -4585,68 +4759,68 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
+            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixDropdownExample",
+          "name": "tuixCheckboxExample",
           "declaration": {
-            "name": "tuixDropdownExample",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
+            "name": "tuixCheckboxExample",
+            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts",
+      "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "CheckboxIconColorLight",
+          "name": "meta",
           "type": {
             "text": "object"
           },
-          "default": "{\n  [CheckboxIconMode.DEFAULT]: Palette.WHITE,\n  [CheckboxIconMode.DISABLED]: Palette.PRIMARY_300,\n  [CheckboxIconMode.ERROR]: Palette.WHITE,\n}"
+          "default": "{\n  title: 'TuixDropdown',\n  component: 'tuix-dropdown',\n  argTypes: {\n    value: {\n      control: 'object',\n    },\n    options: {\n      control: 'object',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    placeholder: {\n      control: 'text',\n    },\n    title: {\n      control: 'text',\n    },\n    description: {\n      control: 'text',\n    },\n    descriptionType: {\n      control: 'select',\n      options: [...Object.values(DescriptionType), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n    type: {\n      control: 'select',\n      options: [...Object.values(DropdownType)],\n    },\n    onInputSingle: { action: 'input-single' },\n    onSelect: { action: 'select' },\n  },\n  render: (args: ArgTypes) => html` <div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <tuix-dropdown\n      ?disabled=\"${args.disabled}\"\n      .value=\"${args.value}\"\n      .options=\"${args.options}\"\n      placeholder=\"${args.placeholder}\"\n      title=\"${args.title}\"\n      .description=\"${args.description}\"\n      descriptionType=\"${args.descriptionType}\"\n      ?dark=\"${args.dark}\"\n      .type=\"${args.type}\"\n      @input-single=\"${args.onInputSingle}\"\n      @select=\"${args.onSelect}\"\n    >\n    </tuix-dropdown>\n  </div>`,\n}"
         },
         {
           "kind": "variable",
-          "name": "CheckboxIconColorDark",
+          "name": "tuixDropdownObjectList",
           "type": {
-            "text": "object"
+            "text": "Story"
           },
-          "default": "{\n  [CheckboxIconMode.DEFAULT]: DarkPalette.WHITE,\n  [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,\n  [CheckboxIconMode.ERROR]: DarkPalette.WHITE,\n}"
+          "default": "{\n  args: {\n    value: '458ac6ca-9a57-48c5-8abf-768460397607',\n    // value: { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' }, // This works too\n    disabled: false,\n    title: 'Title',\n    dark: false,\n    options: [\n      { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' },\n      { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397602' },\n      { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397603' },\n      { name: 'apple2', value: '458ac6ca-9a57-48c5-8abf-768460397604' },\n      { name: 'orange2', value: '458ac6ca-9a57-48c5-8abf-768460397605' },\n      { name: 'tomato2', value: '458ac6ca-9a57-48c5-8abf-768460397606' },\n      { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397607' },\n      { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397608' },\n      { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397609' },\n    ],\n    type: DropdownType.SEARCH,\n  },\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "CheckboxIconColorLight",
+          "name": "default",
           "declaration": {
-            "name": "CheckboxIconColorLight",
-            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
+            "name": "meta",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "CheckboxIconColorDark",
+          "name": "tuixDropdownObjectList",
           "declaration": {
-            "name": "CheckboxIconColorDark",
-            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
+            "name": "tuixDropdownObjectList",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts",
+      "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4654,15 +4828,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixCheckbox',\n  component: 'tuix-checkbox',\n  argTypes: {\n    checked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    labelSide: {\n      control: 'select',\n      options: [...Object.values(CheckboxLabelSide)],\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh; ${args.dark\n        ? 'background-color:' + Palette.BLACK + ';'\n        : ''}}\"\n    >\n      <div\n        style=\"max-width: 300px; display: flex; gap: 16px; flex-direction: column\"\n      >\n        <tuix-checkbox\n          ?checked=\"${args.checked}\"\n          ?disabled=\"${args.disabled}\"\n          ?dark=\"${args.dark}\"\n          ?error=\"${args.error}\"\n          label=\"${args.label}\"\n          labelSide=\"${args.labelSide}\"\n          @change=\"${args.onChange}\"\n        ></tuix-checkbox>\n        <tuix-checkbox\n          ?checked=\"${args.checked}\"\n          ?disabled=\"${args.disabled}\"\n          ?dark=\"${args.dark}\"\n          ?error=\"${args.error}\"\n          labelSide=\"${args.labelSide}\"\n          @change=\"${args.onChange}\"\n        >\n          <tuix-text\n            size=\"${TextSize.FieldPlaceholder}\"\n            color=\"${TextVariant.PRIMARY}\"\n            ?dark=\"${args.dark}\"\n          >\n            Label from slot using a long text with max-width container\n          </tuix-text>\n        </tuix-checkbox>\n      </div>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixDropdown',\n  component: 'tuix-dropdown',\n  argTypes: {\n    value: { control: 'text' },\n\n    options: {\n      control: 'select',\n      options: ['fruits', 'countries'],\n      mapping: {\n        fruits: fruits,\n        countries: countryPhoneArray,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    placeholder: { control: 'text' },\n    title: { control: 'text' },\n    description: { control: 'text' },\n    descriptionType: {\n      control: 'select',\n      options: [...Object.values(DescriptionType), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n    type: {\n      control: 'select',\n      options: [...Object.values(DropdownType)],\n    },\n    onInputSingle: { action: 'input-single' },\n    onSelect: { action: 'select' },\n  },\n  render: (args: ArgTypes) => html`<div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <tuix-dropdown\n      ?disabled=\"${args.disabled}\"\n      .value=\"${args.value}\"\n      .options=\"${args.options}\"\n      placeholder=\"${args.placeholder}\"\n      title=\"${args.title}\"\n      .description=\"${args.description}\"\n      descriptionType=\"${args.descriptionType}\"\n      ?dark=\"${args.dark}\"\n      .type=\"${args.type}\"\n      @input-single=\"${args.onInputSingle}\"\n      @select=\"${args.onSelect}\"\n    >\n    </tuix-dropdown>\n  </div>`,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixCheckboxExample",
+          "name": "tuixDropdownExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    checked: false,\n    disabled: false,\n    dark: false,\n    error: false,\n    label: 'Label from property',\n    labelSide: CheckboxLabelSide.RIGHT,\n  },\n}"
+          "default": "{\n  args: {\n    value: 'apple2',\n    disabled: false,\n    title: 'Title',\n    dark: false,\n    options: [\n      'apple',\n      'orange',\n      'tomato',\n      'apple2',\n      'orange2',\n      'tomato2',\n      'apple3',\n      'orange3',\n      'tomato3',\n    ],\n    type: DropdownType.SINGLE,\n  },\n}"
         }
       ],
       "exports": [
@@ -4671,19 +4845,25 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
+            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixCheckboxExample",
+          "name": "tuixDropdownExample",
           "declaration": {
-            "name": "tuixCheckboxExample",
-            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
+            "name": "tuixDropdownExample",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
           }
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-icon/enums/tuix-icon.enums.ts",
@@ -4996,13 +5176,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts",
+      "path": "src/tuix-paper/enums/tuix-paper.enum.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts",
+      "path": "src/tuix-paper/stories/tuix-paper.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5010,15 +5190,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixRadioButton',\n  component: 'tuix-radio-button',\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    options: {\n      control: 'object',\n    },\n    labelSide: {\n      control: 'select',\n      options: Object.values(CheckboxLabelSide),\n    },\n    selectedOption: {\n      control: 'object',\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html` <div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh; ${args.dark\n      ? 'background-color:' + Palette.BLACK + ';'\n      : ''}}\"\n  >\n    <div\n      style=\"max-width: 300px; display: flex; gap: 16px; flex-direction: column\"\n    >\n      <tuix-radio-button\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        ?error=\"${args.error}\"\n        .options=\"${args.options}\"\n        labelSide=\"${args.labelSide}\"\n        .selectedOption=\"${args.selectedOption}\"\n        @change=\"${args.onChange}\"\n      >\n        <tuix-text\n          size=\"${TextSize.FieldPlaceholder}\"\n          color=\"${TextVariant.PRIMARY}\"\n          slot=\"label-1\"\n          ?dark=\"${args.dark}\"\n        >\n          Label from named slot 1 using a long text with max-width container\n        </tuix-text>\n      </tuix-radio-button>\n    </div>\n  </div>`,\n}"
+          "default": "{\n  title: 'TuixPaper',\n  component: 'tuix-paper',\n  argTypes: {\n    elevation: {\n      control: 'select',\n      options: Object.values(PaperElevation),\n    },\n    borderRadius: {\n      control: 'select',\n      options: Object.values(BorderRadiusPaper),\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <style>\n      tuix-text {\n        width: 181px;\n        height: 181px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    </style>\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n    ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-paper\n        elevation=\"${args.elevation}\"\n        ?dark=\"${args.dark}\"\n        border-radius=\"${args.borderRadius}\"\n      >\n        <tuix-text size=\"${TextSize.Body2}\" ?dark=\"${args.dark}\">\n          Elevation\n        </tuix-text>\n      </tuix-paper>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixRadioButtonExample",
+          "name": "elevation",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    disabled: false,\n    dark: false,\n    error: false,\n    options: ['Option 0', 'Option 1', 'Option 2'],\n    labelSide: CheckboxLabelSide.RIGHT,\n    selectedOption: 'Option 0',\n  },\n}"
+          "default": "{\n  args: {\n    elevation: PaperElevation.VARIANT_1,\n    borderRadius: BorderRadiusPaper.STRONG,\n    dark: false,\n  },\n}"
         }
       ],
       "exports": [
@@ -5027,28 +5207,28 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts"
+            "module": "src/tuix-paper/stories/tuix-paper.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixRadioButtonExample",
+          "name": "elevation",
           "declaration": {
-            "name": "tuixRadioButtonExample",
-            "module": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts"
+            "name": "elevation",
+            "module": "src/tuix-paper/stories/tuix-paper.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-paper/enums/tuix-paper.enum.ts",
+      "path": "src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-paper/stories/tuix-paper.stories.ts",
+      "path": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5056,15 +5236,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixPaper',\n  component: 'tuix-paper',\n  argTypes: {\n    elevation: {\n      control: 'select',\n      options: Object.values(PaperElevation),\n    },\n    borderRadius: {\n      control: 'select',\n      options: Object.values(BorderRadiusPaper),\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <style>\n      tuix-text {\n        width: 181px;\n        height: 181px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    </style>\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n    ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-paper\n        elevation=\"${args.elevation}\"\n        ?dark=\"${args.dark}\"\n        border-radius=\"${args.borderRadius}\"\n      >\n        <tuix-text size=\"${TextSize.Body2}\" ?dark=\"${args.dark}\">\n          Elevation\n        </tuix-text>\n      </tuix-paper>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixRadioButton',\n  component: 'tuix-radio-button',\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    options: {\n      control: 'object',\n    },\n    labelSide: {\n      control: 'select',\n      options: Object.values(CheckboxLabelSide),\n    },\n    selectedOption: {\n      control: 'object',\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html` <div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh; ${args.dark\n      ? 'background-color:' + Palette.BLACK + ';'\n      : ''}}\"\n  >\n    <div\n      style=\"max-width: 300px; display: flex; gap: 16px; flex-direction: column\"\n    >\n      <tuix-radio-button\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        ?error=\"${args.error}\"\n        .options=\"${args.options}\"\n        labelSide=\"${args.labelSide}\"\n        .selectedOption=\"${args.selectedOption}\"\n        @change=\"${args.onChange}\"\n      >\n        <tuix-text\n          size=\"${TextSize.FieldPlaceholder}\"\n          color=\"${TextVariant.PRIMARY}\"\n          slot=\"label-1\"\n          ?dark=\"${args.dark}\"\n        >\n          Label from named slot 1 using a long text with max-width container\n        </tuix-text>\n      </tuix-radio-button>\n    </div>\n  </div>`,\n}"
         },
         {
           "kind": "variable",
-          "name": "elevation",
+          "name": "tuixRadioButtonExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    elevation: PaperElevation.VARIANT_1,\n    borderRadius: BorderRadiusPaper.STRONG,\n    dark: false,\n  },\n}"
+          "default": "{\n  args: {\n    disabled: false,\n    dark: false,\n    error: false,\n    options: ['Option 0', 'Option 1', 'Option 2'],\n    labelSide: CheckboxLabelSide.RIGHT,\n    selectedOption: 'Option 0',\n  },\n}"
         }
       ],
       "exports": [
@@ -5073,15 +5253,15 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-paper/stories/tuix-paper.stories.ts"
+            "module": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "elevation",
+          "name": "tuixRadioButtonExample",
           "declaration": {
-            "name": "elevation",
-            "module": "src/tuix-paper/stories/tuix-paper.stories.ts"
+            "name": "tuixRadioButtonExample",
+            "module": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts"
           }
         }
       ]
@@ -5102,7 +5282,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixTable',\n  component: 'tuix-table',\n  argTypes: {\n    headers: { control: 'object' },\n    data: { control: 'object' },\n    paginated: { control: 'boolean' },\n    disableMobileTable: { control: 'boolean' },\n    showMobileTableInTablet: { control: 'boolean' },\n    pageSizeOptions: { control: 'object' },\n    totalItems: { control: 'number' },\n    currentPage: { control: 'number' },\n    currentSize: { control: 'number' },\n    isLoadingData: { control: 'boolean' },\n    loader: { control: 'object' },\n    onNextPage: { action: 'next-page' },\n    onPreviousPage: { action: 'previous-page' },\n    onPageSizeChange: { action: 'page-size-change' },\n  },\n}"
+          "default": "{\n  title: 'TuixTable',\n  component: 'tuix-table',\n  argTypes: {\n    headers: { control: 'object' },\n    data: { control: 'object' },\n    dark: { control: 'boolean' },\n    paginated: { control: 'boolean' },\n    disableMobileTable: { control: 'boolean' },\n    showMobileTableInTablet: { control: 'boolean' },\n    pageSizeOptions: { control: 'object' },\n    totalItems: { control: 'number' },\n    currentPage: { control: 'number' },\n    currentSize: { control: 'number' },\n    isLoadingData: { control: 'boolean' },\n    loader: { control: 'object' },\n    sortBy: { control: 'text' },\n    sortDirection: { control: 'select', options: ['asc', 'desc'] },\n    onNextPage: { action: 'next-page' },\n    onPreviousPage: { action: 'previous-page' },\n    onPageSizeChange: { action: 'page-size-change' },\n    onSort: { action: 'sort' },\n    onRowAction: { action: 'row-action' },\n  },\n}"
         },
         {
           "kind": "variable",
@@ -5110,7 +5290,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{\n  render: (args: ArgTypes) => Template(args),\n  args: {\n    headers: defaultHeaderDescriptors,\n    data: defaultData,\n    paginated: true,\n    disableMobileTable: false,\n    showMobileTableInTablet: false,\n    pageSizeOptions: [5, 10, 20],\n    totalItems: 8,\n    currentPage: 1,\n    currentSize: 5,\n    isLoadingData: false,\n    loader: {\n      size: '30px',\n      color: Palette.MAIN,\n      visible: true,\n      ariaLabel: 'Loading',\n      wrapperStyle: {\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        padding: '48px 0',\n      },\n    },\n  },\n}"
+          "default": "{\n  render: (args: ArgTypes) => Template(args),\n  args: {\n    headers: defaultHeaderDescriptors,\n    data: defaultData,\n    dark: false,\n    paginated: true,\n    disableMobileTable: false,\n    showMobileTableInTablet: false,\n    pageSizeOptions: [5, 10, 20],\n    totalItems: 8,\n    currentPage: 1,\n    currentSize: 5,\n    isLoadingData: false,\n    sortBy: 'id',\n    sortDirection: 'asc',\n    loader: {\n      size: '30px',\n      visible: true,\n      ariaLabel: 'Loading',\n      wrapperStyle: {\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        padding: '48px 0',\n      },\n    },\n  },\n}"
         }
       ],
       "exports": [
@@ -5212,6 +5392,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-toast/stories/tuix-toast.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  title: 'TuixToast',\n  component: 'tuix-toast',\n  argTypes: {\n    type: {\n      control: 'select',\n      options: Object.values(ToastType),\n    },\n    dark: {\n      control: 'boolean',\n    },\n    visibilityDuration: {\n      control: 'number',\n    },\n    onClose: { action: 'on-close' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"height: 100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <tuix-toast\n        type=\"${args.type}\"\n        ?dark=\"${args.dark}\"\n        visibility-duration=\"${args.visibilityDuration}\"\n        @on-close=\"${args.onClose}\"\n      >\n        Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n        dignissim at orci. Augue vivamus arcu massa porta facilisi.\n      </tuix-toast>\n    </div>\n  `,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "toastExample",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{\n  args: {\n    type: ToastType.TEXT,\n    dark: false,\n    visibilityDuration: 4000,\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toastExample",
+          "declaration": {
+            "name": "toastExample",
+            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-toast/enums/tuix-toast.enums.ts",
@@ -5284,46 +5504,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-toast/stories/tuix-toast.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  title: 'TuixToast',\n  component: 'tuix-toast',\n  argTypes: {\n    type: {\n      control: 'select',\n      options: Object.values(ToastType),\n    },\n    dark: {\n      control: 'boolean',\n    },\n    visibilityDuration: {\n      control: 'number',\n    },\n    onClose: { action: 'on-close' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"height: 100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <tuix-toast\n        type=\"${args.type}\"\n        ?dark=\"${args.dark}\"\n        visibility-duration=\"${args.visibilityDuration}\"\n        @on-close=\"${args.onClose}\"\n      >\n        Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n        dignissim at orci. Augue vivamus arcu massa porta facilisi.\n      </tuix-toast>\n    </div>\n  `,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "toastExample",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{\n  args: {\n    type: ToastType.TEXT,\n    dark: false,\n    visibilityDuration: 4000,\n  },\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "toastExample",
-          "declaration": {
-            "name": "toastExample",
-            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-toggle-button/interfaces/tuix-toggle.interface.ts",