@progress/kendo-theme-default 10.1.0-dev.4 → 10.1.0-dev.6

package/dist/meta/sassdoc-raw-data.json

@@ -3608,7 +3608,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-calc-size",
-            "value": "calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} )",
+            "value": "calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) )",
             "scope": "default",
             "line": {
                 "start": 73,
@@ -3633,7 +3633,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-inner-calc-size",
-            "value": "calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) )",
+            "value": "calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) )",
             "scope": "default",
             "line": {
                 "start": 80,
@@ -11808,7 +11808,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-checked-image",
-            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 163,
@@ -11833,7 +11833,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-indeterminate-image",
-            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 166,
@@ -26475,19 +26475,44 @@
         }
     },
     {
-        "description": "The sizes map for the Input components.\n",
+        "description": "The calculated height of the Input.\n",
         "commentRange": {
             "start": 75,
             "end": 76
         },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-calc-size",
+            "value": "calc( ( #{$kendo-input-line-height} * 1em ) + ( #{$kendo-input-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) )",
+            "scope": "default",
+            "line": {
+                "start": 77,
+                "end": 77
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The sizes map for the Input components.\n",
+        "commentRange": {
+            "start": 82,
+            "end": 83
+        },
         "context": {
             "type": "variable",
             "name": "kendo-input-sizes",
             "value": "(\n    sm: (\n        padding-x: $kendo-input-sm-padding-x,\n        padding-y: $kendo-input-sm-padding-y,\n        font-size: $kendo-input-sm-font-size,\n        line-height: $kendo-input-sm-line-height,\n        button-padding-x: $kendo-input-sm-padding-y,\n        button-padding-y: $kendo-input-sm-padding-y\n    ),\n    md: (\n        padding-x: $kendo-input-md-padding-x,\n        padding-y: $kendo-input-md-padding-y,\n        font-size: $kendo-input-md-font-size,\n        line-height: $kendo-input-md-line-height,\n        button-padding-x: $kendo-input-md-padding-y,\n        button-padding-y: $kendo-input-md-padding-y\n    ),\n    lg: (\n        padding-x: $kendo-input-lg-padding-x,\n        padding-y: $kendo-input-lg-padding-y,\n        font-size: $kendo-input-lg-font-size,\n        line-height: $kendo-input-lg-line-height,\n        button-padding-x: $kendo-input-lg-padding-y,\n        button-padding-y: $kendo-input-lg-padding-y\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 77,
-                "end": 102
+                "start": 84,
+                "end": 109
             }
         },
         "group": [
@@ -26502,8 +26527,8 @@
     {
         "description": "The background color of the Input components.\n",
         "commentRange": {
-            "start": 104,
-            "end": 105
+            "start": 111,
+            "end": 112
         },
         "context": {
             "type": "variable",
@@ -26511,8 +26536,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 106,
-                "end": 106
+                "start": 113,
+                "end": 113
             }
         },
         "group": [
@@ -26527,8 +26552,8 @@
     {
         "description": "The text color of the Input components.\n",
         "commentRange": {
-            "start": 107,
-            "end": 108
+            "start": 114,
+            "end": 115
         },
         "context": {
             "type": "variable",
@@ -26536,8 +26561,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 109,
-                "end": 109
+                "start": 116,
+                "end": 116
             }
         },
         "group": [
@@ -26552,8 +26577,8 @@
     {
         "description": "The border color of the Input components.\n",
         "commentRange": {
-            "start": 110,
-            "end": 111
+            "start": 117,
+            "end": 118
         },
         "context": {
             "type": "variable",
@@ -26561,8 +26586,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 112,
-                "end": 112
+                "start": 119,
+                "end": 119
             }
         },
         "group": [
@@ -26577,8 +26602,8 @@
     {
         "description": "The shadow of the Input components.\n",
         "commentRange": {
-            "start": 113,
-            "end": 114
+            "start": 120,
+            "end": 121
         },
         "context": {
             "type": "variable",
@@ -26586,8 +26611,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 115,
-                "end": 115
+                "start": 122,
+                "end": 122
             }
         },
         "group": [
@@ -26602,8 +26627,8 @@
     {
         "description": "The background color of the hovered Input components.\n",
         "commentRange": {
-            "start": 117,
-            "end": 118
+            "start": 124,
+            "end": 125
         },
         "context": {
             "type": "variable",
@@ -26611,8 +26636,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 119,
-                "end": 119
+                "start": 126,
+                "end": 126
             }
         },
         "group": [
@@ -26627,8 +26652,8 @@
     {
         "description": "The text color of the hovered Input components.\n",
         "commentRange": {
-            "start": 120,
-            "end": 121
+            "start": 127,
+            "end": 128
         },
         "context": {
             "type": "variable",
@@ -26636,8 +26661,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 122,
-                "end": 122
+                "start": 129,
+                "end": 129
             }
         },
         "group": [
@@ -26652,8 +26677,8 @@
     {
         "description": "The border color of the hovered Input components.\n",
         "commentRange": {
-            "start": 123,
-            "end": 124
+            "start": 130,
+            "end": 131
         },
         "context": {
             "type": "variable",
@@ -26661,8 +26686,8 @@
             "value": "if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 ))",
             "scope": "default",
             "line": {
-                "start": 125,
-                "end": 125
+                "start": 132,
+                "end": 132
             }
         },
         "group": [
@@ -26677,8 +26702,8 @@
     {
         "description": "The shadow of the hovered Input components.\n",
         "commentRange": {
-            "start": 126,
-            "end": 127
+            "start": 133,
+            "end": 134
         },
         "context": {
             "type": "variable",
@@ -26686,8 +26711,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 128,
-                "end": 128
+                "start": 135,
+                "end": 135
             }
         },
         "group": [
@@ -26702,8 +26727,8 @@
     {
         "description": "The background color of the focused Input components.\n",
         "commentRange": {
-            "start": 130,
-            "end": 131
+            "start": 137,
+            "end": 138
         },
         "context": {
             "type": "variable",
@@ -26711,8 +26736,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 132,
-                "end": 132
+                "start": 139,
+                "end": 139
             }
         },
         "group": [
@@ -26727,8 +26752,8 @@
     {
         "description": "The text color of the focused Input components.\n",
         "commentRange": {
-            "start": 133,
-            "end": 134
+            "start": 140,
+            "end": 141
         },
         "context": {
             "type": "variable",
@@ -26736,8 +26761,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 135,
-                "end": 135
+                "start": 142,
+                "end": 142
             }
         },
         "group": [
@@ -26752,8 +26777,8 @@
     {
         "description": "The border color of the focused Input components.\n",
         "commentRange": {
-            "start": 136,
-            "end": 137
+            "start": 143,
+            "end": 144
         },
         "context": {
             "type": "variable",
@@ -26761,8 +26786,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 138,
-                "end": 138
+                "start": 145,
+                "end": 145
             }
         },
         "group": [
@@ -26777,8 +26802,8 @@
     {
         "description": "The shadow of the focused Input components.\n",
         "commentRange": {
-            "start": 139,
-            "end": 140
+            "start": 146,
+            "end": 147
         },
         "context": {
             "type": "variable",
@@ -26786,8 +26811,8 @@
             "value": "0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 ))",
             "scope": "default",
             "line": {
-                "start": 141,
-                "end": 141
+                "start": 148,
+                "end": 148
             }
         },
         "group": [
@@ -26802,8 +26827,8 @@
     {
         "description": "The background color of the selected Input components.\n",
         "commentRange": {
-            "start": 143,
-            "end": 144
+            "start": 150,
+            "end": 151
         },
         "context": {
             "type": "variable",
@@ -26811,8 +26836,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 145,
-                "end": 145
+                "start": 152,
+                "end": 152
             }
         },
         "group": [
@@ -26827,8 +26852,8 @@
     {
         "description": "The text color of the selected Input components.\n",
         "commentRange": {
-            "start": 146,
-            "end": 147
+            "start": 153,
+            "end": 154
         },
         "context": {
             "type": "variable",
@@ -26836,8 +26861,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 148,
-                "end": 148
+                "start": 155,
+                "end": 155
             }
         },
         "group": [
@@ -26852,8 +26877,8 @@
     {
         "description": "The background color of the disabled Input components.\n",
         "commentRange": {
-            "start": 150,
-            "end": 151
+            "start": 157,
+            "end": 158
         },
         "context": {
             "type": "variable",
@@ -26861,8 +26886,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 152,
-                "end": 152
+                "start": 159,
+                "end": 159
             }
         },
         "group": [
@@ -26877,8 +26902,8 @@
     {
         "description": "The text color of the disabled Input components.\n",
         "commentRange": {
-            "start": 153,
-            "end": 154
+            "start": 160,
+            "end": 161
         },
         "context": {
             "type": "variable",
@@ -26886,8 +26911,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 155,
-                "end": 155
+                "start": 162,
+                "end": 162
             }
         },
         "group": [
@@ -26902,8 +26927,8 @@
     {
         "description": "The border color of the disabled Input components.\n",
         "commentRange": {
-            "start": 156,
-            "end": 157
+            "start": 163,
+            "end": 164
         },
         "context": {
             "type": "variable",
@@ -26911,8 +26936,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 158,
-                "end": 158
+                "start": 165,
+                "end": 165
             }
         },
         "group": [
@@ -26927,8 +26952,8 @@
     {
         "description": "The gradient of the disabled Input components.\n",
         "commentRange": {
-            "start": 159,
-            "end": 160
+            "start": 166,
+            "end": 167
         },
         "context": {
             "type": "variable",
@@ -26936,8 +26961,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 161,
-                "end": 161
+                "start": 168,
+                "end": 168
             }
         },
         "group": [
@@ -26952,8 +26977,8 @@
     {
         "description": "The shadow of the disabled Input components.\n",
         "commentRange": {
-            "start": 162,
-            "end": 163
+            "start": 169,
+            "end": 170
         },
         "context": {
             "type": "variable",
@@ -26961,8 +26986,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 164,
-                "end": 164
+                "start": 171,
+                "end": 171
             }
         },
         "group": [
@@ -26977,8 +27002,8 @@
     {
         "description": "The background color of the outline Input components.\n",
         "commentRange": {
-            "start": 166,
-            "end": 167
+            "start": 173,
+            "end": 174
         },
         "context": {
             "type": "variable",
@@ -26986,8 +27011,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 168,
-                "end": 168
+                "start": 175,
+                "end": 175
             }
         },
         "group": [
@@ -27002,8 +27027,8 @@
     {
         "description": "The text color of the outline Input components.\n",
         "commentRange": {
-            "start": 169,
-            "end": 170
+            "start": 176,
+            "end": 177
         },
         "context": {
             "type": "variable",
@@ -27011,8 +27036,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 171,
-                "end": 171
+                "start": 178,
+                "end": 178
             }
         },
         "group": [
@@ -27027,8 +27052,8 @@
     {
         "description": "The border color of the outline Input components.\n",
         "commentRange": {
-            "start": 172,
-            "end": 173
+            "start": 179,
+            "end": 180
         },
         "context": {
             "type": "variable",
@@ -27036,8 +27061,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5))",
             "scope": "default",
             "line": {
-                "start": 174,
-                "end": 174
+                "start": 181,
+                "end": 181
             }
         },
         "group": [
@@ -27052,8 +27077,8 @@
     {
         "description": "The background color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 176,
-            "end": 177
+            "start": 183,
+            "end": 184
         },
         "context": {
             "type": "variable",
@@ -27061,8 +27086,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 178,
-                "end": 178
+                "start": 185,
+                "end": 185
             }
         },
         "group": [
@@ -27077,8 +27102,8 @@
     {
         "description": "The text color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 179,
-            "end": 180
+            "start": 186,
+            "end": 187
         },
         "context": {
             "type": "variable",
@@ -27086,8 +27111,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 181,
-                "end": 181
+                "start": 188,
+                "end": 188
             }
         },
         "group": [
@@ -27102,8 +27127,8 @@
     {
         "description": "The border color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 182,
-            "end": 183
+            "start": 189,
+            "end": 190
         },
         "context": {
             "type": "variable",
@@ -27111,8 +27136,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8))",
             "scope": "default",
             "line": {
-                "start": 184,
-                "end": 184
+                "start": 191,
+                "end": 191
             }
         },
         "group": [
@@ -27127,8 +27152,8 @@
     {
         "description": "The background color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 186,
-            "end": 187
+            "start": 193,
+            "end": 194
         },
         "context": {
             "type": "variable",
@@ -27136,8 +27161,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 188,
-                "end": 188
+                "start": 195,
+                "end": 195
             }
         },
         "group": [
@@ -27152,8 +27177,8 @@
     {
         "description": "The text color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 189,
-            "end": 190
+            "start": 196,
+            "end": 197
         },
         "context": {
             "type": "variable",
@@ -27161,8 +27186,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 191,
-                "end": 191
+                "start": 198,
+                "end": 198
             }
         },
         "group": [
@@ -27177,8 +27202,8 @@
     {
         "description": "The border color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 192,
-            "end": 193
+            "start": 199,
+            "end": 200
         },
         "context": {
             "type": "variable",
@@ -27186,8 +27211,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 194,
-                "end": 194
+                "start": 201,
+                "end": 201
             }
         },
         "group": [
@@ -27202,8 +27227,8 @@
     {
         "description": "The shadow of the outline focused Input components.\n",
         "commentRange": {
-            "start": 195,
-            "end": 196
+            "start": 202,
+            "end": 203
         },
         "context": {
             "type": "variable",
@@ -27211,8 +27236,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 197,
-                "end": 197
+                "start": 204,
+                "end": 204
             }
         },
         "group": [
@@ -27227,8 +27252,8 @@
     {
         "description": "The background color of the flat Input components.\n",
         "commentRange": {
-            "start": 199,
-            "end": 200
+            "start": 206,
+            "end": 207
         },
         "context": {
             "type": "variable",
@@ -27236,8 +27261,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 201,
-                "end": 201
+                "start": 208,
+                "end": 208
             }
         },
         "group": [
@@ -27252,8 +27277,8 @@
     {
         "description": "The text color of the flat Input components.\n",
         "commentRange": {
-            "start": 202,
-            "end": 203
+            "start": 209,
+            "end": 210
         },
         "context": {
             "type": "variable",
@@ -27261,8 +27286,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 204,
-                "end": 204
+                "start": 211,
+                "end": 211
             }
         },
         "group": [
@@ -27277,8 +27302,8 @@
     {
         "description": "The border color of the flat Input components.\n",
         "commentRange": {
-            "start": 205,
-            "end": 206
+            "start": 212,
+            "end": 213
         },
         "context": {
             "type": "variable",
@@ -27286,8 +27311,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 207,
-                "end": 207
+                "start": 214,
+                "end": 214
             }
         },
         "group": [
@@ -27302,8 +27327,8 @@
     {
         "description": "The background color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 209,
-            "end": 210
+            "start": 216,
+            "end": 217
         },
         "context": {
             "type": "variable",
@@ -27311,8 +27336,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 211,
-                "end": 211
+                "start": 218,
+                "end": 218
             }
         },
         "group": [
@@ -27327,8 +27352,8 @@
     {
         "description": "The text color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 212,
-            "end": 213
+            "start": 219,
+            "end": 220
         },
         "context": {
             "type": "variable",
@@ -27336,8 +27361,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 214,
-                "end": 214
+                "start": 221,
+                "end": 221
             }
         },
         "group": [
@@ -27352,8 +27377,8 @@
     {
         "description": "The border color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 215,
-            "end": 216
+            "start": 222,
+            "end": 223
         },
         "context": {
             "type": "variable",
@@ -27361,8 +27386,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 217,
-                "end": 217
+                "start": 224,
+                "end": 224
             }
         },
         "group": [
@@ -27377,8 +27402,8 @@
     {
         "description": "The background color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 219,
-            "end": 220
+            "start": 226,
+            "end": 227
         },
         "context": {
             "type": "variable",
@@ -27386,8 +27411,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 221,
-                "end": 221
+                "start": 228,
+                "end": 228
             }
         },
         "group": [
@@ -27402,8 +27427,8 @@
     {
         "description": "The text color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 222,
-            "end": 223
+            "start": 229,
+            "end": 230
         },
         "context": {
             "type": "variable",
@@ -27411,8 +27436,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 224,
-                "end": 224
+                "start": 231,
+                "end": 231
             }
         },
         "group": [
@@ -27427,8 +27452,8 @@
     {
         "description": "The border color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 225,
-            "end": 226
+            "start": 232,
+            "end": 233
         },
         "context": {
             "type": "variable",
@@ -27436,8 +27461,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 227,
-                "end": 227
+                "start": 234,
+                "end": 234
             }
         },
         "group": [
@@ -27452,8 +27477,8 @@
     {
         "description": "The shadow of the flat focused Input components.\n",
         "commentRange": {
-            "start": 228,
-            "end": 229
+            "start": 235,
+            "end": 236
         },
         "context": {
             "type": "variable",
@@ -27461,8 +27486,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 230,
-                "end": 230
+                "start": 237,
+                "end": 237
             }
         },
         "group": [
@@ -27477,8 +27502,8 @@
     {
         "description": "The text color of the Input placeholder.\n",
         "commentRange": {
-            "start": 232,
-            "end": 233
+            "start": 239,
+            "end": 240
         },
         "context": {
             "type": "variable",
@@ -27486,8 +27511,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 234,
-                "end": 234
+                "start": 241,
+                "end": 241
             }
         },
         "group": [
@@ -27502,8 +27527,8 @@
     {
         "description": "The opacity of the Input placeholder.\n",
         "commentRange": {
-            "start": 235,
-            "end": 236
+            "start": 242,
+            "end": 243
         },
         "context": {
             "type": "variable",
@@ -27511,8 +27536,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 237,
-                "end": 237
+                "start": 244,
+                "end": 244
             }
         },
         "group": [
@@ -27527,8 +27552,8 @@
     {
         "description": "The color of the Input clear value icon.\n",
         "commentRange": {
-            "start": 239,
-            "end": 240
+            "start": 246,
+            "end": 247
         },
         "context": {
             "type": "variable",
@@ -27536,8 +27561,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 241,
-                "end": 241
+                "start": 248,
+                "end": 248
             }
         },
         "group": [
@@ -27552,8 +27577,8 @@
     {
         "description": "The opacity of the Input clear value icon.\n",
         "commentRange": {
-            "start": 242,
-            "end": 243
+            "start": 249,
+            "end": 250
         },
         "context": {
             "type": "variable",
@@ -27561,8 +27586,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 244,
-                "end": 244
+                "start": 251,
+                "end": 251
             }
         },
         "group": [
@@ -27577,8 +27602,8 @@
     {
         "description": "The color of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 245,
-            "end": 246
+            "start": 252,
+            "end": 253
         },
         "context": {
             "type": "variable",
@@ -27586,8 +27611,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 247,
-                "end": 247
+                "start": 254,
+                "end": 254
             }
         },
         "group": [
@@ -27602,8 +27627,8 @@
     {
         "description": "The opacity of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 248,
-            "end": 249
+            "start": 255,
+            "end": 256
         },
         "context": {
             "type": "variable",
@@ -27611,8 +27636,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 250,
-                "end": 250
+                "start": 257,
+                "end": 257
             }
         },
         "group": [
@@ -27627,8 +27652,8 @@
     {
         "description": "The vertical margin of the clear value icon.\n",
         "commentRange": {
-            "start": 252,
-            "end": 253
+            "start": 259,
+            "end": 260
         },
         "context": {
             "type": "variable",
@@ -27636,8 +27661,8 @@
             "value": "k-spacing(0.5)",
             "scope": "default",
             "line": {
-                "start": 254,
-                "end": 254
+                "start": 261,
+                "end": 261
             }
         },
         "group": [
@@ -27652,8 +27677,8 @@
     {
         "description": "The horizontal margin of the clear value icon.\n",
         "commentRange": {
-            "start": 255,
-            "end": 256
+            "start": 262,
+            "end": 263
         },
         "context": {
             "type": "variable",
@@ -27661,8 +27686,8 @@
             "value": "$kendo-input-values-margin-y",
             "scope": "default",
             "line": {
-                "start": 257,
-                "end": 257
+                "start": 264,
+                "end": 264
             }
         },
         "group": [
@@ -27677,8 +27702,8 @@
     {
         "description": "The width of the Input button.\n",
         "commentRange": {
-            "start": 259,
-            "end": 260
+            "start": 266,
+            "end": 267
         },
         "context": {
             "type": "variable",
@@ -27686,8 +27711,8 @@
             "value": "$kendo-button-inner-calc-size",
             "scope": "default",
             "line": {
-                "start": 261,
-                "end": 261
+                "start": 268,
+                "end": 268
             }
         },
         "group": [
@@ -27702,8 +27727,8 @@
     {
         "description": "The border width of the Input button.\n",
         "commentRange": {
-            "start": 262,
-            "end": 263
+            "start": 269,
+            "end": 270
         },
         "context": {
             "type": "variable",
@@ -27711,8 +27736,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 264,
-                "end": 264
+                "start": 271,
+                "end": 271
             }
         },
         "group": [
@@ -27726,64 +27751,14 @@
     },
     {
         "description": "The width of the Input spinner button.\n",
-        "commentRange": {
-            "start": 265,
-            "end": 266
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-input-spinner-width",
-            "value": "$kendo-button-inner-calc-size",
-            "scope": "default",
-            "line": {
-                "start": 267,
-                "end": 267
-            }
-        },
-        "group": [
-            "input"
-        ],
-        "access": "public",
-        "file": {
-            "path": "input/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The icon offset of the Input spinner button.\n",
-        "commentRange": {
-            "start": 268,
-            "end": 269
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-input-spinner-icon-offset",
-            "value": "null",
-            "scope": "default",
-            "line": {
-                "start": 270,
-                "end": 270
-            }
-        },
-        "group": [
-            "input"
-        ],
-        "access": "public",
-        "file": {
-            "path": "input/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color of the Input separator.\n",
         "commentRange": {
             "start": 272,
             "end": 273
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-separator-text",
-            "value": "$kendo-input-border",
+            "name": "kendo-input-spinner-width",
+            "value": "$kendo-button-inner-calc-size",
             "scope": "default",
             "line": {
                 "start": 274,
@@ -27800,15 +27775,15 @@
         }
     },
     {
-        "description": "The opacity of the Input separator.\n",
+        "description": "The icon offset of the Input spinner button.\n",
         "commentRange": {
             "start": 275,
             "end": 276
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-separator-opacity",
-            "value": ".5",
+            "name": "kendo-input-spinner-icon-offset",
+            "value": "null",
             "scope": "default",
             "line": {
                 "start": 277,
@@ -27825,15 +27800,15 @@
         }
     },
     {
-        "description": "The text color of the Input prefix.\n",
+        "description": "The color of the Input separator.\n",
         "commentRange": {
             "start": 279,
             "end": 280
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-prefix-text",
-            "value": "$kendo-subtle-text",
+            "name": "kendo-input-separator-text",
+            "value": "$kendo-input-border",
             "scope": "default",
             "line": {
                 "start": 281,
@@ -27850,15 +27825,15 @@
         }
     },
     {
-        "description": "The text color of the Input suffix.\n",
+        "description": "The opacity of the Input separator.\n",
         "commentRange": {
             "start": 282,
             "end": 283
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-suffix-text",
-            "value": "$kendo-subtle-text",
+            "name": "kendo-input-separator-opacity",
+            "value": ".5",
             "scope": "default",
             "line": {
                 "start": 284,
@@ -27925,15 +27900,15 @@
         }
     },
     {
-        "description": "The border color of the invalid Input components.\n",
+        "description": "The text color of the Input prefix.\n",
         "commentRange": {
             "start": 293,
             "end": 294
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-invalid-border",
-            "value": "$kendo-invalid-border",
+            "name": "kendo-input-prefix-text",
+            "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
                 "start": 295,
@@ -27950,15 +27925,15 @@
         }
     },
     {
-        "description": "The shadow of the invalid Input components.\n",
+        "description": "The text color of the Input suffix.\n",
         "commentRange": {
             "start": 296,
             "end": 297
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-invalid-shadow",
-            "value": "$kendo-invalid-shadow",
+            "name": "kendo-input-suffix-text",
+            "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
                 "start": 298,
@@ -27974,6 +27949,56 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The border color of the invalid Input components.\n",
+        "commentRange": {
+            "start": 300,
+            "end": 301
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-invalid-border",
+            "value": "$kendo-invalid-border",
+            "scope": "default",
+            "line": {
+                "start": 302,
+                "end": 302
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The shadow of the invalid Input components.\n",
+        "commentRange": {
+            "start": 303,
+            "end": 304
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-invalid-shadow",
+            "value": "$kendo-invalid-shadow",
+            "scope": "default",
+            "line": {
+                "start": 305,
+                "end": 305
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The font family of the List components.\n",
         "commentRange": {
@@ -33774,6 +33799,306 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The gap between the items in the OTP.\n",
+        "commentRange": {
+            "start": 6,
+            "end": 7
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-gap",
+            "value": "k-spacing(1.5)",
+            "scope": "default",
+            "line": {
+                "start": 8,
+                "end": 8
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The gap between the items in the small OTP.\n",
+        "commentRange": {
+            "start": 9,
+            "end": 10
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-sm-gap",
+            "value": "k-spacing(1)",
+            "scope": "default",
+            "line": {
+                "start": 11,
+                "end": 11
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The gap between the items in the medium OTP.\n",
+        "commentRange": {
+            "start": 12,
+            "end": 13
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-md-gap",
+            "value": "$kendo-otp-gap",
+            "scope": "default",
+            "line": {
+                "start": 14,
+                "end": 14
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The gap between the items in the large OTP.\n",
+        "commentRange": {
+            "start": 15,
+            "end": 16
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-lg-gap",
+            "value": "k-spacing(2)",
+            "scope": "default",
+            "line": {
+                "start": 17,
+                "end": 17
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the OTP separator.\n",
+        "commentRange": {
+            "start": 19,
+            "end": 20
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-separator-padding-x",
+            "value": "$kendo-otp-gap",
+            "scope": "default",
+            "line": {
+                "start": 21,
+                "end": 21
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the small OTP separator.\n",
+        "commentRange": {
+            "start": 22,
+            "end": 23
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-sm-separator-padding-x",
+            "value": "$kendo-otp-sm-gap",
+            "scope": "default",
+            "line": {
+                "start": 24,
+                "end": 24
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the medium OTP separator.\n",
+        "commentRange": {
+            "start": 25,
+            "end": 26
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-md-separator-padding-x",
+            "value": "$kendo-otp-separator-padding-x",
+            "scope": "default",
+            "line": {
+                "start": 27,
+                "end": 27
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the large OTP separator.\n",
+        "commentRange": {
+            "start": 28,
+            "end": 29
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-lg-separator-padding-x",
+            "value": "$kendo-otp-lg-gap",
+            "scope": "default",
+            "line": {
+                "start": 30,
+                "end": 30
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the OTP separator.\n",
+        "commentRange": {
+            "start": 32,
+            "end": 33
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-input-width",
+            "value": "$kendo-input-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 34,
+                "end": 34
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the small OTP separator.\n",
+        "commentRange": {
+            "start": 35,
+            "end": 36
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-sm-input-width",
+            "value": "$kendo-input-sm-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 37,
+                "end": 37
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the medium OTP separator.\n",
+        "commentRange": {
+            "start": 38,
+            "end": 39
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-md-input-width",
+            "value": "$kendo-otp-input-width",
+            "scope": "default",
+            "line": {
+                "start": 40,
+                "end": 40
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the large OTP separator.\n",
+        "commentRange": {
+            "start": 41,
+            "end": 42
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-lg-input-width",
+            "value": "$kendo-input-lg-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 43,
+                "end": 43
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The spacing index of the OrgChart.\n",
         "commentRange": {
@@ -39352,8 +39677,8 @@
     {
         "description": "The background color of the Picker components.\n",
         "commentRange": {
-            "start": 300,
-            "end": 301
+            "start": 307,
+            "end": 308
         },
         "context": {
             "type": "variable",
@@ -39361,8 +39686,8 @@
             "value": "$kendo-button-bg",
             "scope": "default",
             "line": {
-                "start": 302,
-                "end": 302
+                "start": 309,
+                "end": 309
             }
         },
         "group": [
@@ -39377,8 +39702,8 @@
     {
         "description": "The text color of the Picker components.\n",
         "commentRange": {
-            "start": 303,
-            "end": 304
+            "start": 310,
+            "end": 311
         },
         "context": {
             "type": "variable",
@@ -39386,8 +39711,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 305,
-                "end": 305
+                "start": 312,
+                "end": 312
             }
         },
         "group": [
@@ -39402,8 +39727,8 @@
     {
         "description": "The border color of the Picker components.\n",
         "commentRange": {
-            "start": 306,
-            "end": 307
+            "start": 313,
+            "end": 314
         },
         "context": {
             "type": "variable",
@@ -39411,8 +39736,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 315,
+                "end": 315
             }
         },
         "group": [
@@ -39427,8 +39752,8 @@
     {
         "description": "The gradient of the Picker components.\n",
         "commentRange": {
-            "start": 309,
-            "end": 310
+            "start": 316,
+            "end": 317
         },
         "context": {
             "type": "variable",
@@ -39436,8 +39761,8 @@
             "value": "$kendo-button-gradient",
             "scope": "default",
             "line": {
-                "start": 311,
-                "end": 311
+                "start": 318,
+                "end": 318
             }
         },
         "group": [
@@ -39452,8 +39777,8 @@
     {
         "description": "The shadow of the Picker components.\n",
         "commentRange": {
-            "start": 312,
-            "end": 313
+            "start": 319,
+            "end": 320
         },
         "context": {
             "type": "variable",
@@ -39461,8 +39786,8 @@
             "value": "$kendo-button-shadow",
             "scope": "default",
             "line": {
-                "start": 314,
-                "end": 314
+                "start": 321,
+                "end": 321
             }
         },
         "group": [
@@ -39477,8 +39802,8 @@
     {
         "description": "The background color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 316,
-            "end": 317
+            "start": 323,
+            "end": 324
         },
         "context": {
             "type": "variable",
@@ -39486,8 +39811,8 @@
             "value": "$kendo-button-hover-bg",
             "scope": "default",
             "line": {
-                "start": 318,
-                "end": 318
+                "start": 325,
+                "end": 325
             }
         },
         "group": [
@@ -39502,8 +39827,8 @@
     {
         "description": "The text color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 319,
-            "end": 320
+            "start": 326,
+            "end": 327
         },
         "context": {
             "type": "variable",
@@ -39511,8 +39836,8 @@
             "value": "$kendo-button-hover-text",
             "scope": "default",
             "line": {
-                "start": 321,
-                "end": 321
+                "start": 328,
+                "end": 328
             }
         },
         "group": [
@@ -39527,8 +39852,8 @@
     {
         "description": "The border color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 322,
-            "end": 323
+            "start": 329,
+            "end": 330
         },
         "context": {
             "type": "variable",
@@ -39536,8 +39861,8 @@
             "value": "$kendo-button-hover-border",
             "scope": "default",
             "line": {
-                "start": 324,
-                "end": 324
+                "start": 331,
+                "end": 331
             }
         },
         "group": [
@@ -39552,8 +39877,8 @@
     {
         "description": "The gradient of the hovered Picker components.\n",
         "commentRange": {
-            "start": 325,
-            "end": 326
+            "start": 332,
+            "end": 333
         },
         "context": {
             "type": "variable",
@@ -39561,8 +39886,8 @@
             "value": "$kendo-button-hover-gradient",
             "scope": "default",
             "line": {
-                "start": 327,
-                "end": 327
+                "start": 334,
+                "end": 334
             }
         },
         "group": [
@@ -39577,8 +39902,8 @@
     {
         "description": "The shadow of the hovered Picker components.\n",
         "commentRange": {
-            "start": 328,
-            "end": 329
+            "start": 335,
+            "end": 336
         },
         "context": {
             "type": "variable",
@@ -39586,8 +39911,8 @@
             "value": "$kendo-button-hover-shadow",
             "scope": "default",
             "line": {
-                "start": 330,
-                "end": 330
+                "start": 337,
+                "end": 337
             }
         },
         "group": [
@@ -39602,8 +39927,8 @@
     {
         "description": "The background color of the focused Picker components.\n",
         "commentRange": {
-            "start": 332,
-            "end": 333
+            "start": 339,
+            "end": 340
         },
         "context": {
             "type": "variable",
@@ -39611,8 +39936,8 @@
             "value": "$kendo-button-focus-bg",
             "scope": "default",
             "line": {
-                "start": 334,
-                "end": 334
+                "start": 341,
+                "end": 341
             }
         },
         "group": [
@@ -39627,8 +39952,8 @@
     {
         "description": "The text color of the focused Picker components.\n",
         "commentRange": {
-            "start": 335,
-            "end": 336
+            "start": 342,
+            "end": 343
         },
         "context": {
             "type": "variable",
@@ -39636,8 +39961,8 @@
             "value": "$kendo-button-focus-text",
             "scope": "default",
             "line": {
-                "start": 337,
-                "end": 337
+                "start": 344,
+                "end": 344
             }
         },
         "group": [
@@ -39652,8 +39977,8 @@
     {
         "description": "The border color of the focused Picker components.\n",
         "commentRange": {
-            "start": 338,
-            "end": 339
+            "start": 345,
+            "end": 346
         },
         "context": {
             "type": "variable",
@@ -39661,8 +39986,8 @@
             "value": "$kendo-button-focus-border",
             "scope": "default",
             "line": {
-                "start": 340,
-                "end": 340
+                "start": 347,
+                "end": 347
             }
         },
         "group": [
@@ -39677,8 +40002,8 @@
     {
         "description": "The gradient of the focused Picker components.\n",
         "commentRange": {
-            "start": 341,
-            "end": 342
+            "start": 348,
+            "end": 349
         },
         "context": {
             "type": "variable",
@@ -39686,8 +40011,8 @@
             "value": "$kendo-button-focus-gradient",
             "scope": "default",
             "line": {
-                "start": 343,
-                "end": 343
+                "start": 350,
+                "end": 350
             }
         },
         "group": [
@@ -39702,8 +40027,8 @@
     {
         "description": "The shadow of the focused Picker components.\n",
         "commentRange": {
-            "start": 344,
-            "end": 345
+            "start": 351,
+            "end": 352
         },
         "context": {
             "type": "variable",
@@ -39711,8 +40036,8 @@
             "value": "$kendo-button-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 346,
-                "end": 346
+                "start": 353,
+                "end": 353
             }
         },
         "group": [
@@ -39727,8 +40052,8 @@
     {
         "description": "The background color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 348,
-            "end": 349
+            "start": 355,
+            "end": 356
         },
         "context": {
             "type": "variable",
@@ -39736,8 +40061,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 350,
-                "end": 350
+                "start": 357,
+                "end": 357
             }
         },
         "group": [
@@ -39752,8 +40077,8 @@
     {
         "description": "The text color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 351,
-            "end": 352
+            "start": 358,
+            "end": 359
         },
         "context": {
             "type": "variable",
@@ -39761,8 +40086,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 353,
-                "end": 353
+                "start": 360,
+                "end": 360
             }
         },
         "group": [
@@ -39777,8 +40102,8 @@
     {
         "description": "The border color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 354,
-            "end": 355
+            "start": 361,
+            "end": 362
         },
         "context": {
             "type": "variable",
@@ -39786,8 +40111,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 356,
-                "end": 356
+                "start": 363,
+                "end": 363
             }
         },
         "group": [
@@ -39802,8 +40127,8 @@
     {
         "description": "The gradient of the disabled Picker components.\n",
         "commentRange": {
-            "start": 357,
-            "end": 358
+            "start": 364,
+            "end": 365
         },
         "context": {
             "type": "variable",
@@ -39811,8 +40136,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 359,
-                "end": 359
+                "start": 366,
+                "end": 366
             }
         },
         "group": [
@@ -39827,8 +40152,8 @@
     {
         "description": "The shadow of the disabled Picker components.\n",
         "commentRange": {
-            "start": 360,
-            "end": 361
+            "start": 367,
+            "end": 368
         },
         "context": {
             "type": "variable",
@@ -39836,8 +40161,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 362,
-                "end": 362
+                "start": 369,
+                "end": 369
             }
         },
         "group": [
@@ -39852,8 +40177,8 @@
     {
         "description": "The background color of the outline Picker components.\n",
         "commentRange": {
-            "start": 364,
-            "end": 365
+            "start": 371,
+            "end": 372
         },
         "context": {
             "type": "variable",
@@ -39861,8 +40186,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 366,
-                "end": 366
+                "start": 373,
+                "end": 373
             }
         },
         "group": [
@@ -39877,8 +40202,8 @@
     {
         "description": "The text color of the outline Picker components.\n",
         "commentRange": {
-            "start": 367,
-            "end": 368
+            "start": 374,
+            "end": 375
         },
         "context": {
             "type": "variable",
@@ -39886,8 +40211,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 369,
-                "end": 369
+                "start": 376,
+                "end": 376
             }
         },
         "group": [
@@ -39902,8 +40227,8 @@
     {
         "description": "The border color of the outline Picker components.\n",
         "commentRange": {
-            "start": 370,
-            "end": 371
+            "start": 377,
+            "end": 378
         },
         "context": {
             "type": "variable",
@@ -39911,8 +40236,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))",
             "scope": "default",
             "line": {
-                "start": 372,
-                "end": 372
+                "start": 379,
+                "end": 379
             }
         },
         "group": [
@@ -39927,8 +40252,8 @@
     {
         "description": "The background color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 374,
-            "end": 375
+            "start": 381,
+            "end": 382
         },
         "context": {
             "type": "variable",
@@ -39936,8 +40261,8 @@
             "value": "$kendo-picker-outline-text",
             "scope": "default",
             "line": {
-                "start": 376,
-                "end": 376
+                "start": 383,
+                "end": 383
             }
         },
         "group": [
@@ -39952,8 +40277,8 @@
     {
         "description": "The text color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 377,
-            "end": 378
+            "start": 384,
+            "end": 385
         },
         "context": {
             "type": "variable",
@@ -39961,8 +40286,8 @@
             "value": "if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))",
             "scope": "default",
             "line": {
-                "start": 379,
-                "end": 379
+                "start": 386,
+                "end": 386
             }
         },
         "group": [
@@ -39977,8 +40302,8 @@
     {
         "description": "The border color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 380,
-            "end": 381
+            "start": 387,
+            "end": 388
         },
         "context": {
             "type": "variable",
@@ -39986,8 +40311,8 @@
             "value": "$kendo-picker-outline-hover-bg",
             "scope": "default",
             "line": {
-                "start": 382,
-                "end": 382
+                "start": 389,
+                "end": 389
             }
         },
         "group": [
@@ -40002,8 +40327,8 @@
     {
         "description": "The background color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 384,
-            "end": 385
+            "start": 391,
+            "end": 392
         },
         "context": {
             "type": "variable",
@@ -40011,8 +40336,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 386,
-                "end": 386
+                "start": 393,
+                "end": 393
             }
         },
         "group": [
@@ -40027,8 +40352,8 @@
     {
         "description": "The text color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 387,
-            "end": 388
+            "start": 394,
+            "end": 395
         },
         "context": {
             "type": "variable",
@@ -40036,8 +40361,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 389,
-                "end": 389
+                "start": 396,
+                "end": 396
             }
         },
         "group": [
@@ -40052,8 +40377,8 @@
     {
         "description": "The border color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 390,
-            "end": 391
+            "start": 397,
+            "end": 398
         },
         "context": {
             "type": "variable",
@@ -40061,8 +40386,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 392,
-                "end": 392
+                "start": 399,
+                "end": 399
             }
         },
         "group": [
@@ -40077,8 +40402,8 @@
     {
         "description": "The shadow of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 393,
-            "end": 394
+            "start": 400,
+            "end": 401
         },
         "context": {
             "type": "variable",
@@ -40086,8 +40411,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 395,
-                "end": 395
+                "start": 402,
+                "end": 402
             }
         },
         "group": [
@@ -40102,8 +40427,8 @@
     {
         "description": "The background color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 397,
-            "end": 398
+            "start": 404,
+            "end": 405
         },
         "context": {
             "type": "variable",
@@ -40111,8 +40436,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 399,
-                "end": 399
+                "start": 406,
+                "end": 406
             }
         },
         "group": [
@@ -40127,8 +40452,8 @@
     {
         "description": "The text color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 400,
-            "end": 401
+            "start": 407,
+            "end": 408
         },
         "context": {
             "type": "variable",
@@ -40136,8 +40461,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 402,
-                "end": 402
+                "start": 409,
+                "end": 409
             }
         },
         "group": [
@@ -40152,8 +40477,8 @@
     {
         "description": "The border color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 403,
-            "end": 404
+            "start": 410,
+            "end": 411
         },
         "context": {
             "type": "variable",
@@ -40161,8 +40486,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 405,
-                "end": 405
+                "start": 412,
+                "end": 412
             }
         },
         "group": [
@@ -40177,8 +40502,8 @@
     {
         "description": "The background color of the flat Picker components.\n",
         "commentRange": {
-            "start": 407,
-            "end": 408
+            "start": 414,
+            "end": 415
         },
         "context": {
             "type": "variable",
@@ -40186,8 +40511,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 409,
-                "end": 409
+                "start": 416,
+                "end": 416
             }
         },
         "group": [
@@ -40202,8 +40527,8 @@
     {
         "description": "The text color of the flat Picker components.\n",
         "commentRange": {
-            "start": 410,
-            "end": 411
+            "start": 417,
+            "end": 418
         },
         "context": {
             "type": "variable",
@@ -40211,8 +40536,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 412,
-                "end": 412
+                "start": 419,
+                "end": 419
             }
         },
         "group": [
@@ -40227,8 +40552,8 @@
     {
         "description": "The border color of the flat Picker components.\n",
         "commentRange": {
-            "start": 413,
-            "end": 414
+            "start": 420,
+            "end": 421
         },
         "context": {
             "type": "variable",
@@ -40236,8 +40561,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 415,
-                "end": 415
+                "start": 422,
+                "end": 422
             }
         },
         "group": [
@@ -40252,8 +40577,8 @@
     {
         "description": "The background color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 417,
-            "end": 418
+            "start": 424,
+            "end": 425
         },
         "context": {
             "type": "variable",
@@ -40261,8 +40586,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))",
             "scope": "default",
             "line": {
-                "start": 419,
-                "end": 419
+                "start": 426,
+                "end": 426
             }
         },
         "group": [
@@ -40277,8 +40602,8 @@
     {
         "description": "The text color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 420,
-            "end": 421
+            "start": 427,
+            "end": 428
         },
         "context": {
             "type": "variable",
@@ -40286,8 +40611,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 422,
-                "end": 422
+                "start": 429,
+                "end": 429
             }
         },
         "group": [
@@ -40302,8 +40627,8 @@
     {
         "description": "The border color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 423,
-            "end": 424
+            "start": 430,
+            "end": 431
         },
         "context": {
             "type": "variable",
@@ -40311,8 +40636,8 @@
             "value": "if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))",
             "scope": "default",
             "line": {
-                "start": 425,
-                "end": 425
+                "start": 432,
+                "end": 432
             }
         },
         "group": [
@@ -40327,8 +40652,8 @@
     {
         "description": "The background color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 427,
-            "end": 428
+            "start": 434,
+            "end": 435
         },
         "context": {
             "type": "variable",
@@ -40336,8 +40661,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 429,
-                "end": 429
+                "start": 436,
+                "end": 436
             }
         },
         "group": [
@@ -40352,8 +40677,8 @@
     {
         "description": "The text color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 430,
-            "end": 431
+            "start": 437,
+            "end": 438
         },
         "context": {
             "type": "variable",
@@ -40361,8 +40686,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 432,
-                "end": 432
+                "start": 439,
+                "end": 439
             }
         },
         "group": [
@@ -40377,8 +40702,8 @@
     {
         "description": "The border color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 433,
-            "end": 434
+            "start": 440,
+            "end": 441
         },
         "context": {
             "type": "variable",
@@ -40386,8 +40711,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 435,
-                "end": 435
+                "start": 442,
+                "end": 442
             }
         },
         "group": [
@@ -40402,8 +40727,8 @@
     {
         "description": "The shadow of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 436,
-            "end": 437
+            "start": 443,
+            "end": 444
         },
         "context": {
             "type": "variable",
@@ -40411,8 +40736,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 438,
-                "end": 438
+                "start": 445,
+                "end": 445
             }
         },
         "group": [
@@ -40427,8 +40752,8 @@
     {
         "description": "The background color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 440,
-            "end": 441
+            "start": 447,
+            "end": 448
         },
         "context": {
             "type": "variable",
@@ -40436,8 +40761,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 442,
-                "end": 442
+                "start": 449,
+                "end": 449
             }
         },
         "group": [
@@ -40452,8 +40777,8 @@
     {
         "description": "The text color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 443,
-            "end": 444
+            "start": 450,
+            "end": 451
         },
         "context": {
             "type": "variable",
@@ -40461,8 +40786,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 445,
-                "end": 445
+                "start": 452,
+                "end": 452
             }
         },
         "group": [
@@ -40477,8 +40802,8 @@
     {
         "description": "The border color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 446,
-            "end": 447
+            "start": 453,
+            "end": 454
         },
         "context": {
             "type": "variable",
@@ -40486,8 +40811,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 448,
-                "end": 448
+                "start": 455,
+                "end": 455
             }
         },
         "group": [
@@ -45208,7 +45533,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-checked-image",
-            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#ffffff'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 156,
@@ -56378,15 +56703,15 @@
         }
     },
     {
-        "description": "The background color of the TabStrip wrapper.\n",
+        "description": "The font size of the small TabStrip.\n",
         "commentRange": {
             "start": 30,
             "end": 31
         },
         "context": {
             "type": "variable",
-            "name": "kendo-tabstrip-wrapper-bg",
-            "value": "null",
+            "name": "kendo-tabstrip-sm-font-size",
+            "value": "$kendo-tabstrip-font-size",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -56403,15 +56728,15 @@
         }
     },
     {
-        "description": "The text color of the TabStrip wrapper.\n",
+        "description": "The line height of the small TabStrip.\n",
         "commentRange": {
             "start": 33,
             "end": 34
         },
         "context": {
             "type": "variable",
-            "name": "kendo-tabstrip-wrapper-text",
-            "value": "null",
+            "name": "kendo-tabstrip-sm-line-height",
+            "value": "$kendo-tabstrip-line-height",
             "scope": "default",
             "line": {
                 "start": 35,
@@ -56428,15 +56753,15 @@
         }
     },
     {
-        "description": "The border color of the TabStrip wrapper.\n",
+        "description": "The font size of the medium TabStrip.\n",
         "commentRange": {
             "start": 36,
             "end": 37
         },
         "context": {
             "type": "variable",
-            "name": "kendo-tabstrip-wrapper-border",
-            "value": "null",
+            "name": "kendo-tabstrip-md-font-size",
+            "value": "$kendo-tabstrip-font-size",
             "scope": "default",
             "line": {
                 "start": 38,
@@ -56452,11 +56777,161 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The line height of the medium TabStrip.\n",
+        "commentRange": {
+            "start": 39,
+            "end": 40
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-md-line-height",
+            "value": "$kendo-tabstrip-line-height",
+            "scope": "default",
+            "line": {
+                "start": 41,
+                "end": 41
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The font size of the large TabStrip.\n",
+        "commentRange": {
+            "start": 42,
+            "end": 43
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-font-size",
+            "value": "var( --kendo-font-size-lg, inherit )",
+            "scope": "default",
+            "line": {
+                "start": 44,
+                "end": 44
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The line height of the large TabStrip.\n",
+        "commentRange": {
+            "start": 45,
+            "end": 46
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-line-height",
+            "value": "var( --kendo-line-height-lg, normal )",
+            "scope": "default",
+            "line": {
+                "start": 47,
+                "end": 47
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the TabStrip wrapper.\n",
+        "commentRange": {
+            "start": 49,
+            "end": 50
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-wrapper-bg",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 51,
+                "end": 51
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the TabStrip wrapper.\n",
+        "commentRange": {
+            "start": 52,
+            "end": 53
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-wrapper-text",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 54,
+                "end": 54
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the TabStrip wrapper.\n",
+        "commentRange": {
+            "start": 55,
+            "end": 56
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-wrapper-border",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 57,
+                "end": 57
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The background color of the TabStrip.\n",
         "commentRange": {
-            "start": 40,
-            "end": 41
+            "start": 59,
+            "end": 60
         },
         "context": {
             "type": "variable",
@@ -56464,8 +56939,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 42,
-                "end": 42
+                "start": 61,
+                "end": 61
             }
         },
         "group": [
@@ -56480,8 +56955,8 @@
     {
         "description": "The text color of the TabStrip.\n",
         "commentRange": {
-            "start": 43,
-            "end": 44
+            "start": 62,
+            "end": 63
         },
         "context": {
             "type": "variable",
@@ -56489,8 +56964,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 45,
-                "end": 45
+                "start": 64,
+                "end": 64
             }
         },
         "group": [
@@ -56505,8 +56980,8 @@
     {
         "description": "The border color of the TabStrip.\n",
         "commentRange": {
-            "start": 46,
-            "end": 47
+            "start": 65,
+            "end": 66
         },
         "context": {
             "type": "variable",
@@ -56514,8 +56989,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 48,
-                "end": 48
+                "start": 67,
+                "end": 67
             }
         },
         "group": [
@@ -56530,8 +57005,8 @@
     {
         "description": "The horizontal padding of the TabStrip items.\n",
         "commentRange": {
-            "start": 50,
-            "end": 51
+            "start": 69,
+            "end": 70
         },
         "context": {
             "type": "variable",
@@ -56539,8 +57014,8 @@
             "value": "k-spacing(3)",
             "scope": "default",
             "line": {
-                "start": 52,
-                "end": 52
+                "start": 71,
+                "end": 71
             }
         },
         "group": [
@@ -56555,8 +57030,8 @@
     {
         "description": "The vertical padding of the TabStrip items.\n",
         "commentRange": {
-            "start": 53,
-            "end": 54
+            "start": 72,
+            "end": 73
         },
         "context": {
             "type": "variable",
@@ -56564,8 +57039,8 @@
             "value": "k-spacing(1.5)",
             "scope": "default",
             "line": {
-                "start": 55,
-                "end": 55
+                "start": 74,
+                "end": 74
             }
         },
         "group": [
@@ -56580,8 +57055,8 @@
     {
         "description": "The border width around the TabStrip items.\n",
         "commentRange": {
-            "start": 56,
-            "end": 57
+            "start": 75,
+            "end": 76
         },
         "context": {
             "type": "variable",
@@ -56589,8 +57064,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 58,
-                "end": 58
+                "start": 77,
+                "end": 77
             }
         },
         "group": [
@@ -56605,8 +57080,8 @@
     {
         "description": "The border radius of the TabStrip items.\n",
         "commentRange": {
-            "start": 59,
-            "end": 60
+            "start": 78,
+            "end": 79
         },
         "context": {
             "type": "variable",
@@ -56614,8 +57089,8 @@
             "value": "k-border-radius(md)",
             "scope": "default",
             "line": {
-                "start": 61,
-                "end": 61
+                "start": 80,
+                "end": 80
             }
         },
         "group": [
@@ -56630,8 +57105,8 @@
     {
         "description": "The gap between the TabStrip items.\n",
         "commentRange": {
-            "start": 62,
-            "end": 63
+            "start": 81,
+            "end": 82
         },
         "context": {
             "type": "variable",
@@ -56639,8 +57114,158 @@
             "value": "k-spacing(0)",
             "scope": "default",
             "line": {
-                "start": 64,
-                "end": 64
+                "start": 83,
+                "end": 83
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the small TabStrip items.\n",
+        "commentRange": {
+            "start": 84,
+            "end": 85
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-sm-item-padding-x",
+            "value": "k-spacing(3)",
+            "scope": "default",
+            "line": {
+                "start": 86,
+                "end": 86
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the small TabStrip items.\n",
+        "commentRange": {
+            "start": 87,
+            "end": 88
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-sm-item-padding-y",
+            "value": "k-spacing(1)",
+            "scope": "default",
+            "line": {
+                "start": 89,
+                "end": 89
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the medium TabStrip items.\n",
+        "commentRange": {
+            "start": 90,
+            "end": 91
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-md-item-padding-x",
+            "value": "$kendo-tabstrip-item-padding-x",
+            "scope": "default",
+            "line": {
+                "start": 92,
+                "end": 92
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the medium TabStrip items.\n",
+        "commentRange": {
+            "start": 93,
+            "end": 94
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-md-item-padding-y",
+            "value": "$kendo-tabstrip-item-padding-y",
+            "scope": "default",
+            "line": {
+                "start": 95,
+                "end": 95
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the large TabStrip items.\n",
+        "commentRange": {
+            "start": 96,
+            "end": 97
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-item-padding-x",
+            "value": "k-spacing(3)",
+            "scope": "default",
+            "line": {
+                "start": 98,
+                "end": 98
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the large TabStrip items.\n",
+        "commentRange": {
+            "start": 99,
+            "end": 100
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-item-padding-y",
+            "value": "k-spacing(2.5)",
+            "scope": "default",
+            "line": {
+                "start": 101,
+                "end": 101
             }
         },
         "group": [
@@ -56655,8 +57280,8 @@
     {
         "description": " The background color of the TabStrip items.\n",
         "commentRange": {
-            "start": 66,
-            "end": 67
+            "start": 103,
+            "end": 104
         },
         "context": {
             "type": "variable",
@@ -56664,8 +57289,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 68,
-                "end": 68
+                "start": 105,
+                "end": 105
             }
         },
         "group": [
@@ -56680,8 +57305,8 @@
     {
         "description": "The text color of the TabStrip items.\n",
         "commentRange": {
-            "start": 69,
-            "end": 70
+            "start": 106,
+            "end": 107
         },
         "context": {
             "type": "variable",
@@ -56689,8 +57314,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 71,
-                "end": 71
+                "start": 108,
+                "end": 108
             }
         },
         "group": [
@@ -56705,8 +57330,8 @@
     {
         "description": "The border color of the TabStrip items.\n",
         "commentRange": {
-            "start": 72,
-            "end": 73
+            "start": 109,
+            "end": 110
         },
         "context": {
             "type": "variable",
@@ -56714,8 +57339,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 74,
-                "end": 74
+                "start": 111,
+                "end": 111
             }
         },
         "group": [
@@ -56730,8 +57355,8 @@
     {
         "description": "The gradient of the TabStrip items.\n",
         "commentRange": {
-            "start": 75,
-            "end": 76
+            "start": 112,
+            "end": 113
         },
         "context": {
             "type": "variable",
@@ -56739,8 +57364,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 77,
-                "end": 77
+                "start": 114,
+                "end": 114
             }
         },
         "group": [
@@ -56755,8 +57380,8 @@
     {
         "description": "The background color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 79,
-            "end": 80
+            "start": 116,
+            "end": 117
         },
         "context": {
             "type": "variable",
@@ -56764,8 +57389,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 81,
-                "end": 81
+                "start": 118,
+                "end": 118
             }
         },
         "group": [
@@ -56780,8 +57405,8 @@
     {
         "description": "The text color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 82,
-            "end": 83
+            "start": 119,
+            "end": 120
         },
         "context": {
             "type": "variable",
@@ -56789,8 +57414,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 84,
-                "end": 84
+                "start": 121,
+                "end": 121
             }
         },
         "group": [
@@ -56805,8 +57430,8 @@
     {
         "description": "The border color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 85,
-            "end": 86
+            "start": 122,
+            "end": 123
         },
         "context": {
             "type": "variable",
@@ -56814,8 +57439,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 87,
-                "end": 87
+                "start": 124,
+                "end": 124
             }
         },
         "group": [
@@ -56830,8 +57455,8 @@
     {
         "description": "The gradient of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 88,
-            "end": 89
+            "start": 125,
+            "end": 126
         },
         "context": {
             "type": "variable",
@@ -56839,8 +57464,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 90,
-                "end": 90
+                "start": 127,
+                "end": 127
             }
         },
         "group": [
@@ -56855,8 +57480,8 @@
     {
         "description": "The background color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 92,
-            "end": 93
+            "start": 129,
+            "end": 130
         },
         "context": {
             "type": "variable",
@@ -56864,8 +57489,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 94,
-                "end": 94
+                "start": 131,
+                "end": 131
             }
         },
         "group": [
@@ -56880,8 +57505,8 @@
     {
         "description": "The text color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 95,
-            "end": 96
+            "start": 132,
+            "end": 133
         },
         "context": {
             "type": "variable",
@@ -56889,8 +57514,8 @@
             "value": "$kendo-link-text",
             "scope": "default",
             "line": {
-                "start": 97,
-                "end": 97
+                "start": 134,
+                "end": 134
             }
         },
         "group": [
@@ -56905,8 +57530,8 @@
     {
         "description": "The border color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 98,
-            "end": 99
+            "start": 135,
+            "end": 136
         },
         "context": {
             "type": "variable",
@@ -56914,8 +57539,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 100,
-                "end": 100
+                "start": 137,
+                "end": 137
             }
         },
         "group": [
@@ -56930,8 +57555,8 @@
     {
         "description": "The gradient of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 101,
-            "end": 102
+            "start": 138,
+            "end": 139
         },
         "context": {
             "type": "variable",
@@ -56939,8 +57564,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 103,
-                "end": 103
+                "start": 140,
+                "end": 140
             }
         },
         "group": [
@@ -56955,8 +57580,8 @@
     {
         "description": "The font weight of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 104,
-            "end": 105
+            "start": 141,
+            "end": 142
         },
         "context": {
             "type": "variable",
@@ -56964,8 +57589,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 106,
-                "end": 106
+                "start": 143,
+                "end": 143
             }
         },
         "group": [
@@ -56980,8 +57605,8 @@
     {
         "description": "The shadow of the focused TabStrip items.\n",
         "commentRange": {
-            "start": 109,
-            "end": 110
+            "start": 146,
+            "end": 147
         },
         "context": {
             "type": "variable",
@@ -56989,8 +57614,8 @@
             "value": "$kendo-list-item-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 111,
-                "end": 111
+                "start": 148,
+                "end": 148
             }
         },
         "group": [
@@ -57005,8 +57630,8 @@
     {
         "description": "The shadow of the dragged TabStrip items.\n",
         "commentRange": {
-            "start": 113,
-            "end": 114
+            "start": 150,
+            "end": 151
         },
         "context": {
             "type": "variable",
@@ -57014,8 +57639,8 @@
             "value": "k-elevation(3)",
             "scope": "default",
             "line": {
-                "start": 115,
-                "end": 115
+                "start": 152,
+                "end": 152
             }
         },
         "group": [
@@ -57030,8 +57655,8 @@
     {
         "description": "The background color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 117,
-            "end": 118
+            "start": 154,
+            "end": 155
         },
         "context": {
             "type": "variable",
@@ -57039,8 +57664,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 119,
-                "end": 119
+                "start": 156,
+                "end": 156
             }
         },
         "group": [
@@ -57055,8 +57680,8 @@
     {
         "description": "The text color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 120,
-            "end": 121
+            "start": 157,
+            "end": 158
         },
         "context": {
             "type": "variable",
@@ -57064,8 +57689,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 122,
-                "end": 122
+                "start": 159,
+                "end": 159
             }
         },
         "group": [
@@ -57080,8 +57705,8 @@
     {
         "description": "The border color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 123,
-            "end": 124
+            "start": 160,
+            "end": 161
         },
         "context": {
             "type": "variable",
@@ -57089,8 +57714,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 125,
-                "end": 125
+                "start": 162,
+                "end": 162
             }
         },
         "group": [
@@ -57105,8 +57730,8 @@
     {
         "description": "The gradient of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 126,
-            "end": 127
+            "start": 163,
+            "end": 164
         },
         "context": {
             "type": "variable",
@@ -57114,8 +57739,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 128,
-                "end": 128
+                "start": 165,
+                "end": 165
             }
         },
         "group": [
@@ -57130,8 +57755,8 @@
     {
         "description": "The opacity of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 129,
-            "end": 130
+            "start": 166,
+            "end": 167
         },
         "context": {
             "type": "variable",
@@ -57139,8 +57764,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 131,
-                "end": 131
+                "start": 168,
+                "end": 168
             }
         },
         "group": [
@@ -57155,8 +57780,8 @@
     {
         "description": "The filter of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 132,
-            "end": 133
+            "start": 169,
+            "end": 170
         },
         "context": {
             "type": "variable",
@@ -57164,8 +57789,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 134,
-                "end": 134
+                "start": 171,
+                "end": 171
             }
         },
         "group": [
@@ -57180,8 +57805,8 @@
     {
         "description": "The border width of the TabStrip indicator.\n",
         "commentRange": {
-            "start": 136,
-            "end": 137
+            "start": 173,
+            "end": 174
         },
         "context": {
             "type": "variable",
@@ -57189,8 +57814,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 138,
-                "end": 138
+                "start": 175,
+                "end": 175
             }
         },
         "group": [
@@ -57205,8 +57830,8 @@
     {
         "description": "The border color of the TabStrip ripple.\n",
         "commentRange": {
-            "start": 139,
-            "end": 140
+            "start": 176,
+            "end": 177
         },
         "context": {
             "type": "variable",
@@ -57214,8 +57839,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 141,
-                "end": 141
+                "start": 178,
+                "end": 178
             }
         },
         "group": [
@@ -57230,8 +57855,8 @@
     {
         "description": "The horizontal padding of the TabStrip content.\n",
         "commentRange": {
-            "start": 143,
-            "end": 144
+            "start": 180,
+            "end": 181
         },
         "context": {
             "type": "variable",
@@ -57239,8 +57864,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 145,
-                "end": 145
+                "start": 182,
+                "end": 182
             }
         },
         "group": [
@@ -57255,8 +57880,8 @@
     {
         "description": "The vertical padding of the TabStrip content.\n",
         "commentRange": {
-            "start": 146,
-            "end": 147
+            "start": 183,
+            "end": 184
         },
         "context": {
             "type": "variable",
@@ -57264,8 +57889,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 148,
-                "end": 148
+                "start": 185,
+                "end": 185
             }
         },
         "group": [
@@ -57280,8 +57905,8 @@
     {
         "description": "The border width around the TabStrip content.\n",
         "commentRange": {
-            "start": 149,
-            "end": 150
+            "start": 186,
+            "end": 187
         },
         "context": {
             "type": "variable",
@@ -57289,8 +57914,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 151,
-                "end": 151
+                "start": 188,
+                "end": 188
             }
         },
         "group": [
@@ -57305,8 +57930,8 @@
     {
         "description": "The background color of the TabStrip content.\n",
         "commentRange": {
-            "start": 153,
-            "end": 154
+            "start": 190,
+            "end": 191
         },
         "context": {
             "type": "variable",
@@ -57314,8 +57939,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 155,
-                "end": 155
+                "start": 192,
+                "end": 192
             }
         },
         "group": [
@@ -57330,8 +57955,8 @@
     {
         "description": "The text color of the TabStrip content.\n",
         "commentRange": {
-            "start": 156,
-            "end": 157
+            "start": 193,
+            "end": 194
         },
         "context": {
             "type": "variable",
@@ -57339,8 +57964,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 158,
-                "end": 158
+                "start": 195,
+                "end": 195
             }
         },
         "group": [
@@ -57355,8 +57980,8 @@
     {
         "description": "The border color of the TabStrip content.\n",
         "commentRange": {
-            "start": 159,
-            "end": 160
+            "start": 196,
+            "end": 197
         },
         "context": {
             "type": "variable",
@@ -57364,8 +57989,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 161,
-                "end": 161
+                "start": 198,
+                "end": 198
             }
         },
         "group": [
@@ -57380,8 +58005,8 @@
     {
         "description": "The border color of the focused TabStrip content.\n",
         "commentRange": {
-            "start": 162,
-            "end": 163
+            "start": 199,
+            "end": 200
         },
         "context": {
             "type": "variable",
@@ -57389,8 +58014,58 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 164,
-                "end": 164
+                "start": 201,
+                "end": 201
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The left and right scroll overlay of the TabStrip.\n",
+        "commentRange": {
+            "start": 203,
+            "end": 204
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-scroll-overlay",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
+            "scope": "default",
+            "line": {
+                "start": 205,
+                "end": 205
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The size map of the TabStrip.\n",
+        "commentRange": {
+            "start": 207,
+            "end": 208
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-sizes",
+            "value": "(\n    sm: (\n        font-size: $kendo-tabstrip-sm-font-size,\n        line-height: $kendo-tabstrip-sm-line-height,\n        item-padding-x: $kendo-tabstrip-sm-item-padding-x,\n        item-padding-y: $kendo-tabstrip-sm-item-padding-y\n    ),\n    md: (\n        font-size: $kendo-tabstrip-md-font-size,\n        line-height: $kendo-tabstrip-md-line-height,\n        item-padding-x: $kendo-tabstrip-md-item-padding-x,\n        item-padding-y: $kendo-tabstrip-md-item-padding-y\n    ),\n    lg: (\n        font-size: $kendo-tabstrip-lg-font-size,\n        line-height: $kendo-tabstrip-lg-line-height,\n        item-padding-x: $kendo-tabstrip-lg-item-padding-x,\n        item-padding-y: $kendo-tabstrip-lg-item-padding-y\n    )\n)",
+            "scope": "default",
+            "line": {
+                "start": 209,
+                "end": 228
             }
         },
         "group": [
@@ -60836,7 +61511,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-padding-x",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 9,
@@ -60886,7 +61561,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-padding-x",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-padding-x",
             "scope": "default",
             "line": {
                 "start": 15,
@@ -60936,7 +61611,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-padding-y",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 22,
@@ -60986,7 +61661,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-padding-y",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-padding-y",
             "scope": "default",
             "line": {
                 "start": 28,
@@ -61036,7 +61711,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-spacing",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 35,
@@ -61086,7 +61761,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-spacing",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-spacing",
             "scope": "default",
             "line": {
                 "start": 41,
@@ -61128,15 +61803,15 @@
         }
     },
     {
-        "description": "The width of the border around the Toolbar.\n",
+        "description": "The height of the Toolbar button separator.\n",
         "commentRange": {
             "start": 46,
             "end": 47
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-border-width",
-            "value": "1px",
+            "name": "kendo-toolbar-separator-height",
+            "value": "$kendo-button-md-calc-size",
             "scope": "default",
             "line": {
                 "start": 48,
@@ -61153,15 +61828,15 @@
         }
     },
     {
-        "description": "The border radius of the Toolbar.\n",
+        "description": "The height of the small Toolbar button separator.\n",
         "commentRange": {
             "start": 49,
             "end": 50
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-border-radius",
-            "value": "null",
+            "name": "kendo-toolbar-sm-separator-height",
+            "value": "$kendo-button-sm-calc-size",
             "scope": "default",
             "line": {
                 "start": 51,
@@ -61178,19 +61853,19 @@
         }
     },
     {
-        "description": "The font family of the Toolbar.\n",
+        "description": "The height of the medium Toolbar button separator.\n",
         "commentRange": {
-            "start": 53,
-            "end": 54
+            "start": 52,
+            "end": 53
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-font-family",
-            "value": "var( --kendo-font-family, inherit )",
+            "name": "kendo-toolbar-md-separator-height",
+            "value": "$kendo-toolbar-separator-height",
             "scope": "default",
             "line": {
-                "start": 55,
-                "end": 55
+                "start": 54,
+                "end": 54
             }
         },
         "group": [
@@ -61203,19 +61878,19 @@
         }
     },
     {
-        "description": "The font size of the Toolbar.\n",
+        "description": "The height of the large Toolbar button separator.\n",
         "commentRange": {
-            "start": 56,
-            "end": 57
+            "start": 55,
+            "end": 56
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-font-size",
-            "value": "var( --kendo-font-size, inherit )",
+            "name": "kendo-toolbar-lg-separator-height",
+            "value": "$kendo-button-lg-calc-size",
             "scope": "default",
             "line": {
-                "start": 58,
-                "end": 58
+                "start": 57,
+                "end": 57
             }
         },
         "group": [
@@ -61228,15 +61903,15 @@
         }
     },
     {
-        "description": "The line height of the Toolbar.\n",
+        "description": "The width of the border around the Toolbar.\n",
         "commentRange": {
             "start": 59,
             "end": 60
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-line-height",
-            "value": "var( --kendo-line-height, normal )",
+            "name": "kendo-toolbar-border-width",
+            "value": "1px",
             "scope": "default",
             "line": {
                 "start": 61,
@@ -61253,19 +61928,19 @@
         }
     },
     {
-        "description": "The background color of the Toolbar.\n",
+        "description": "The border radius of the Toolbar.\n",
         "commentRange": {
-            "start": 63,
-            "end": 64
+            "start": 62,
+            "end": 63
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-bg",
-            "value": "$kendo-base-bg",
+            "name": "kendo-toolbar-border-radius",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 65,
-                "end": 65
+                "start": 64,
+                "end": 64
             }
         },
         "group": [
@@ -61278,15 +61953,15 @@
         }
     },
     {
-        "description": "The text color of the Toolbar.\n",
+        "description": "The font family of the Toolbar.\n",
         "commentRange": {
             "start": 66,
             "end": 67
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-text",
-            "value": "$kendo-base-text",
+            "name": "kendo-toolbar-font-family",
+            "value": "var( --kendo-font-family, inherit )",
             "scope": "default",
             "line": {
                 "start": 68,
@@ -61303,15 +61978,15 @@
         }
     },
     {
-        "description": "The color of the border around the Toolbar.\n",
+        "description": "The font size of the Toolbar.\n",
         "commentRange": {
             "start": 69,
             "end": 70
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-border",
-            "value": "$kendo-base-border",
+            "name": "kendo-toolbar-font-size",
+            "value": "var( --kendo-font-size, inherit )",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -61328,15 +62003,15 @@
         }
     },
     {
-        "description": "The gradient of the Toolbar.\n",
+        "description": "The line height of the Toolbar.\n",
         "commentRange": {
             "start": 72,
             "end": 73
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-gradient",
-            "value": "null",
+            "name": "kendo-toolbar-line-height",
+            "value": "var( --kendo-line-height, normal )",
             "scope": "default",
             "line": {
                 "start": 74,
@@ -61353,19 +62028,19 @@
         }
     },
     {
-        "description": "The box shadow of the Toolbar.\n",
+        "description": "The background color of the Toolbar.\n",
         "commentRange": {
-            "start": 75,
-            "end": 76
+            "start": 76,
+            "end": 77
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-shadow",
-            "value": "null",
+            "name": "kendo-toolbar-bg",
+            "value": "$kendo-base-bg",
             "scope": "default",
             "line": {
-                "start": 77,
-                "end": 77
+                "start": 78,
+                "end": 78
             }
         },
         "group": [
@@ -61378,15 +62053,15 @@
         }
     },
     {
-        "description": "The text color of the outline Toolbar.\n",
+        "description": "The text color of the Toolbar.\n",
         "commentRange": {
             "start": 79,
             "end": 80
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-outline-text",
-            "value": "$kendo-button-text",
+            "name": "kendo-toolbar-text",
+            "value": "$kendo-base-text",
             "scope": "default",
             "line": {
                 "start": 81,
@@ -61403,15 +62078,15 @@
         }
     },
     {
-        "description": "The color of the border around the outline Toolbar.\n",
+        "description": "The color of the border around the Toolbar.\n",
         "commentRange": {
             "start": 82,
             "end": 83
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-outline-border",
-            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5))",
+            "name": "kendo-toolbar-border",
+            "value": "$kendo-base-border",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -61428,14 +62103,14 @@
         }
     },
     {
-        "description": "The gradient of the outline Toolbar.\n",
+        "description": "The gradient of the Toolbar.\n",
         "commentRange": {
             "start": 85,
             "end": 86
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-outline-gradient",
+            "name": "kendo-toolbar-gradient",
             "value": "null",
             "scope": "default",
             "line": {
@@ -61453,14 +62128,14 @@
         }
     },
     {
-        "description": "The box shadow of the outline Toolbar.\n",
+        "description": "The box shadow of the Toolbar.\n",
         "commentRange": {
             "start": 88,
             "end": 89
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-outline-shadow",
+            "name": "kendo-toolbar-shadow",
             "value": "null",
             "scope": "default",
             "line": {
@@ -61478,15 +62153,15 @@
         }
     },
     {
-        "description": "The width of the border around the outline Toolbar.\n",
+        "description": "The left and right scroll overlay of the Toolbar.\n",
         "commentRange": {
             "start": 91,
             "end": 92
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-outline-border-width",
-            "value": "$kendo-toolbar-border-width",
+            "name": "kendo-toolbar-scroll-overlay",
+            "value": "$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
             "scope": "default",
             "line": {
                 "start": 93,
@@ -61503,15 +62178,15 @@
         }
     },
     {
-        "description": "The text color of the flat Toolbar.\n",
+        "description": "The text color of the outline Toolbar.\n",
         "commentRange": {
             "start": 95,
             "end": 96
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-flat-text",
-            "value": "null",
+            "name": "kendo-toolbar-outline-text",
+            "value": "$kendo-button-text",
             "scope": "default",
             "line": {
                 "start": 97,
@@ -61528,15 +62203,15 @@
         }
     },
     {
-        "description": "The color of the border around the flat Toolbar.\n",
+        "description": "The color of the border around the outline Toolbar.\n",
         "commentRange": {
             "start": 98,
             "end": 99
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-flat-border",
-            "value": "$kendo-toolbar-border",
+            "name": "kendo-toolbar-outline-border",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5))",
             "scope": "default",
             "line": {
                 "start": 100,
@@ -61553,14 +62228,14 @@
         }
     },
     {
-        "description": "The gradient of the flat Toolbar.\n",
+        "description": "The gradient of the outline Toolbar.\n",
         "commentRange": {
             "start": 101,
             "end": 102
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-flat-gradient",
+            "name": "kendo-toolbar-outline-gradient",
             "value": "null",
             "scope": "default",
             "line": {
@@ -61578,14 +62253,14 @@
         }
     },
     {
-        "description": "The box shadow of the flat Toolbar.\n",
+        "description": "The box shadow of the outline Toolbar.\n",
         "commentRange": {
             "start": 104,
             "end": 105
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-flat-shadow",
+            "name": "kendo-toolbar-outline-shadow",
             "value": "null",
             "scope": "default",
             "line": {
@@ -61603,15 +62278,15 @@
         }
     },
     {
-        "description": "Border width of the flat Toolbar.\n",
+        "description": "The width of the border around the outline Toolbar.\n",
         "commentRange": {
             "start": 107,
             "end": 108
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-flat-border-width",
-            "value": "1px",
+            "name": "kendo-toolbar-outline-border-width",
+            "value": "$kendo-toolbar-border-width",
             "scope": "default",
             "line": {
                 "start": 109,
@@ -61627,11 +62302,186 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The left and right scroll overlay of the outline Toolbar.\n",
+        "commentRange": {
+            "start": 110,
+            "end": 111
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-outline-scroll-overlay",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
+            "scope": "default",
+            "line": {
+                "start": 112,
+                "end": 112
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the flat Toolbar.\n",
+        "commentRange": {
+            "start": 114,
+            "end": 115
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-flat-text",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 116,
+                "end": 116
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color of the border around the flat Toolbar.\n",
+        "commentRange": {
+            "start": 117,
+            "end": 118
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-flat-border",
+            "value": "$kendo-toolbar-border",
+            "scope": "default",
+            "line": {
+                "start": 119,
+                "end": 119
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The gradient of the flat Toolbar.\n",
+        "commentRange": {
+            "start": 120,
+            "end": 121
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-flat-gradient",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 122,
+                "end": 122
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The box shadow of the flat Toolbar.\n",
+        "commentRange": {
+            "start": 123,
+            "end": 124
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-flat-shadow",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 125,
+                "end": 125
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "Border width of the flat Toolbar.\n",
+        "commentRange": {
+            "start": 126,
+            "end": 127
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-flat-border-width",
+            "value": "1px",
+            "scope": "default",
+            "line": {
+                "start": 128,
+                "end": 128
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The left and right scroll overlay of the flat Toolbar.\n",
+        "commentRange": {
+            "start": 129,
+            "end": 130
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-flat-scroll-overlay",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
+            "scope": "default",
+            "line": {
+                "start": 131,
+                "end": 131
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The color of the separator border of the Toolbar.\n",
         "commentRange": {
-            "start": 111,
-            "end": 112
+            "start": 133,
+            "end": 134
         },
         "context": {
             "type": "variable",
@@ -61639,8 +62489,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 113,
-                "end": 113
+                "start": 135,
+                "end": 135
             }
         },
         "group": [
@@ -61655,8 +62505,8 @@
     {
         "description": "The width of the input in the Toolbar.\n",
         "commentRange": {
-            "start": 115,
-            "end": 116
+            "start": 137,
+            "end": 138
         },
         "context": {
             "type": "variable",
@@ -61664,8 +62514,8 @@
             "value": "10em",
             "scope": "default",
             "line": {
-                "start": 117,
-                "end": 117
+                "start": 139,
+                "end": 139
             }
         },
         "group": [
@@ -61680,8 +62530,8 @@
     {
         "description": "The box shadow of the focused Toolbar item.\n",
         "commentRange": {
-            "start": 119,
-            "end": 120
+            "start": 141,
+            "end": 142
         },
         "context": {
             "type": "variable",
@@ -61689,8 +62539,8 @@
             "value": "$kendo-button-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 121,
-                "end": 121
+                "start": 143,
+                "end": 143
             }
         },
         "group": [
@@ -61705,8 +62555,8 @@
     {
         "description": "The font size of the Toolbar overflow container.\n",
         "commentRange": {
-            "start": 123,
-            "end": 124
+            "start": 145,
+            "end": 146
         },
         "context": {
             "type": "variable",
@@ -61714,8 +62564,8 @@
             "value": "$kendo-menu-popup-md-font-size",
             "scope": "default",
             "line": {
-                "start": 125,
-                "end": 125
+                "start": 147,
+                "end": 147
             }
         },
         "group": [
@@ -61730,8 +62580,8 @@
     {
         "description": "The line-height of the Toolbar overflow container.\n",
         "commentRange": {
-            "start": 126,
-            "end": 127
+            "start": 148,
+            "end": 149
         },
         "context": {
             "type": "variable",
@@ -61739,8 +62589,8 @@
             "value": "$kendo-menu-popup-md-line-height",
             "scope": "default",
             "line": {
-                "start": 128,
-                "end": 128
+                "start": 150,
+                "end": 150
             }
         },
         "group": [
@@ -61755,8 +62605,8 @@
     {
         "description": "The vertical padding of the Toolbar overflow button.\n",
         "commentRange": {
-            "start": 129,
-            "end": 130
+            "start": 151,
+            "end": 152
         },
         "context": {
             "type": "variable",
@@ -61764,8 +62614,8 @@
             "value": "$kendo-menu-popup-md-item-padding-y",
             "scope": "default",
             "line": {
-                "start": 131,
-                "end": 131
+                "start": 153,
+                "end": 153
             }
         },
         "group": [
@@ -61780,8 +62630,8 @@
     {
         "description": "The horizontal padding of the Toolbar overflow button.\n",
         "commentRange": {
-            "start": 132,
-            "end": 133
+            "start": 154,
+            "end": 155
         },
         "context": {
             "type": "variable",
@@ -61789,8 +62639,8 @@
             "value": "$kendo-menu-popup-md-item-padding-x",
             "scope": "default",
             "line": {
-                "start": 134,
-                "end": 134
+                "start": 156,
+                "end": 156
             }
         },
         "group": [
@@ -61805,17 +62655,17 @@
     {
         "description": "The sizes map for the Toolbar.\n",
         "commentRange": {
-            "start": 136,
-            "end": 137
+            "start": 158,
+            "end": 159
         },
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-sizes",
-            "value": "(\n    sm: (\n        padding-x: $kendo-toolbar-sm-padding-x,\n        padding-y: $kendo-toolbar-sm-padding-y,\n        spacing: $kendo-toolbar-sm-spacing\n    ),\n    md: (\n        padding-x: $kendo-toolbar-md-padding-x,\n        padding-y: $kendo-toolbar-md-padding-y,\n        spacing: $kendo-toolbar-md-spacing\n    ),\n    lg: (\n        padding-x: $kendo-toolbar-lg-padding-x,\n        padding-y: $kendo-toolbar-lg-padding-y,\n        spacing: $kendo-toolbar-lg-spacing\n    )\n)",
+            "value": "(\n    sm: (\n        padding-x: $kendo-toolbar-sm-padding-x,\n        padding-y: $kendo-toolbar-sm-padding-y,\n        spacing: $kendo-toolbar-sm-spacing,\n        separator-height: $kendo-toolbar-sm-separator-height\n    ),\n    md: (\n        padding-x: $kendo-toolbar-md-padding-x,\n        padding-y: $kendo-toolbar-md-padding-y,\n        spacing: $kendo-toolbar-md-spacing,\n        separator-height: $kendo-toolbar-md-separator-height\n    ),\n    lg: (\n        padding-x: $kendo-toolbar-lg-padding-x,\n        padding-y: $kendo-toolbar-lg-padding-y,\n        spacing: $kendo-toolbar-lg-spacing,\n        separator-height: $kendo-toolbar-lg-separator-height\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 138,
-                "end": 154
+                "start": 160,
+                "end": 179
             }
         },
         "group": [