tuix-webcomponents 0.95.0 → 0.95.1

package/custom-elements.json

@@ -899,244 +899,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-dropdown/TuixDropdown.styles.ts",
@@ -1715,55 +1477,81 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon-button/TuixIconButton.ts",
+      "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": "TuixIconButton",
+          "name": "TuixCheckbox",
           "members": [
             {
               "kind": "field",
-              "name": "icon",
-              "attribute": "icon"
-            },
-            {
-              "kind": "method",
-              "name": "_updateIconColor",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_buttonContent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
+              "name": "checked",
+              "type": {
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "default": "false",
+              "attribute": "checked"
             },
             {
               "kind": "field",
@@ -1773,11 +1561,7 @@
               },
               "default": "false",
               "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1787,145 +1571,144 @@
               },
               "default": "false",
               "attribute": "dark",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconColor",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "error",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
               "default": "''",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "attribute": "labelSide"
             },
             {
               "kind": "method",
-              "name": "_getTextColor",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "_onCheckboxChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_handleClick",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "_getIconMode",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_iconTemplate",
-              "privacy": "protected",
+              "name": "_getFullContainerClasses",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "type": {
-                    "text": "IconName"
-                  }
-                },
-                {
-                  "name": "iconSize",
-                  "type": {
-                    "text": "IconSizeVariant"
-                  }
+                  "text": "ClassInfo"
                 }
-              ],
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
               }
             }
           ],
           "attributes": [
             {
-              "name": "icon",
-              "fieldName": "icon"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "checked"
             },
             {
-              "name": "variant",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
-              "name": "disabled",
+              "name": "dark",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "dark"
             },
             {
-              "name": "dark",
+              "name": "error",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "dark",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "TuixBaseButton",
-            "module": "/src/tuix-button/TuixBaseButton"
-          },
-          "tagName": "tuix-icon-button",
-          "customElement": true,
-          "events": [
+              "fieldName": "error"
+            },
             {
-              "name": "customClick",
+              "name": "label",
               "type": {
-                "text": "CustomEvent"
+                "text": "string"
               },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "fieldName": "labelSide"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "tuix-checkbox",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixIconButton",
+          "name": "TuixCheckbox",
           "declaration": {
-            "name": "TuixIconButton",
-            "module": "src/tuix-icon-button/TuixIconButton.ts"
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-icon-button",
+          "name": "tuix-checkbox",
           "declaration": {
-            "name": "TuixIconButton",
-            "module": "src/tuix-icon-button/TuixIconButton.ts"
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
           }
         }
       ]
@@ -2704,45 +2487,262 @@
               "fieldName": "dark"
             },
             {
-              "name": "readonly",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "autofocus"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "tuix-input",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TuixInput",
+          "declaration": {
+            "name": "TuixInput",
+            "module": "src/tuix-input/TuixInput.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tuix-input",
+          "declaration": {
+            "name": "TuixInput",
+            "module": "src/tuix-input/TuixInput.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-icon-button/TuixIconButton.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TuixIconButton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "icon",
+              "attribute": "icon"
+            },
+            {
+              "kind": "method",
+              "name": "_updateIconColor",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_buttonContent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "''",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getTextColor",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_iconTemplate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "IconName"
+                  }
+                },
+                {
+                  "name": "iconSize",
+                  "type": {
+                    "text": "IconSizeVariant"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "icon",
+              "fieldName": "icon"
+            },
+            {
+              "name": "variant",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "readonly"
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "name": "autofocus",
+              "name": "dark",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "autofocus"
+              "fieldName": "dark",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "TuixBaseButton",
+            "module": "/src/tuix-button/TuixBaseButton"
           },
-          "tagName": "tuix-input",
-          "customElement": true
+          "tagName": "tuix-icon-button",
+          "customElement": true,
+          "events": [
+            {
+              "name": "customClick",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixInput",
+          "name": "TuixIconButton",
           "declaration": {
-            "name": "TuixInput",
-            "module": "src/tuix-input/TuixInput.ts"
+            "name": "TuixIconButton",
+            "module": "src/tuix-icon-button/TuixIconButton.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-input",
+          "name": "tuix-icon-button",
           "declaration": {
-            "name": "TuixInput",
-            "module": "src/tuix-input/TuixInput.ts"
+            "name": "TuixIconButton",
+            "module": "src/tuix-icon-button/TuixIconButton.ts"
           }
         }
       ]
@@ -4616,6 +4616,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-button/enums/tuix-button.enums.ts",
@@ -4640,12 +4646,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-button/stories/tuix-button.stories.ts",
@@ -4688,53 +4688,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "CheckboxIconColorLight",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  [CheckboxIconMode.DEFAULT]: Palette.WHITE,\n  [CheckboxIconMode.DISABLED]: Palette.PRIMARY_300,\n  [CheckboxIconMode.ERROR]: Palette.WHITE,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "CheckboxIconColorDark",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  [CheckboxIconMode.DEFAULT]: DarkPalette.WHITE,\n  [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,\n  [CheckboxIconMode.ERROR]: DarkPalette.WHITE,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CheckboxIconColorLight",
-          "declaration": {
-            "name": "CheckboxIconColorLight",
-            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CheckboxIconColorDark",
-          "declaration": {
-            "name": "CheckboxIconColorDark",
-            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
+      "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts",
+      "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4742,15 +4702,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: {\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": "tuixCheckboxExample",
+          "name": "tuixDropdownObjectList",
           "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: '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": [
@@ -4759,34 +4719,22 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
+            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixCheckboxExample",
+          "name": "tuixDropdownObjectList",
           "declaration": {
-            "name": "tuixCheckboxExample",
-            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
+            "name": "tuixDropdownObjectList",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
           }
         }
       ]
     },
     {
       "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-dropdown/stories/tuix-dropdown.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4794,15 +4742,15 @@
           "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  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": "tuixDropdownObjectList",
+          "name": "tuixDropdownExample",
           "type": {
             "text": "Story"
           },
-          "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  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": [
@@ -4811,62 +4759,68 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
+            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixDropdownObjectList",
+          "name": "tuixDropdownExample",
           "declaration": {
-            "name": "tuixDropdownObjectList",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
+            "name": "tuixDropdownExample",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
+      "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "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: { 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  [CheckboxIconMode.DEFAULT]: Palette.WHITE,\n  [CheckboxIconMode.DISABLED]: Palette.PRIMARY_300,\n  [CheckboxIconMode.ERROR]: Palette.WHITE,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixDropdownExample",
+          "name": "CheckboxIconColorDark",
           "type": {
-            "text": "Story"
+            "text": "object"
           },
-          "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  [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.stories.ts"
+            "name": "CheckboxIconColorLight",
+            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixDropdownExample",
+          "name": "CheckboxIconColorDark",
           "declaration": {
-            "name": "tuixDropdownExample",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
+            "name": "CheckboxIconColorDark",
+            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
+      "path": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4874,15 +4828,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixIconButton',\n  component: 'tuix-icon-button',\n  argTypes: {\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    icon: {\n      control: 'select',\n      options: Object.values(IconName),\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    onClick: { action: 'customClick' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-icon-button\n        variant=\"${args.variant}\"\n        icon=\"${args.icon}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        @customClick=\"${args.onClick}\"\n      />\n    </div>\n  `,\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": "iconButton",
+          "name": "tuixCheckboxExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    variant: MainVariant.PRIMARY,\n    icon: IconName.ARROW_DOWN,\n    disabled: false,\n    dark: false,\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": [
@@ -4891,19 +4845,25 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "iconButton",
+          "name": "tuixCheckboxExample",
           "declaration": {
-            "name": "iconButton",
-            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+            "name": "tuixCheckboxExample",
+            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
           }
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-icon/enums/tuix-icon.enums.ts",
@@ -5088,6 +5048,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  title: 'TuixIconButton',\n  component: 'tuix-icon-button',\n  argTypes: {\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    icon: {\n      control: 'select',\n      options: Object.values(IconName),\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    onClick: { action: 'customClick' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-icon-button\n        variant=\"${args.variant}\"\n        icon=\"${args.icon}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        @customClick=\"${args.onClick}\"\n      />\n    </div>\n  `,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "iconButton",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{\n  args: {\n    variant: MainVariant.PRIMARY,\n    icon: IconName.ARROW_DOWN,\n    disabled: false,\n    dark: false,\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconButton",
+          "declaration": {
+            "name": "iconButton",
+            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-link/enums/linkTarget.enum.ts",
@@ -5266,12 +5266,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-table/interfaces/tuix-table.interface.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-table/stories/tuix-table.stories.ts",
@@ -5312,6 +5306,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-table/interfaces/tuix-table.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-text/enums/tuix-text.enums.ts",