@progress/kendo-theme-classic 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": 162,
@@ -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='#f35800' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 165,
@@ -28456,19 +28456,44 @@
         }
     },
     {
-        "description": "The sizes map for the Input components.\n",
+        "description": "The calculated height of the Input.\n",
         "commentRange": {
             "start": 76,
             "end": 77
         },
+        "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": 78,
+                "end": 78
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The sizes map for the Input components.\n",
+        "commentRange": {
+            "start": 83,
+            "end": 84
+        },
         "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": 78,
-                "end": 103
+                "start": 85,
+                "end": 110
             }
         },
         "group": [
@@ -28483,8 +28508,8 @@
     {
         "description": "The background color of the Input components.\n",
         "commentRange": {
-            "start": 105,
-            "end": 106
+            "start": 112,
+            "end": 113
         },
         "context": {
             "type": "variable",
@@ -28492,8 +28517,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 107,
-                "end": 107
+                "start": 114,
+                "end": 114
             }
         },
         "group": [
@@ -28508,8 +28533,8 @@
     {
         "description": "The text color of the Input components.\n",
         "commentRange": {
-            "start": 108,
-            "end": 109
+            "start": 115,
+            "end": 116
         },
         "context": {
             "type": "variable",
@@ -28517,8 +28542,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 110,
-                "end": 110
+                "start": 117,
+                "end": 117
             }
         },
         "group": [
@@ -28533,8 +28558,8 @@
     {
         "description": "The border color of the Input components.\n",
         "commentRange": {
-            "start": 111,
-            "end": 112
+            "start": 118,
+            "end": 119
         },
         "context": {
             "type": "variable",
@@ -28542,8 +28567,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 113,
-                "end": 113
+                "start": 120,
+                "end": 120
             }
         },
         "group": [
@@ -28558,8 +28583,8 @@
     {
         "description": "The shadow of the Input components.\n",
         "commentRange": {
-            "start": 114,
-            "end": 115
+            "start": 121,
+            "end": 122
         },
         "context": {
             "type": "variable",
@@ -28567,8 +28592,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 116,
-                "end": 116
+                "start": 123,
+                "end": 123
             }
         },
         "group": [
@@ -28583,8 +28608,8 @@
     {
         "description": "The background color of the hovered Input components.\n",
         "commentRange": {
-            "start": 118,
-            "end": 119
+            "start": 125,
+            "end": 126
         },
         "context": {
             "type": "variable",
@@ -28592,8 +28617,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 120,
-                "end": 120
+                "start": 127,
+                "end": 127
             }
         },
         "group": [
@@ -28608,8 +28633,8 @@
     {
         "description": "The text color of the hovered Input components.\n",
         "commentRange": {
-            "start": 121,
-            "end": 122
+            "start": 128,
+            "end": 129
         },
         "context": {
             "type": "variable",
@@ -28617,8 +28642,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 123,
-                "end": 123
+                "start": 130,
+                "end": 130
             }
         },
         "group": [
@@ -28633,8 +28658,8 @@
     {
         "description": "The border color of the hovered Input components.\n",
         "commentRange": {
-            "start": 124,
-            "end": 125
+            "start": 131,
+            "end": 132
         },
         "context": {
             "type": "variable",
@@ -28642,8 +28667,8 @@
             "value": "if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 3 ))",
             "scope": "default",
             "line": {
-                "start": 126,
-                "end": 126
+                "start": 133,
+                "end": 133
             }
         },
         "group": [
@@ -28658,8 +28683,8 @@
     {
         "description": "The shadow of the hovered Input components.\n",
         "commentRange": {
-            "start": 127,
-            "end": 128
+            "start": 134,
+            "end": 135
         },
         "context": {
             "type": "variable",
@@ -28667,8 +28692,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 129,
-                "end": 129
+                "start": 136,
+                "end": 136
             }
         },
         "group": [
@@ -28683,8 +28708,8 @@
     {
         "description": "The background color of the focused Input components.\n",
         "commentRange": {
-            "start": 131,
-            "end": 132
+            "start": 138,
+            "end": 139
         },
         "context": {
             "type": "variable",
@@ -28692,8 +28717,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 133,
-                "end": 133
+                "start": 140,
+                "end": 140
             }
         },
         "group": [
@@ -28708,8 +28733,8 @@
     {
         "description": "The text color of the focused Input components.\n",
         "commentRange": {
-            "start": 134,
-            "end": 135
+            "start": 141,
+            "end": 142
         },
         "context": {
             "type": "variable",
@@ -28717,8 +28742,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 136,
-                "end": 136
+                "start": 143,
+                "end": 143
             }
         },
         "group": [
@@ -28733,8 +28758,8 @@
     {
         "description": "The border color of the focused Input components.\n",
         "commentRange": {
-            "start": 137,
-            "end": 138
+            "start": 144,
+            "end": 145
         },
         "context": {
             "type": "variable",
@@ -28742,8 +28767,8 @@
             "value": "rgba( black, .1 )",
             "scope": "default",
             "line": {
-                "start": 139,
-                "end": 139
+                "start": 146,
+                "end": 146
             }
         },
         "group": [
@@ -28758,8 +28783,8 @@
     {
         "description": "The shadow of the focused Input components.\n",
         "commentRange": {
-            "start": 140,
-            "end": 141
+            "start": 147,
+            "end": 148
         },
         "context": {
             "type": "variable",
@@ -28767,8 +28792,8 @@
             "value": "0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .04 )",
             "scope": "default",
             "line": {
-                "start": 142,
-                "end": 142
+                "start": 149,
+                "end": 149
             }
         },
         "group": [
@@ -28783,8 +28808,8 @@
     {
         "description": "The background color of the selected Input components.\n",
         "commentRange": {
-            "start": 144,
-            "end": 145
+            "start": 151,
+            "end": 152
         },
         "context": {
             "type": "variable",
@@ -28792,8 +28817,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 146,
-                "end": 146
+                "start": 153,
+                "end": 153
             }
         },
         "group": [
@@ -28808,8 +28833,8 @@
     {
         "description": "The text color of the selected Input components.\n",
         "commentRange": {
-            "start": 147,
-            "end": 148
+            "start": 154,
+            "end": 155
         },
         "context": {
             "type": "variable",
@@ -28817,8 +28842,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 149,
-                "end": 149
+                "start": 156,
+                "end": 156
             }
         },
         "group": [
@@ -28833,8 +28858,8 @@
     {
         "description": "The background color of the disabled Input components.\n",
         "commentRange": {
-            "start": 151,
-            "end": 152
+            "start": 158,
+            "end": 159
         },
         "context": {
             "type": "variable",
@@ -28842,8 +28867,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 153,
-                "end": 153
+                "start": 160,
+                "end": 160
             }
         },
         "group": [
@@ -28858,8 +28883,8 @@
     {
         "description": "The text color of the disabled Input components.\n",
         "commentRange": {
-            "start": 154,
-            "end": 155
+            "start": 161,
+            "end": 162
         },
         "context": {
             "type": "variable",
@@ -28867,8 +28892,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 156,
-                "end": 156
+                "start": 163,
+                "end": 163
             }
         },
         "group": [
@@ -28883,8 +28908,8 @@
     {
         "description": "The border color of the disabled Input components.\n",
         "commentRange": {
-            "start": 157,
-            "end": 158
+            "start": 164,
+            "end": 165
         },
         "context": {
             "type": "variable",
@@ -28892,8 +28917,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 159,
-                "end": 159
+                "start": 166,
+                "end": 166
             }
         },
         "group": [
@@ -28908,8 +28933,8 @@
     {
         "description": "The gradient of the disabled Input components.\n",
         "commentRange": {
-            "start": 160,
-            "end": 161
+            "start": 167,
+            "end": 168
         },
         "context": {
             "type": "variable",
@@ -28917,8 +28942,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 162,
-                "end": 162
+                "start": 169,
+                "end": 169
             }
         },
         "group": [
@@ -28933,8 +28958,8 @@
     {
         "description": "The shadow of the disabled Input components.\n",
         "commentRange": {
-            "start": 163,
-            "end": 164
+            "start": 170,
+            "end": 171
         },
         "context": {
             "type": "variable",
@@ -28942,8 +28967,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 165,
-                "end": 165
+                "start": 172,
+                "end": 172
             }
         },
         "group": [
@@ -28958,8 +28983,8 @@
     {
         "description": "The background color of the outline Input components.\n",
         "commentRange": {
-            "start": 167,
-            "end": 168
+            "start": 174,
+            "end": 175
         },
         "context": {
             "type": "variable",
@@ -28967,8 +28992,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 169,
-                "end": 169
+                "start": 176,
+                "end": 176
             }
         },
         "group": [
@@ -28983,8 +29008,8 @@
     {
         "description": "The text color of the outline Input components.\n",
         "commentRange": {
-            "start": 170,
-            "end": 171
+            "start": 177,
+            "end": 178
         },
         "context": {
             "type": "variable",
@@ -28992,8 +29017,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 172,
-                "end": 172
+                "start": 179,
+                "end": 179
             }
         },
         "group": [
@@ -29008,8 +29033,8 @@
     {
         "description": "The border color of the outline Input components.\n",
         "commentRange": {
-            "start": 173,
-            "end": 174
+            "start": 180,
+            "end": 181
         },
         "context": {
             "type": "variable",
@@ -29017,8 +29042,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-button-text, .5))",
             "scope": "default",
             "line": {
-                "start": 175,
-                "end": 175
+                "start": 182,
+                "end": 182
             }
         },
         "group": [
@@ -29033,8 +29058,8 @@
     {
         "description": "The background color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 177,
-            "end": 178
+            "start": 184,
+            "end": 185
         },
         "context": {
             "type": "variable",
@@ -29042,8 +29067,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 179,
-                "end": 179
+                "start": 186,
+                "end": 186
             }
         },
         "group": [
@@ -29058,8 +29083,8 @@
     {
         "description": "The text color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 180,
-            "end": 181
+            "start": 187,
+            "end": 188
         },
         "context": {
             "type": "variable",
@@ -29067,8 +29092,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 182,
-                "end": 182
+                "start": 189,
+                "end": 189
             }
         },
         "group": [
@@ -29083,8 +29108,8 @@
     {
         "description": "The border color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 183,
-            "end": 184
+            "start": 190,
+            "end": 191
         },
         "context": {
             "type": "variable",
@@ -29092,8 +29117,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 80%, transparent), rgba( $kendo-button-text, .8))",
             "scope": "default",
             "line": {
-                "start": 185,
-                "end": 185
+                "start": 192,
+                "end": 192
             }
         },
         "group": [
@@ -29108,8 +29133,8 @@
     {
         "description": "The background color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 187,
-            "end": 188
+            "start": 194,
+            "end": 195
         },
         "context": {
             "type": "variable",
@@ -29117,8 +29142,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 189,
-                "end": 189
+                "start": 196,
+                "end": 196
             }
         },
         "group": [
@@ -29133,8 +29158,8 @@
     {
         "description": "The text color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 190,
-            "end": 191
+            "start": 197,
+            "end": 198
         },
         "context": {
             "type": "variable",
@@ -29142,8 +29167,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 192,
-                "end": 192
+                "start": 199,
+                "end": 199
             }
         },
         "group": [
@@ -29158,8 +29183,8 @@
     {
         "description": "The border color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 193,
-            "end": 194
+            "start": 200,
+            "end": 201
         },
         "context": {
             "type": "variable",
@@ -29167,8 +29192,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 195,
-                "end": 195
+                "start": 202,
+                "end": 202
             }
         },
         "group": [
@@ -29183,8 +29208,8 @@
     {
         "description": "The shadow of the outline focused Input components.\n",
         "commentRange": {
-            "start": 196,
-            "end": 197
+            "start": 203,
+            "end": 204
         },
         "context": {
             "type": "variable",
@@ -29192,8 +29217,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 198,
-                "end": 198
+                "start": 205,
+                "end": 205
             }
         },
         "group": [
@@ -29208,8 +29233,8 @@
     {
         "description": "The background color of the flat Input components.\n",
         "commentRange": {
-            "start": 200,
-            "end": 201
+            "start": 207,
+            "end": 208
         },
         "context": {
             "type": "variable",
@@ -29217,8 +29242,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 202,
-                "end": 202
+                "start": 209,
+                "end": 209
             }
         },
         "group": [
@@ -29233,8 +29258,8 @@
     {
         "description": "The text color of the flat Input components.\n",
         "commentRange": {
-            "start": 203,
-            "end": 204
+            "start": 210,
+            "end": 211
         },
         "context": {
             "type": "variable",
@@ -29242,8 +29267,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 205,
-                "end": 205
+                "start": 212,
+                "end": 212
             }
         },
         "group": [
@@ -29258,8 +29283,8 @@
     {
         "description": "The border color of the flat Input components.\n",
         "commentRange": {
-            "start": 206,
-            "end": 207
+            "start": 213,
+            "end": 214
         },
         "context": {
             "type": "variable",
@@ -29267,8 +29292,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 208,
-                "end": 208
+                "start": 215,
+                "end": 215
             }
         },
         "group": [
@@ -29283,8 +29308,8 @@
     {
         "description": "The background color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 210,
-            "end": 211
+            "start": 217,
+            "end": 218
         },
         "context": {
             "type": "variable",
@@ -29292,8 +29317,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 212,
-                "end": 212
+                "start": 219,
+                "end": 219
             }
         },
         "group": [
@@ -29308,8 +29333,8 @@
     {
         "description": "The text color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 213,
-            "end": 214
+            "start": 220,
+            "end": 221
         },
         "context": {
             "type": "variable",
@@ -29317,8 +29342,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 215,
-                "end": 215
+                "start": 222,
+                "end": 222
             }
         },
         "group": [
@@ -29333,8 +29358,8 @@
     {
         "description": "The border color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 216,
-            "end": 217
+            "start": 223,
+            "end": 224
         },
         "context": {
             "type": "variable",
@@ -29342,8 +29367,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 218,
-                "end": 218
+                "start": 225,
+                "end": 225
             }
         },
         "group": [
@@ -29358,8 +29383,8 @@
     {
         "description": "The background color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 220,
-            "end": 221
+            "start": 227,
+            "end": 228
         },
         "context": {
             "type": "variable",
@@ -29367,8 +29392,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 222,
-                "end": 222
+                "start": 229,
+                "end": 229
             }
         },
         "group": [
@@ -29383,8 +29408,8 @@
     {
         "description": "The text color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 223,
-            "end": 224
+            "start": 230,
+            "end": 231
         },
         "context": {
             "type": "variable",
@@ -29392,8 +29417,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 225,
-                "end": 225
+                "start": 232,
+                "end": 232
             }
         },
         "group": [
@@ -29408,8 +29433,8 @@
     {
         "description": "The border color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 226,
-            "end": 227
+            "start": 233,
+            "end": 234
         },
         "context": {
             "type": "variable",
@@ -29417,8 +29442,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 228,
-                "end": 228
+                "start": 235,
+                "end": 235
             }
         },
         "group": [
@@ -29433,8 +29458,8 @@
     {
         "description": "The shadow of the flat focused Input components.\n",
         "commentRange": {
-            "start": 229,
-            "end": 230
+            "start": 236,
+            "end": 237
         },
         "context": {
             "type": "variable",
@@ -29442,8 +29467,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 231,
-                "end": 231
+                "start": 238,
+                "end": 238
             }
         },
         "group": [
@@ -29458,8 +29483,8 @@
     {
         "description": "The text color of the Input placeholder.\n",
         "commentRange": {
-            "start": 233,
-            "end": 234
+            "start": 240,
+            "end": 241
         },
         "context": {
             "type": "variable",
@@ -29467,8 +29492,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 235,
-                "end": 235
+                "start": 242,
+                "end": 242
             }
         },
         "group": [
@@ -29483,8 +29508,8 @@
     {
         "description": "The opacity of the Input placeholder.\n",
         "commentRange": {
-            "start": 236,
-            "end": 237
+            "start": 243,
+            "end": 244
         },
         "context": {
             "type": "variable",
@@ -29492,8 +29517,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 238,
-                "end": 238
+                "start": 245,
+                "end": 245
             }
         },
         "group": [
@@ -29508,8 +29533,8 @@
     {
         "description": "The color of the Input clear value icon.\n",
         "commentRange": {
-            "start": 241,
-            "end": 242
+            "start": 248,
+            "end": 249
         },
         "context": {
             "type": "variable",
@@ -29517,8 +29542,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 243,
-                "end": 243
+                "start": 250,
+                "end": 250
             }
         },
         "group": [
@@ -29533,8 +29558,8 @@
     {
         "description": "The opacity of the Input clear value icon.\n",
         "commentRange": {
-            "start": 244,
-            "end": 245
+            "start": 251,
+            "end": 252
         },
         "context": {
             "type": "variable",
@@ -29542,8 +29567,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 246,
-                "end": 246
+                "start": 253,
+                "end": 253
             }
         },
         "group": [
@@ -29558,8 +29583,8 @@
     {
         "description": "The color of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 247,
-            "end": 248
+            "start": 254,
+            "end": 255
         },
         "context": {
             "type": "variable",
@@ -29567,8 +29592,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 249,
-                "end": 249
+                "start": 256,
+                "end": 256
             }
         },
         "group": [
@@ -29583,8 +29608,8 @@
     {
         "description": "The opacity of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 250,
-            "end": 251
+            "start": 257,
+            "end": 258
         },
         "context": {
             "type": "variable",
@@ -29592,8 +29617,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 252,
-                "end": 252
+                "start": 259,
+                "end": 259
             }
         },
         "group": [
@@ -29608,8 +29633,8 @@
     {
         "description": "The vertical margin of the clear value icon.\n",
         "commentRange": {
-            "start": 254,
-            "end": 255
+            "start": 261,
+            "end": 262
         },
         "context": {
             "type": "variable",
@@ -29617,8 +29642,8 @@
             "value": "k-spacing(0.5)",
             "scope": "default",
             "line": {
-                "start": 256,
-                "end": 256
+                "start": 263,
+                "end": 263
             }
         },
         "group": [
@@ -29633,8 +29658,8 @@
     {
         "description": "The horizontal margin of the clear value icon.\n",
         "commentRange": {
-            "start": 257,
-            "end": 258
+            "start": 264,
+            "end": 265
         },
         "context": {
             "type": "variable",
@@ -29642,8 +29667,8 @@
             "value": "$kendo-input-values-margin-y",
             "scope": "default",
             "line": {
-                "start": 259,
-                "end": 259
+                "start": 266,
+                "end": 266
             }
         },
         "group": [
@@ -29658,8 +29683,8 @@
     {
         "description": "The width of the Input button.\n",
         "commentRange": {
-            "start": 262,
-            "end": 263
+            "start": 269,
+            "end": 270
         },
         "context": {
             "type": "variable",
@@ -29667,8 +29692,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 264,
-                "end": 264
+                "start": 271,
+                "end": 271
             }
         },
         "group": [
@@ -29683,8 +29708,8 @@
     {
         "description": "The border width of the Input button.\n",
         "commentRange": {
-            "start": 265,
-            "end": 266
+            "start": 272,
+            "end": 273
         },
         "context": {
             "type": "variable",
@@ -29692,8 +29717,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 267,
-                "end": 267
+                "start": 274,
+                "end": 274
             }
         },
         "group": [
@@ -29708,8 +29733,8 @@
     {
         "description": "The width of the Input spinner button.\n",
         "commentRange": {
-            "start": 268,
-            "end": 269
+            "start": 275,
+            "end": 276
         },
         "context": {
             "type": "variable",
@@ -29717,8 +29742,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 270,
-                "end": 270
+                "start": 277,
+                "end": 277
             }
         },
         "group": [
@@ -29733,8 +29758,8 @@
     {
         "description": "The icon offset of the Input spinner button.\n",
         "commentRange": {
-            "start": 271,
-            "end": 272
+            "start": 278,
+            "end": 279
         },
         "context": {
             "type": "variable",
@@ -29742,8 +29767,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 273,
-                "end": 273
+                "start": 280,
+                "end": 280
             }
         },
         "group": [
@@ -29758,8 +29783,8 @@
     {
         "description": "The color of the Input separator.\n",
         "commentRange": {
-            "start": 276,
-            "end": 277
+            "start": 283,
+            "end": 284
         },
         "context": {
             "type": "variable",
@@ -29767,8 +29792,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 278,
-                "end": 278
+                "start": 285,
+                "end": 285
             }
         },
         "group": [
@@ -29783,8 +29808,8 @@
     {
         "description": "The opacity of the Input separator.\n",
         "commentRange": {
-            "start": 279,
-            "end": 280
+            "start": 286,
+            "end": 287
         },
         "context": {
             "type": "variable",
@@ -29792,8 +29817,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 281,
-                "end": 281
+                "start": 288,
+                "end": 288
             }
         },
         "group": [
@@ -29808,8 +29833,8 @@
     {
         "description": "The text color of the Input prefix.\n",
         "commentRange": {
-            "start": 283,
-            "end": 284
+            "start": 290,
+            "end": 291
         },
         "context": {
             "type": "variable",
@@ -29817,8 +29842,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 285,
-                "end": 285
+                "start": 292,
+                "end": 292
             }
         },
         "group": [
@@ -29833,8 +29858,8 @@
     {
         "description": "The text color of the Input suffix.\n",
         "commentRange": {
-            "start": 286,
-            "end": 287
+            "start": 293,
+            "end": 294
         },
         "context": {
             "type": "variable",
@@ -29842,8 +29867,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 288,
-                "end": 288
+                "start": 295,
+                "end": 295
             }
         },
         "group": [
@@ -29858,8 +29883,8 @@
     {
         "description": "The border color of the invalid Input components.\n",
         "commentRange": {
-            "start": 290,
-            "end": 291
+            "start": 297,
+            "end": 298
         },
         "context": {
             "type": "variable",
@@ -29867,8 +29892,8 @@
             "value": "$kendo-invalid-border",
             "scope": "default",
             "line": {
-                "start": 292,
-                "end": 292
+                "start": 299,
+                "end": 299
             }
         },
         "group": [
@@ -29883,8 +29908,8 @@
     {
         "description": "The shadow of the invalid Input components.\n",
         "commentRange": {
-            "start": 293,
-            "end": 294
+            "start": 300,
+            "end": 301
         },
         "context": {
             "type": "variable",
@@ -29892,8 +29917,8 @@
             "value": "$kendo-invalid-shadow",
             "scope": "default",
             "line": {
-                "start": 295,
-                "end": 295
+                "start": 302,
+                "end": 302
             }
         },
         "group": [
@@ -35705,6 +35730,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": {
@@ -41583,8 +41908,8 @@
     {
         "description": "The background color of the Picker components.\n",
         "commentRange": {
-            "start": 297,
-            "end": 298
+            "start": 304,
+            "end": 305
         },
         "context": {
             "type": "variable",
@@ -41592,8 +41917,8 @@
             "value": "$kendo-button-bg",
             "scope": "default",
             "line": {
-                "start": 299,
-                "end": 299
+                "start": 306,
+                "end": 306
             }
         },
         "group": [
@@ -41608,8 +41933,8 @@
     {
         "description": "The text color of the Picker components.\n",
         "commentRange": {
-            "start": 300,
-            "end": 301
+            "start": 307,
+            "end": 308
         },
         "context": {
             "type": "variable",
@@ -41617,8 +41942,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 302,
-                "end": 302
+                "start": 309,
+                "end": 309
             }
         },
         "group": [
@@ -41633,8 +41958,8 @@
     {
         "description": "The border color of the Picker components.\n",
         "commentRange": {
-            "start": 303,
-            "end": 304
+            "start": 310,
+            "end": 311
         },
         "context": {
             "type": "variable",
@@ -41642,8 +41967,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 305,
-                "end": 305
+                "start": 312,
+                "end": 312
             }
         },
         "group": [
@@ -41658,8 +41983,8 @@
     {
         "description": "The gradient of the Picker components.\n",
         "commentRange": {
-            "start": 306,
-            "end": 307
+            "start": 313,
+            "end": 314
         },
         "context": {
             "type": "variable",
@@ -41667,8 +41992,8 @@
             "value": "$kendo-button-gradient",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 315,
+                "end": 315
             }
         },
         "group": [
@@ -41683,8 +42008,8 @@
     {
         "description": "The shadow of the Picker components.\n",
         "commentRange": {
-            "start": 309,
-            "end": 310
+            "start": 316,
+            "end": 317
         },
         "context": {
             "type": "variable",
@@ -41692,8 +42017,8 @@
             "value": "$kendo-button-shadow",
             "scope": "default",
             "line": {
-                "start": 311,
-                "end": 311
+                "start": 318,
+                "end": 318
             }
         },
         "group": [
@@ -41708,8 +42033,8 @@
     {
         "description": "The background color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 313,
-            "end": 314
+            "start": 320,
+            "end": 321
         },
         "context": {
             "type": "variable",
@@ -41717,8 +42042,8 @@
             "value": "$kendo-button-hover-bg",
             "scope": "default",
             "line": {
-                "start": 315,
-                "end": 315
+                "start": 322,
+                "end": 322
             }
         },
         "group": [
@@ -41733,8 +42058,8 @@
     {
         "description": "The text color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 316,
-            "end": 317
+            "start": 323,
+            "end": 324
         },
         "context": {
             "type": "variable",
@@ -41742,8 +42067,8 @@
             "value": "$kendo-button-hover-text",
             "scope": "default",
             "line": {
-                "start": 318,
-                "end": 318
+                "start": 325,
+                "end": 325
             }
         },
         "group": [
@@ -41758,8 +42083,8 @@
     {
         "description": "The border color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 319,
-            "end": 320
+            "start": 326,
+            "end": 327
         },
         "context": {
             "type": "variable",
@@ -41767,8 +42092,8 @@
             "value": "$kendo-button-hover-border",
             "scope": "default",
             "line": {
-                "start": 321,
-                "end": 321
+                "start": 328,
+                "end": 328
             }
         },
         "group": [
@@ -41783,8 +42108,8 @@
     {
         "description": "The gradient of the hovered Picker components.\n",
         "commentRange": {
-            "start": 322,
-            "end": 323
+            "start": 329,
+            "end": 330
         },
         "context": {
             "type": "variable",
@@ -41792,8 +42117,8 @@
             "value": "$kendo-button-hover-gradient",
             "scope": "default",
             "line": {
-                "start": 324,
-                "end": 324
+                "start": 331,
+                "end": 331
             }
         },
         "group": [
@@ -41808,8 +42133,8 @@
     {
         "description": "The shadow of the hovered Picker components.\n",
         "commentRange": {
-            "start": 325,
-            "end": 326
+            "start": 332,
+            "end": 333
         },
         "context": {
             "type": "variable",
@@ -41817,8 +42142,8 @@
             "value": "$kendo-button-hover-shadow",
             "scope": "default",
             "line": {
-                "start": 327,
-                "end": 327
+                "start": 334,
+                "end": 334
             }
         },
         "group": [
@@ -41833,8 +42158,8 @@
     {
         "description": "The background color of the focused Picker components.\n",
         "commentRange": {
-            "start": 329,
-            "end": 330
+            "start": 336,
+            "end": 337
         },
         "context": {
             "type": "variable",
@@ -41842,8 +42167,8 @@
             "value": "$kendo-button-focus-bg",
             "scope": "default",
             "line": {
-                "start": 331,
-                "end": 331
+                "start": 338,
+                "end": 338
             }
         },
         "group": [
@@ -41858,8 +42183,8 @@
     {
         "description": "The text color of the focused Picker components.\n",
         "commentRange": {
-            "start": 332,
-            "end": 333
+            "start": 339,
+            "end": 340
         },
         "context": {
             "type": "variable",
@@ -41867,8 +42192,8 @@
             "value": "$kendo-button-focus-text",
             "scope": "default",
             "line": {
-                "start": 334,
-                "end": 334
+                "start": 341,
+                "end": 341
             }
         },
         "group": [
@@ -41883,8 +42208,8 @@
     {
         "description": "The border color of the focused Picker components.\n",
         "commentRange": {
-            "start": 335,
-            "end": 336
+            "start": 342,
+            "end": 343
         },
         "context": {
             "type": "variable",
@@ -41892,8 +42217,8 @@
             "value": "$kendo-button-focus-border",
             "scope": "default",
             "line": {
-                "start": 337,
-                "end": 337
+                "start": 344,
+                "end": 344
             }
         },
         "group": [
@@ -41908,8 +42233,8 @@
     {
         "description": "The gradient of the focused Picker components.\n",
         "commentRange": {
-            "start": 338,
-            "end": 339
+            "start": 345,
+            "end": 346
         },
         "context": {
             "type": "variable",
@@ -41917,8 +42242,8 @@
             "value": "$kendo-button-focus-gradient",
             "scope": "default",
             "line": {
-                "start": 340,
-                "end": 340
+                "start": 347,
+                "end": 347
             }
         },
         "group": [
@@ -41933,8 +42258,8 @@
     {
         "description": "The shadow of the focused Picker components.\n",
         "commentRange": {
-            "start": 341,
-            "end": 342
+            "start": 348,
+            "end": 349
         },
         "context": {
             "type": "variable",
@@ -41942,8 +42267,8 @@
             "value": "$kendo-button-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 343,
-                "end": 343
+                "start": 350,
+                "end": 350
             }
         },
         "group": [
@@ -41958,8 +42283,8 @@
     {
         "description": "The background color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 345,
-            "end": 346
+            "start": 352,
+            "end": 353
         },
         "context": {
             "type": "variable",
@@ -41967,8 +42292,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 347,
-                "end": 347
+                "start": 354,
+                "end": 354
             }
         },
         "group": [
@@ -41983,8 +42308,8 @@
     {
         "description": "The text color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 348,
-            "end": 349
+            "start": 355,
+            "end": 356
         },
         "context": {
             "type": "variable",
@@ -41992,8 +42317,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 350,
-                "end": 350
+                "start": 357,
+                "end": 357
             }
         },
         "group": [
@@ -42008,8 +42333,8 @@
     {
         "description": "The border color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 351,
-            "end": 352
+            "start": 358,
+            "end": 359
         },
         "context": {
             "type": "variable",
@@ -42017,8 +42342,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 353,
-                "end": 353
+                "start": 360,
+                "end": 360
             }
         },
         "group": [
@@ -42033,8 +42358,8 @@
     {
         "description": "The gradient of the disabled Picker components.\n",
         "commentRange": {
-            "start": 354,
-            "end": 355
+            "start": 361,
+            "end": 362
         },
         "context": {
             "type": "variable",
@@ -42042,8 +42367,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 356,
-                "end": 356
+                "start": 363,
+                "end": 363
             }
         },
         "group": [
@@ -42058,8 +42383,8 @@
     {
         "description": "The shadow of the disabled Picker components.\n",
         "commentRange": {
-            "start": 357,
-            "end": 358
+            "start": 364,
+            "end": 365
         },
         "context": {
             "type": "variable",
@@ -42067,8 +42392,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 359,
-                "end": 359
+                "start": 366,
+                "end": 366
             }
         },
         "group": [
@@ -42083,8 +42408,8 @@
     {
         "description": "The background color of the outline Picker components.\n",
         "commentRange": {
-            "start": 361,
-            "end": 362
+            "start": 368,
+            "end": 369
         },
         "context": {
             "type": "variable",
@@ -42092,8 +42417,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 363,
-                "end": 363
+                "start": 370,
+                "end": 370
             }
         },
         "group": [
@@ -42108,8 +42433,8 @@
     {
         "description": "The text color of the outline Picker components.\n",
         "commentRange": {
-            "start": 364,
-            "end": 365
+            "start": 371,
+            "end": 372
         },
         "context": {
             "type": "variable",
@@ -42117,8 +42442,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 366,
-                "end": 366
+                "start": 373,
+                "end": 373
             }
         },
         "group": [
@@ -42133,8 +42458,8 @@
     {
         "description": "The border color of the outline Picker components.\n",
         "commentRange": {
-            "start": 367,
-            "end": 368
+            "start": 374,
+            "end": 375
         },
         "context": {
             "type": "variable",
@@ -42142,8 +42467,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))",
             "scope": "default",
             "line": {
-                "start": 369,
-                "end": 369
+                "start": 376,
+                "end": 376
             }
         },
         "group": [
@@ -42158,8 +42483,8 @@
     {
         "description": "The background color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 371,
-            "end": 372
+            "start": 378,
+            "end": 379
         },
         "context": {
             "type": "variable",
@@ -42167,8 +42492,8 @@
             "value": "$kendo-picker-outline-text",
             "scope": "default",
             "line": {
-                "start": 373,
-                "end": 373
+                "start": 380,
+                "end": 380
             }
         },
         "group": [
@@ -42183,8 +42508,8 @@
     {
         "description": "The text color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 374,
-            "end": 375
+            "start": 381,
+            "end": 382
         },
         "context": {
             "type": "variable",
@@ -42192,8 +42517,8 @@
             "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))",
             "scope": "default",
             "line": {
-                "start": 376,
-                "end": 376
+                "start": 383,
+                "end": 383
             }
         },
         "group": [
@@ -42208,8 +42533,8 @@
     {
         "description": "The border color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 377,
-            "end": 378
+            "start": 384,
+            "end": 385
         },
         "context": {
             "type": "variable",
@@ -42217,8 +42542,8 @@
             "value": "$kendo-picker-outline-hover-bg",
             "scope": "default",
             "line": {
-                "start": 379,
-                "end": 379
+                "start": 386,
+                "end": 386
             }
         },
         "group": [
@@ -42233,8 +42558,8 @@
     {
         "description": "The background color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 381,
-            "end": 382
+            "start": 388,
+            "end": 389
         },
         "context": {
             "type": "variable",
@@ -42242,8 +42567,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 383,
-                "end": 383
+                "start": 390,
+                "end": 390
             }
         },
         "group": [
@@ -42258,8 +42583,8 @@
     {
         "description": "The text color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 384,
-            "end": 385
+            "start": 391,
+            "end": 392
         },
         "context": {
             "type": "variable",
@@ -42267,8 +42592,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 386,
-                "end": 386
+                "start": 393,
+                "end": 393
             }
         },
         "group": [
@@ -42283,8 +42608,8 @@
     {
         "description": "The border color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 387,
-            "end": 388
+            "start": 394,
+            "end": 395
         },
         "context": {
             "type": "variable",
@@ -42292,8 +42617,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 389,
-                "end": 389
+                "start": 396,
+                "end": 396
             }
         },
         "group": [
@@ -42308,8 +42633,8 @@
     {
         "description": "The shadow of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 390,
-            "end": 391
+            "start": 397,
+            "end": 398
         },
         "context": {
             "type": "variable",
@@ -42317,8 +42642,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 392,
-                "end": 392
+                "start": 399,
+                "end": 399
             }
         },
         "group": [
@@ -42333,8 +42658,8 @@
     {
         "description": "The background color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 394,
-            "end": 395
+            "start": 401,
+            "end": 402
         },
         "context": {
             "type": "variable",
@@ -42342,8 +42667,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 396,
-                "end": 396
+                "start": 403,
+                "end": 403
             }
         },
         "group": [
@@ -42358,8 +42683,8 @@
     {
         "description": "The text color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 397,
-            "end": 398
+            "start": 404,
+            "end": 405
         },
         "context": {
             "type": "variable",
@@ -42367,8 +42692,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 399,
-                "end": 399
+                "start": 406,
+                "end": 406
             }
         },
         "group": [
@@ -42383,8 +42708,8 @@
     {
         "description": "The border color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 400,
-            "end": 401
+            "start": 407,
+            "end": 408
         },
         "context": {
             "type": "variable",
@@ -42392,8 +42717,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 402,
-                "end": 402
+                "start": 409,
+                "end": 409
             }
         },
         "group": [
@@ -42408,8 +42733,8 @@
     {
         "description": "The background color of the flat Picker components.\n",
         "commentRange": {
-            "start": 404,
-            "end": 405
+            "start": 411,
+            "end": 412
         },
         "context": {
             "type": "variable",
@@ -42417,8 +42742,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 406,
-                "end": 406
+                "start": 413,
+                "end": 413
             }
         },
         "group": [
@@ -42433,8 +42758,8 @@
     {
         "description": "The text color of the flat Picker components.\n",
         "commentRange": {
-            "start": 407,
-            "end": 408
+            "start": 414,
+            "end": 415
         },
         "context": {
             "type": "variable",
@@ -42442,8 +42767,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 409,
-                "end": 409
+                "start": 416,
+                "end": 416
             }
         },
         "group": [
@@ -42458,8 +42783,8 @@
     {
         "description": "The border color of the flat Picker components.\n",
         "commentRange": {
-            "start": 410,
-            "end": 411
+            "start": 417,
+            "end": 418
         },
         "context": {
             "type": "variable",
@@ -42467,8 +42792,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 412,
-                "end": 412
+                "start": 419,
+                "end": 419
             }
         },
         "group": [
@@ -42483,8 +42808,8 @@
     {
         "description": "The background color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 414,
-            "end": 415
+            "start": 421,
+            "end": 422
         },
         "context": {
             "type": "variable",
@@ -42492,8 +42817,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-button-text, .04 ))",
             "scope": "default",
             "line": {
-                "start": 416,
-                "end": 416
+                "start": 423,
+                "end": 423
             }
         },
         "group": [
@@ -42508,8 +42833,8 @@
     {
         "description": "The text color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 417,
-            "end": 418
+            "start": 424,
+            "end": 425
         },
         "context": {
             "type": "variable",
@@ -42517,8 +42842,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 419,
-                "end": 419
+                "start": 426,
+                "end": 426
             }
         },
         "group": [
@@ -42533,8 +42858,8 @@
     {
         "description": "The border color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 420,
-            "end": 421
+            "start": 427,
+            "end": 428
         },
         "context": {
             "type": "variable",
@@ -42542,8 +42867,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), rgba( $kendo-button-border, .16 ))",
             "scope": "default",
             "line": {
-                "start": 422,
-                "end": 422
+                "start": 429,
+                "end": 429
             }
         },
         "group": [
@@ -42558,8 +42883,8 @@
     {
         "description": "The background color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 424,
-            "end": 425
+            "start": 431,
+            "end": 432
         },
         "context": {
             "type": "variable",
@@ -42567,8 +42892,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 426,
-                "end": 426
+                "start": 433,
+                "end": 433
             }
         },
         "group": [
@@ -42583,8 +42908,8 @@
     {
         "description": "The text color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 427,
-            "end": 428
+            "start": 434,
+            "end": 435
         },
         "context": {
             "type": "variable",
@@ -42592,8 +42917,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 429,
-                "end": 429
+                "start": 436,
+                "end": 436
             }
         },
         "group": [
@@ -42608,8 +42933,8 @@
     {
         "description": "The border color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 430,
-            "end": 431
+            "start": 437,
+            "end": 438
         },
         "context": {
             "type": "variable",
@@ -42617,8 +42942,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 432,
-                "end": 432
+                "start": 439,
+                "end": 439
             }
         },
         "group": [
@@ -42633,8 +42958,8 @@
     {
         "description": "The shadow of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 433,
-            "end": 434
+            "start": 440,
+            "end": 441
         },
         "context": {
             "type": "variable",
@@ -42642,8 +42967,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 435,
-                "end": 435
+                "start": 442,
+                "end": 442
             }
         },
         "group": [
@@ -42658,8 +42983,8 @@
     {
         "description": "The background color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 437,
-            "end": 438
+            "start": 444,
+            "end": 445
         },
         "context": {
             "type": "variable",
@@ -42667,8 +42992,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 439,
-                "end": 439
+                "start": 446,
+                "end": 446
             }
         },
         "group": [
@@ -42683,8 +43008,8 @@
     {
         "description": "The text color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 440,
-            "end": 441
+            "start": 447,
+            "end": 448
         },
         "context": {
             "type": "variable",
@@ -42692,8 +43017,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 442,
-                "end": 442
+                "start": 449,
+                "end": 449
             }
         },
         "group": [
@@ -42708,8 +43033,8 @@
     {
         "description": "The border color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 443,
-            "end": 444
+            "start": 450,
+            "end": 451
         },
         "context": {
             "type": "variable",
@@ -42717,8 +43042,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 445,
-                "end": 445
+                "start": 452,
+                "end": 452
             }
         },
         "group": [
@@ -47689,7 +48014,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": 155,
@@ -58959,15 +59284,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,
@@ -58984,15 +59309,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,
@@ -59009,15 +59334,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,
@@ -59033,11 +59358,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",
@@ -59045,8 +59520,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 42,
-                "end": 42
+                "start": 61,
+                "end": 61
             }
         },
         "group": [
@@ -59061,8 +59536,8 @@
     {
         "description": "The text color of the TabStrip.\n",
         "commentRange": {
-            "start": 43,
-            "end": 44
+            "start": 62,
+            "end": 63
         },
         "context": {
             "type": "variable",
@@ -59070,8 +59545,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 45,
-                "end": 45
+                "start": 64,
+                "end": 64
             }
         },
         "group": [
@@ -59086,8 +59561,8 @@
     {
         "description": "The border color of the TabStrip.\n",
         "commentRange": {
-            "start": 46,
-            "end": 47
+            "start": 65,
+            "end": 66
         },
         "context": {
             "type": "variable",
@@ -59095,8 +59570,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 48,
-                "end": 48
+                "start": 67,
+                "end": 67
             }
         },
         "group": [
@@ -59111,8 +59586,8 @@
     {
         "description": "The horizontal padding of the TabStrip items.\n",
         "commentRange": {
-            "start": 50,
-            "end": 51
+            "start": 69,
+            "end": 70
         },
         "context": {
             "type": "variable",
@@ -59120,8 +59595,8 @@
             "value": "k-spacing(2)",
             "scope": "default",
             "line": {
-                "start": 52,
-                "end": 52
+                "start": 71,
+                "end": 71
             }
         },
         "group": [
@@ -59136,8 +59611,8 @@
     {
         "description": "The vertical padding of the TabStrip items.\n",
         "commentRange": {
-            "start": 53,
-            "end": 54
+            "start": 72,
+            "end": 73
         },
         "context": {
             "type": "variable",
@@ -59145,8 +59620,8 @@
             "value": "k-spacing(1)",
             "scope": "default",
             "line": {
-                "start": 55,
-                "end": 55
+                "start": 74,
+                "end": 74
             }
         },
         "group": [
@@ -59161,8 +59636,8 @@
     {
         "description": "The border width around the TabStrip items.\n",
         "commentRange": {
-            "start": 56,
-            "end": 57
+            "start": 75,
+            "end": 76
         },
         "context": {
             "type": "variable",
@@ -59170,8 +59645,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 58,
-                "end": 58
+                "start": 77,
+                "end": 77
             }
         },
         "group": [
@@ -59186,8 +59661,8 @@
     {
         "description": "The border radius of the TabStrip items.\n",
         "commentRange": {
-            "start": 59,
-            "end": 60
+            "start": 78,
+            "end": 79
         },
         "context": {
             "type": "variable",
@@ -59195,8 +59670,8 @@
             "value": "k-border-radius(md)",
             "scope": "default",
             "line": {
-                "start": 61,
-                "end": 61
+                "start": 80,
+                "end": 80
             }
         },
         "group": [
@@ -59211,8 +59686,8 @@
     {
         "description": "The gap between the TabStrip items.\n",
         "commentRange": {
-            "start": 62,
-            "end": 63
+            "start": 81,
+            "end": 82
         },
         "context": {
             "type": "variable",
@@ -59220,8 +59695,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(2)",
+            "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(0.5)",
+            "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(2)",
+            "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(1.5)",
+            "scope": "default",
+            "line": {
+                "start": 101,
+                "end": 101
             }
         },
         "group": [
@@ -59236,8 +59861,8 @@
     {
         "description": " The background color of the TabStrip items.\n",
         "commentRange": {
-            "start": 66,
-            "end": 67
+            "start": 103,
+            "end": 104
         },
         "context": {
             "type": "variable",
@@ -59245,8 +59870,8 @@
             "value": "$kendo-base-bg",
             "scope": "default",
             "line": {
-                "start": 68,
-                "end": 68
+                "start": 105,
+                "end": 105
             }
         },
         "group": [
@@ -59261,8 +59886,8 @@
     {
         "description": "The text color of the TabStrip items.\n",
         "commentRange": {
-            "start": 69,
-            "end": 70
+            "start": 106,
+            "end": 107
         },
         "context": {
             "type": "variable",
@@ -59270,8 +59895,8 @@
             "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 71,
-                "end": 71
+                "start": 108,
+                "end": 108
             }
         },
         "group": [
@@ -59286,8 +59911,8 @@
     {
         "description": "The border color of the TabStrip items.\n",
         "commentRange": {
-            "start": 72,
-            "end": 73
+            "start": 109,
+            "end": 110
         },
         "context": {
             "type": "variable",
@@ -59295,8 +59920,8 @@
             "value": "$kendo-base-border",
             "scope": "default",
             "line": {
-                "start": 74,
-                "end": 74
+                "start": 111,
+                "end": 111
             }
         },
         "group": [
@@ -59311,8 +59936,8 @@
     {
         "description": "The gradient of the TabStrip items.\n",
         "commentRange": {
-            "start": 75,
-            "end": 76
+            "start": 112,
+            "end": 113
         },
         "context": {
             "type": "variable",
@@ -59320,8 +59945,8 @@
             "value": "$kendo-base-gradient",
             "scope": "default",
             "line": {
-                "start": 77,
-                "end": 77
+                "start": 114,
+                "end": 114
             }
         },
         "group": [
@@ -59336,8 +59961,8 @@
     {
         "description": "The background color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 79,
-            "end": 80
+            "start": 116,
+            "end": 117
         },
         "context": {
             "type": "variable",
@@ -59345,8 +59970,8 @@
             "value": "$kendo-hover-bg",
             "scope": "default",
             "line": {
-                "start": 81,
-                "end": 81
+                "start": 118,
+                "end": 118
             }
         },
         "group": [
@@ -59361,8 +59986,8 @@
     {
         "description": "The text color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 82,
-            "end": 83
+            "start": 119,
+            "end": 120
         },
         "context": {
             "type": "variable",
@@ -59370,8 +59995,8 @@
             "value": "$kendo-hover-text",
             "scope": "default",
             "line": {
-                "start": 84,
-                "end": 84
+                "start": 121,
+                "end": 121
             }
         },
         "group": [
@@ -59386,8 +60011,8 @@
     {
         "description": "The border color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 85,
-            "end": 86
+            "start": 122,
+            "end": 123
         },
         "context": {
             "type": "variable",
@@ -59395,8 +60020,8 @@
             "value": "$kendo-hover-border",
             "scope": "default",
             "line": {
-                "start": 87,
-                "end": 87
+                "start": 124,
+                "end": 124
             }
         },
         "group": [
@@ -59411,8 +60036,8 @@
     {
         "description": "The gradient of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 88,
-            "end": 89
+            "start": 125,
+            "end": 126
         },
         "context": {
             "type": "variable",
@@ -59420,8 +60045,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 90,
-                "end": 90
+                "start": 127,
+                "end": 127
             }
         },
         "group": [
@@ -59436,8 +60061,8 @@
     {
         "description": "The background color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 92,
-            "end": 93
+            "start": 129,
+            "end": 130
         },
         "context": {
             "type": "variable",
@@ -59445,8 +60070,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 94,
-                "end": 94
+                "start": 131,
+                "end": 131
             }
         },
         "group": [
@@ -59461,8 +60086,8 @@
     {
         "description": "The text color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 95,
-            "end": 96
+            "start": 132,
+            "end": 133
         },
         "context": {
             "type": "variable",
@@ -59470,8 +60095,8 @@
             "value": "$kendo-link-text",
             "scope": "default",
             "line": {
-                "start": 97,
-                "end": 97
+                "start": 134,
+                "end": 134
             }
         },
         "group": [
@@ -59486,8 +60111,8 @@
     {
         "description": "The border color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 98,
-            "end": 99
+            "start": 135,
+            "end": 136
         },
         "context": {
             "type": "variable",
@@ -59495,8 +60120,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 100,
-                "end": 100
+                "start": 137,
+                "end": 137
             }
         },
         "group": [
@@ -59511,8 +60136,8 @@
     {
         "description": "The gradient of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 101,
-            "end": 102
+            "start": 138,
+            "end": 139
         },
         "context": {
             "type": "variable",
@@ -59520,8 +60145,8 @@
             "value": "false",
             "scope": "default",
             "line": {
-                "start": 103,
-                "end": 103
+                "start": 140,
+                "end": 140
             }
         },
         "group": [
@@ -59536,8 +60161,8 @@
     {
         "description": "The font weight of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 104,
-            "end": 105
+            "start": 141,
+            "end": 142
         },
         "context": {
             "type": "variable",
@@ -59545,8 +60170,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 106,
-                "end": 106
+                "start": 143,
+                "end": 143
             }
         },
         "group": [
@@ -59561,8 +60186,8 @@
     {
         "description": "The shadow of the focused TabStrip items.\n",
         "commentRange": {
-            "start": 108,
-            "end": 109
+            "start": 145,
+            "end": 146
         },
         "context": {
             "type": "variable",
@@ -59570,8 +60195,8 @@
             "value": "$kendo-list-item-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 110,
-                "end": 110
+                "start": 147,
+                "end": 147
             }
         },
         "group": [
@@ -59586,8 +60211,8 @@
     {
         "description": "The shadow of the dragged TabStrip items.\n",
         "commentRange": {
-            "start": 112,
-            "end": 113
+            "start": 149,
+            "end": 150
         },
         "context": {
             "type": "variable",
@@ -59595,8 +60220,8 @@
             "value": "k-elevation(3)",
             "scope": "default",
             "line": {
-                "start": 114,
-                "end": 114
+                "start": 151,
+                "end": 151
             }
         },
         "group": [
@@ -59611,8 +60236,8 @@
     {
         "description": "The background color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 116,
-            "end": 117
+            "start": 153,
+            "end": 154
         },
         "context": {
             "type": "variable",
@@ -59620,8 +60245,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 118,
-                "end": 118
+                "start": 155,
+                "end": 155
             }
         },
         "group": [
@@ -59636,8 +60261,8 @@
     {
         "description": "The text color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 119,
-            "end": 120
+            "start": 156,
+            "end": 157
         },
         "context": {
             "type": "variable",
@@ -59645,8 +60270,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 121,
-                "end": 121
+                "start": 158,
+                "end": 158
             }
         },
         "group": [
@@ -59661,8 +60286,8 @@
     {
         "description": "The border color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 122,
-            "end": 123
+            "start": 159,
+            "end": 160
         },
         "context": {
             "type": "variable",
@@ -59670,8 +60295,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 124,
-                "end": 124
+                "start": 161,
+                "end": 161
             }
         },
         "group": [
@@ -59686,8 +60311,8 @@
     {
         "description": "The gradient of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 125,
-            "end": 126
+            "start": 162,
+            "end": 163
         },
         "context": {
             "type": "variable",
@@ -59695,8 +60320,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 127,
-                "end": 127
+                "start": 164,
+                "end": 164
             }
         },
         "group": [
@@ -59711,8 +60336,8 @@
     {
         "description": "The opacity of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 128,
-            "end": 129
+            "start": 165,
+            "end": 166
         },
         "context": {
             "type": "variable",
@@ -59720,8 +60345,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 130,
-                "end": 130
+                "start": 167,
+                "end": 167
             }
         },
         "group": [
@@ -59736,8 +60361,8 @@
     {
         "description": "The filter of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 131,
-            "end": 132
+            "start": 168,
+            "end": 169
         },
         "context": {
             "type": "variable",
@@ -59745,8 +60370,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 133,
-                "end": 133
+                "start": 170,
+                "end": 170
             }
         },
         "group": [
@@ -59761,8 +60386,8 @@
     {
         "description": "The border width of the TabStrip indicator.\n",
         "commentRange": {
-            "start": 135,
-            "end": 136
+            "start": 172,
+            "end": 173
         },
         "context": {
             "type": "variable",
@@ -59770,8 +60395,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 137,
-                "end": 137
+                "start": 174,
+                "end": 174
             }
         },
         "group": [
@@ -59786,8 +60411,8 @@
     {
         "description": "The border color of the TabStrip ripple.\n",
         "commentRange": {
-            "start": 138,
-            "end": 139
+            "start": 175,
+            "end": 176
         },
         "context": {
             "type": "variable",
@@ -59795,8 +60420,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 140,
-                "end": 140
+                "start": 177,
+                "end": 177
             }
         },
         "group": [
@@ -59811,8 +60436,8 @@
     {
         "description": "The horizontal padding of the TabStrip content.\n",
         "commentRange": {
-            "start": 142,
-            "end": 143
+            "start": 179,
+            "end": 180
         },
         "context": {
             "type": "variable",
@@ -59820,8 +60445,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 144,
-                "end": 144
+                "start": 181,
+                "end": 181
             }
         },
         "group": [
@@ -59836,8 +60461,8 @@
     {
         "description": "The vertical padding of the TabStrip content.\n",
         "commentRange": {
-            "start": 145,
-            "end": 146
+            "start": 182,
+            "end": 183
         },
         "context": {
             "type": "variable",
@@ -59845,8 +60470,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 147,
-                "end": 147
+                "start": 184,
+                "end": 184
             }
         },
         "group": [
@@ -59861,8 +60486,8 @@
     {
         "description": "The border width around the TabStrip content.\n",
         "commentRange": {
-            "start": 148,
-            "end": 149
+            "start": 185,
+            "end": 186
         },
         "context": {
             "type": "variable",
@@ -59870,8 +60495,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 150,
-                "end": 150
+                "start": 187,
+                "end": 187
             }
         },
         "group": [
@@ -59886,8 +60511,8 @@
     {
         "description": "The background color of the TabStrip content.\n",
         "commentRange": {
-            "start": 152,
-            "end": 153
+            "start": 189,
+            "end": 190
         },
         "context": {
             "type": "variable",
@@ -59895,8 +60520,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 154,
-                "end": 154
+                "start": 191,
+                "end": 191
             }
         },
         "group": [
@@ -59911,8 +60536,8 @@
     {
         "description": "The text color of the TabStrip content.\n",
         "commentRange": {
-            "start": 155,
-            "end": 156
+            "start": 192,
+            "end": 193
         },
         "context": {
             "type": "variable",
@@ -59920,8 +60545,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 157,
-                "end": 157
+                "start": 194,
+                "end": 194
             }
         },
         "group": [
@@ -59936,8 +60561,8 @@
     {
         "description": "The border color of the TabStrip content.\n",
         "commentRange": {
-            "start": 158,
-            "end": 159
+            "start": 195,
+            "end": 196
         },
         "context": {
             "type": "variable",
@@ -59945,8 +60570,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 160,
-                "end": 160
+                "start": 197,
+                "end": 197
             }
         },
         "group": [
@@ -59961,8 +60586,8 @@
     {
         "description": "The border color of the focused TabStrip content.\n",
         "commentRange": {
-            "start": 161,
-            "end": 162
+            "start": 198,
+            "end": 199
         },
         "context": {
             "type": "variable",
@@ -59970,8 +60595,58 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 163,
-                "end": 163
+                "start": 200,
+                "end": 200
+            }
+        },
+        "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": 202,
+            "end": 203
+        },
+        "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": 204,
+                "end": 204
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The size map of the TabStrip.\n",
+        "commentRange": {
+            "start": 206,
+            "end": 207
+        },
+        "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": 208,
+                "end": 227
             }
         },
         "group": [
@@ -63417,7 +64092,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-padding-x",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 8,
@@ -63467,7 +64142,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-padding-x",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-padding-x",
             "scope": "default",
             "line": {
                 "start": 14,
@@ -63517,7 +64192,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-padding-y",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 21,
@@ -63567,7 +64242,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-padding-y",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-padding-y",
             "scope": "default",
             "line": {
                 "start": 27,
@@ -63617,7 +64292,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-spacing",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 34,
@@ -63667,7 +64342,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-spacing",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-spacing",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -63709,15 +64384,15 @@
         }
     },
     {
-        "description": "The width of the border around the Toolbar.\n",
+        "description": "The height of the Toolbar button separator.\n",
         "commentRange": {
             "start": 45,
             "end": 46
         },
         "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": 47,
@@ -63734,15 +64409,15 @@
         }
     },
     {
-        "description": "The border radius of the Toolbar.\n",
+        "description": "The height of the small Toolbar button separator.\n",
         "commentRange": {
             "start": 48,
             "end": 49
         },
         "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": 50,
@@ -63759,19 +64434,19 @@
         }
     },
     {
-        "description": "The font family of the Toolbar.\n",
+        "description": "The height of the medium Toolbar button separator.\n",
         "commentRange": {
-            "start": 52,
-            "end": 53
+            "start": 51,
+            "end": 52
         },
         "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": 54,
-                "end": 54
+                "start": 53,
+                "end": 53
             }
         },
         "group": [
@@ -63784,19 +64459,19 @@
         }
     },
     {
-        "description": "The font size of the Toolbar.\n",
+        "description": "The height of the large Toolbar button separator.\n",
         "commentRange": {
-            "start": 55,
-            "end": 56
+            "start": 54,
+            "end": 55
         },
         "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": 57,
-                "end": 57
+                "start": 56,
+                "end": 56
             }
         },
         "group": [
@@ -63809,15 +64484,15 @@
         }
     },
     {
-        "description": "The line height of the Toolbar.\n",
+        "description": "The width of the border around the Toolbar.\n",
         "commentRange": {
             "start": 58,
             "end": 59
         },
         "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": 60,
@@ -63834,19 +64509,19 @@
         }
     },
     {
-        "description": "The background color of the Toolbar.\n",
+        "description": "The border radius of the Toolbar.\n",
         "commentRange": {
-            "start": 62,
-            "end": 63
+            "start": 61,
+            "end": 62
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-bg",
-            "value": "if($kendo-enable-color-system, k-color( surface ), $kendo-button-bg)",
+            "name": "kendo-toolbar-border-radius",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 64,
-                "end": 64
+                "start": 63,
+                "end": 63
             }
         },
         "group": [
@@ -63859,15 +64534,15 @@
         }
     },
     {
-        "description": "The text color of the Toolbar.\n",
+        "description": "The font family of the Toolbar.\n",
         "commentRange": {
             "start": 65,
             "end": 66
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-text",
-            "value": "$kendo-button-text",
+            "name": "kendo-toolbar-font-family",
+            "value": "var( --kendo-font-family, inherit )",
             "scope": "default",
             "line": {
                 "start": 67,
@@ -63884,15 +64559,15 @@
         }
     },
     {
-        "description": "The color of the border around the Toolbar.\n",
+        "description": "The font size of the Toolbar.\n",
         "commentRange": {
             "start": 68,
             "end": 69
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-border",
-            "value": "$kendo-button-border",
+            "name": "kendo-toolbar-font-size",
+            "value": "var( --kendo-font-size, inherit )",
             "scope": "default",
             "line": {
                 "start": 70,
@@ -63909,15 +64584,15 @@
         }
     },
     {
-        "description": "The gradient of the Toolbar.\n",
+        "description": "The line height of the Toolbar.\n",
         "commentRange": {
             "start": 71,
             "end": 72
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-gradient",
-            "value": "null",
+            "name": "kendo-toolbar-line-height",
+            "value": "var( --kendo-line-height, normal )",
             "scope": "default",
             "line": {
                 "start": 73,
@@ -63934,19 +64609,19 @@
         }
     },
     {
-        "description": "The box shadow of the Toolbar.\n",
+        "description": "The background color of the Toolbar.\n",
         "commentRange": {
-            "start": 74,
-            "end": 75
+            "start": 75,
+            "end": 76
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-shadow",
-            "value": "null",
+            "name": "kendo-toolbar-bg",
+            "value": "if($kendo-enable-color-system, k-color( surface ), $kendo-button-bg)",
             "scope": "default",
             "line": {
-                "start": 76,
-                "end": 76
+                "start": 77,
+                "end": 77
             }
         },
         "group": [
@@ -63959,14 +64634,14 @@
         }
     },
     {
-        "description": "The text color of the outline Toolbar.\n",
+        "description": "The text color of the Toolbar.\n",
         "commentRange": {
             "start": 78,
             "end": 79
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-outline-text",
+            "name": "kendo-toolbar-text",
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
@@ -63984,15 +64659,15 @@
         }
     },
     {
-        "description": "The color of the border around the outline Toolbar.\n",
+        "description": "The color of the border around the Toolbar.\n",
         "commentRange": {
             "start": 81,
             "end": 82
         },
         "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-button-border",
             "scope": "default",
             "line": {
                 "start": 83,
@@ -64009,14 +64684,14 @@
         }
     },
     {
-        "description": "The gradient of the outline Toolbar.\n",
+        "description": "The gradient of the Toolbar.\n",
         "commentRange": {
             "start": 84,
             "end": 85
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-outline-gradient",
+            "name": "kendo-toolbar-gradient",
             "value": "null",
             "scope": "default",
             "line": {
@@ -64034,14 +64709,14 @@
         }
     },
     {
-        "description": "The box shadow of the outline Toolbar.\n",
+        "description": "The box shadow of the Toolbar.\n",
         "commentRange": {
             "start": 87,
             "end": 88
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-outline-shadow",
+            "name": "kendo-toolbar-shadow",
             "value": "null",
             "scope": "default",
             "line": {
@@ -64059,15 +64734,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": 90,
             "end": 91
         },
         "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": 92,
@@ -64083,11 +64758,161 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The text color of the outline Toolbar.\n",
+        "commentRange": {
+            "start": 95,
+            "end": 96
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-outline-text",
+            "value": "$kendo-button-text",
+            "scope": "default",
+            "line": {
+                "start": 97,
+                "end": 97
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color of the border around the outline Toolbar.\n",
+        "commentRange": {
+            "start": 98,
+            "end": 99
+        },
+        "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))",
+            "scope": "default",
+            "line": {
+                "start": 100,
+                "end": 100
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The gradient of the outline Toolbar.\n",
+        "commentRange": {
+            "start": 101,
+            "end": 102
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-outline-gradient",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 103,
+                "end": 103
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The box shadow of the outline Toolbar.\n",
+        "commentRange": {
+            "start": 104,
+            "end": 105
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-outline-shadow",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 106,
+                "end": 106
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the border around the outline Toolbar.\n",
+        "commentRange": {
+            "start": 107,
+            "end": 108
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-outline-border-width",
+            "value": "$kendo-toolbar-border-width",
+            "scope": "default",
+            "line": {
+                "start": 109,
+                "end": 109
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "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": 94,
-            "end": 95
+            "start": 115,
+            "end": 116
         },
         "context": {
             "type": "variable",
@@ -64095,8 +64920,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 96,
-                "end": 96
+                "start": 117,
+                "end": 117
             }
         },
         "group": [
@@ -64111,8 +64936,8 @@
     {
         "description": "The color of the border around the flat Toolbar.\n",
         "commentRange": {
-            "start": 97,
-            "end": 98
+            "start": 118,
+            "end": 119
         },
         "context": {
             "type": "variable",
@@ -64120,8 +64945,8 @@
             "value": "$kendo-toolbar-border",
             "scope": "default",
             "line": {
-                "start": 99,
-                "end": 99
+                "start": 120,
+                "end": 120
             }
         },
         "group": [
@@ -64136,8 +64961,8 @@
     {
         "description": "The gradient of the flat Toolbar.\n",
         "commentRange": {
-            "start": 100,
-            "end": 101
+            "start": 121,
+            "end": 122
         },
         "context": {
             "type": "variable",
@@ -64145,8 +64970,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 102,
-                "end": 102
+                "start": 123,
+                "end": 123
             }
         },
         "group": [
@@ -64161,8 +64986,8 @@
     {
         "description": "The box shadow of the flat Toolbar.\n",
         "commentRange": {
-            "start": 103,
-            "end": 104
+            "start": 124,
+            "end": 125
         },
         "context": {
             "type": "variable",
@@ -64170,8 +64995,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 105,
-                "end": 105
+                "start": 126,
+                "end": 126
             }
         },
         "group": [
@@ -64186,8 +65011,8 @@
     {
         "description": "Border width of the flat Toolbar.\n",
         "commentRange": {
-            "start": 106,
-            "end": 107
+            "start": 127,
+            "end": 128
         },
         "context": {
             "type": "variable",
@@ -64195,8 +65020,33 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 108,
-                "end": 108
+                "start": 129,
+                "end": 129
+            }
+        },
+        "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": 130,
+            "end": 131
+        },
+        "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": 132,
+                "end": 132
             }
         },
         "group": [
@@ -64211,8 +65061,8 @@
     {
         "description": "The color of the separator border of the Toolbar.\n",
         "commentRange": {
-            "start": 110,
-            "end": 111
+            "start": 135,
+            "end": 136
         },
         "context": {
             "type": "variable",
@@ -64220,8 +65070,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 112,
-                "end": 112
+                "start": 137,
+                "end": 137
             }
         },
         "group": [
@@ -64236,8 +65086,8 @@
     {
         "description": "The width of the input in the Toolbar.\n",
         "commentRange": {
-            "start": 114,
-            "end": 115
+            "start": 139,
+            "end": 140
         },
         "context": {
             "type": "variable",
@@ -64245,8 +65095,8 @@
             "value": "10em",
             "scope": "default",
             "line": {
-                "start": 116,
-                "end": 116
+                "start": 141,
+                "end": 141
             }
         },
         "group": [
@@ -64261,8 +65111,8 @@
     {
         "description": "The box shadow of the focused Toolbar item.\n",
         "commentRange": {
-            "start": 118,
-            "end": 119
+            "start": 143,
+            "end": 144
         },
         "context": {
             "type": "variable",
@@ -64270,8 +65120,8 @@
             "value": "$kendo-button-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 120,
-                "end": 120
+                "start": 145,
+                "end": 145
             }
         },
         "group": [
@@ -64286,17 +65136,17 @@
     {
         "description": "The sizes map for the Toolbar.\n",
         "commentRange": {
-            "start": 122,
-            "end": 123
+            "start": 147,
+            "end": 148
         },
         "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": 124,
-                "end": 140
+                "start": 149,
+                "end": 168
             }
         },
         "group": [