@progress/kendo-theme-bootstrap 10.1.0-dev.5 → 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": 74,
@@ -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": 81,
@@ -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 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></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 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#0d6efd' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 165,
@@ -27292,7 +27292,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-border-width",
-            "value": "k-spacing(1px)",
+            "value": "1px",
             "scope": "default",
             "line": {
                 "start": 15,
@@ -27759,19 +27759,44 @@
         }
     },
     {
-        "description": "The sizes map for the Input components.\n",
+        "description": "The calculated height of the Input.\n",
         "commentRange": {
             "start": 77,
             "end": 78
         },
+        "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": 79,
+                "end": 79
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The sizes map for the Input components.\n",
+        "commentRange": {
+            "start": 84,
+            "end": 85
+        },
         "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": 79,
-                "end": 104
+                "start": 86,
+                "end": 111
             }
         },
         "group": [
@@ -27786,8 +27811,8 @@
     {
         "description": "The background color of the Input components.\n",
         "commentRange": {
-            "start": 106,
-            "end": 107
+            "start": 113,
+            "end": 114
         },
         "context": {
             "type": "variable",
@@ -27795,8 +27820,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 108,
-                "end": 108
+                "start": 115,
+                "end": 115
             }
         },
         "group": [
@@ -27811,8 +27836,8 @@
     {
         "description": "The text color of the Input components.\n",
         "commentRange": {
-            "start": 109,
-            "end": 110
+            "start": 116,
+            "end": 117
         },
         "context": {
             "type": "variable",
@@ -27820,8 +27845,8 @@
             "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-dark)",
             "scope": "default",
             "line": {
-                "start": 111,
-                "end": 111
+                "start": 118,
+                "end": 118
             }
         },
         "group": [
@@ -27836,8 +27861,8 @@
     {
         "description": "The border color of the Input components.\n",
         "commentRange": {
-            "start": 112,
-            "end": 113
+            "start": 119,
+            "end": 120
         },
         "context": {
             "type": "variable",
@@ -27845,8 +27870,8 @@
             "value": "if($kendo-enable-color-system, k-color( border-alt ), #ced4da)",
             "scope": "default",
             "line": {
-                "start": 114,
-                "end": 114
+                "start": 121,
+                "end": 121
             }
         },
         "group": [
@@ -27861,8 +27886,8 @@
     {
         "description": "The shadow of the Input components.\n",
         "commentRange": {
-            "start": 115,
-            "end": 116
+            "start": 122,
+            "end": 123
         },
         "context": {
             "type": "variable",
@@ -27870,8 +27895,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 117,
-                "end": 117
+                "start": 124,
+                "end": 124
             }
         },
         "group": [
@@ -27886,8 +27911,8 @@
     {
         "description": "The background color of the hovered Input components.\n",
         "commentRange": {
-            "start": 119,
-            "end": 120
+            "start": 126,
+            "end": 127
         },
         "context": {
             "type": "variable",
@@ -27895,8 +27920,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 121,
-                "end": 121
+                "start": 128,
+                "end": 128
             }
         },
         "group": [
@@ -27911,8 +27936,8 @@
     {
         "description": "The text color of the hovered Input components.\n",
         "commentRange": {
-            "start": 122,
-            "end": 123
+            "start": 129,
+            "end": 130
         },
         "context": {
             "type": "variable",
@@ -27920,8 +27945,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 124,
-                "end": 124
+                "start": 131,
+                "end": 131
             }
         },
         "group": [
@@ -27936,8 +27961,8 @@
     {
         "description": "The border color of the hovered Input components.\n",
         "commentRange": {
-            "start": 125,
-            "end": 126
+            "start": 132,
+            "end": 133
         },
         "context": {
             "type": "variable",
@@ -27945,8 +27970,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 127,
-                "end": 127
+                "start": 134,
+                "end": 134
             }
         },
         "group": [
@@ -27961,8 +27986,8 @@
     {
         "description": "The shadow of the hovered Input components.\n",
         "commentRange": {
-            "start": 128,
-            "end": 129
+            "start": 135,
+            "end": 136
         },
         "context": {
             "type": "variable",
@@ -27970,8 +27995,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 130,
-                "end": 130
+                "start": 137,
+                "end": 137
             }
         },
         "group": [
@@ -27986,8 +28011,8 @@
     {
         "description": "The background color of the focused Input components.\n",
         "commentRange": {
-            "start": 132,
-            "end": 133
+            "start": 139,
+            "end": 140
         },
         "context": {
             "type": "variable",
@@ -27995,8 +28020,8 @@
             "value": "$kendo-input-bg",
             "scope": "default",
             "line": {
-                "start": 134,
-                "end": 134
+                "start": 141,
+                "end": 141
             }
         },
         "group": [
@@ -28011,8 +28036,8 @@
     {
         "description": "The text color of the focused Input components.\n",
         "commentRange": {
-            "start": 135,
-            "end": 136
+            "start": 142,
+            "end": 143
         },
         "context": {
             "type": "variable",
@@ -28020,8 +28045,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 137,
-                "end": 137
+                "start": 144,
+                "end": 144
             }
         },
         "group": [
@@ -28036,8 +28061,8 @@
     {
         "description": "The border color of the focused Input components.\n",
         "commentRange": {
-            "start": 138,
-            "end": 139
+            "start": 145,
+            "end": 146
         },
         "context": {
             "type": "variable",
@@ -28045,8 +28070,8 @@
             "value": "if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary, 50% ) )",
             "scope": "default",
             "line": {
-                "start": 140,
-                "end": 140
+                "start": 147,
+                "end": 147
             }
         },
         "group": [
@@ -28061,8 +28086,8 @@
     {
         "description": "The shadow of the focused Input components.\n",
         "commentRange": {
-            "start": 141,
-            "end": 142
+            "start": 148,
+            "end": 149
         },
         "context": {
             "type": "variable",
@@ -28070,8 +28095,8 @@
             "value": "0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
-                "start": 143,
-                "end": 143
+                "start": 150,
+                "end": 150
             }
         },
         "group": [
@@ -28086,8 +28111,8 @@
     {
         "description": "The background color of the selected Input components.\n",
         "commentRange": {
-            "start": 145,
-            "end": 146
+            "start": 152,
+            "end": 153
         },
         "context": {
             "type": "variable",
@@ -28095,8 +28120,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 147,
-                "end": 147
+                "start": 154,
+                "end": 154
             }
         },
         "group": [
@@ -28111,8 +28136,8 @@
     {
         "description": "The text color of the selected Input components.\n",
         "commentRange": {
-            "start": 148,
-            "end": 149
+            "start": 155,
+            "end": 156
         },
         "context": {
             "type": "variable",
@@ -28120,8 +28145,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 150,
-                "end": 150
+                "start": 157,
+                "end": 157
             }
         },
         "group": [
@@ -28136,8 +28161,8 @@
     {
         "description": "The background color of the disabled Input components.\n",
         "commentRange": {
-            "start": 152,
-            "end": 153
+            "start": 159,
+            "end": 160
         },
         "context": {
             "type": "variable",
@@ -28145,8 +28170,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 154,
-                "end": 154
+                "start": 161,
+                "end": 161
             }
         },
         "group": [
@@ -28161,8 +28186,8 @@
     {
         "description": "The text color of the disabled Input components.\n",
         "commentRange": {
-            "start": 155,
-            "end": 156
+            "start": 162,
+            "end": 163
         },
         "context": {
             "type": "variable",
@@ -28170,8 +28195,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 157,
-                "end": 157
+                "start": 164,
+                "end": 164
             }
         },
         "group": [
@@ -28186,8 +28211,8 @@
     {
         "description": "The border color of the disabled Input components.\n",
         "commentRange": {
-            "start": 158,
-            "end": 159
+            "start": 165,
+            "end": 166
         },
         "context": {
             "type": "variable",
@@ -28195,8 +28220,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 160,
-                "end": 160
+                "start": 167,
+                "end": 167
             }
         },
         "group": [
@@ -28211,8 +28236,8 @@
     {
         "description": "The gradient of the disabled Input components.\n",
         "commentRange": {
-            "start": 161,
-            "end": 162
+            "start": 168,
+            "end": 169
         },
         "context": {
             "type": "variable",
@@ -28220,8 +28245,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 163,
-                "end": 163
+                "start": 170,
+                "end": 170
             }
         },
         "group": [
@@ -28236,8 +28261,8 @@
     {
         "description": "The shadow of the disabled Input components.\n",
         "commentRange": {
-            "start": 164,
-            "end": 165
+            "start": 171,
+            "end": 172
         },
         "context": {
             "type": "variable",
@@ -28245,8 +28270,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 166,
-                "end": 166
+                "start": 173,
+                "end": 173
             }
         },
         "group": [
@@ -28261,8 +28286,8 @@
     {
         "description": "The background color of the outline Input components.\n",
         "commentRange": {
-            "start": 168,
-            "end": 169
+            "start": 175,
+            "end": 176
         },
         "context": {
             "type": "variable",
@@ -28270,8 +28295,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 170,
-                "end": 170
+                "start": 177,
+                "end": 177
             }
         },
         "group": [
@@ -28286,8 +28311,8 @@
     {
         "description": "The text color of the outline Input components.\n",
         "commentRange": {
-            "start": 171,
-            "end": 172
+            "start": 178,
+            "end": 179
         },
         "context": {
             "type": "variable",
@@ -28295,8 +28320,8 @@
             "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 173,
-                "end": 173
+                "start": 180,
+                "end": 180
             }
         },
         "group": [
@@ -28311,8 +28336,8 @@
     {
         "description": "The border color of the outline Input components.\n",
         "commentRange": {
-            "start": 174,
-            "end": 175
+            "start": 181,
+            "end": 182
         },
         "context": {
             "type": "variable",
@@ -28320,8 +28345,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), color-mix(in srgb, $kendo-base-text 50%, transparent))",
             "scope": "default",
             "line": {
-                "start": 176,
-                "end": 176
+                "start": 183,
+                "end": 183
             }
         },
         "group": [
@@ -28336,8 +28361,8 @@
     {
         "description": "The background color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 177,
-            "end": 178
+            "start": 184,
+            "end": 185
         },
         "context": {
             "type": "variable",
@@ -28345,8 +28370,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 179,
-                "end": 179
+                "start": 186,
+                "end": 186
             }
         },
         "group": [
@@ -28361,8 +28386,8 @@
     {
         "description": "The text color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 180,
-            "end": 181
+            "start": 187,
+            "end": 188
         },
         "context": {
             "type": "variable",
@@ -28370,8 +28395,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 182,
-                "end": 182
+                "start": 189,
+                "end": 189
             }
         },
         "group": [
@@ -28386,8 +28411,8 @@
     {
         "description": "The border color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 183,
-            "end": 184
+            "start": 190,
+            "end": 191
         },
         "context": {
             "type": "variable",
@@ -28395,8 +28420,8 @@
             "value": "$kendo-input-outline-border",
             "scope": "default",
             "line": {
-                "start": 185,
-                "end": 185
+                "start": 192,
+                "end": 192
             }
         },
         "group": [
@@ -28411,8 +28436,8 @@
     {
         "description": "The background color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 187,
-            "end": 188
+            "start": 194,
+            "end": 195
         },
         "context": {
             "type": "variable",
@@ -28420,8 +28445,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 189,
-                "end": 189
+                "start": 196,
+                "end": 196
             }
         },
         "group": [
@@ -28436,8 +28461,8 @@
     {
         "description": "The text color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 190,
-            "end": 191
+            "start": 197,
+            "end": 198
         },
         "context": {
             "type": "variable",
@@ -28445,8 +28470,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 192,
-                "end": 192
+                "start": 199,
+                "end": 199
             }
         },
         "group": [
@@ -28461,8 +28486,8 @@
     {
         "description": "The border color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 193,
-            "end": 194
+            "start": 200,
+            "end": 201
         },
         "context": {
             "type": "variable",
@@ -28470,8 +28495,8 @@
             "value": "$kendo-input-focus-border",
             "scope": "default",
             "line": {
-                "start": 195,
-                "end": 195
+                "start": 202,
+                "end": 202
             }
         },
         "group": [
@@ -28486,8 +28511,8 @@
     {
         "description": "The shadow of the outline focused Input components.\n",
         "commentRange": {
-            "start": 196,
-            "end": 197
+            "start": 203,
+            "end": 204
         },
         "context": {
             "type": "variable",
@@ -28495,8 +28520,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 198,
-                "end": 198
+                "start": 205,
+                "end": 205
             }
         },
         "group": [
@@ -28511,8 +28536,8 @@
     {
         "description": "The background color of the flat Input components.\n",
         "commentRange": {
-            "start": 200,
-            "end": 201
+            "start": 207,
+            "end": 208
         },
         "context": {
             "type": "variable",
@@ -28520,8 +28545,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 202,
-                "end": 202
+                "start": 209,
+                "end": 209
             }
         },
         "group": [
@@ -28536,8 +28561,8 @@
     {
         "description": "The text color of the flat Input components.\n",
         "commentRange": {
-            "start": 203,
-            "end": 204
+            "start": 210,
+            "end": 211
         },
         "context": {
             "type": "variable",
@@ -28545,8 +28570,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 205,
-                "end": 205
+                "start": 212,
+                "end": 212
             }
         },
         "group": [
@@ -28561,8 +28586,8 @@
     {
         "description": "The border color of the flat Input components.\n",
         "commentRange": {
-            "start": 206,
-            "end": 207
+            "start": 213,
+            "end": 214
         },
         "context": {
             "type": "variable",
@@ -28570,8 +28595,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 208,
-                "end": 208
+                "start": 215,
+                "end": 215
             }
         },
         "group": [
@@ -28586,8 +28611,8 @@
     {
         "description": "The background color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 210,
-            "end": 211
+            "start": 217,
+            "end": 218
         },
         "context": {
             "type": "variable",
@@ -28595,8 +28620,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 212,
-                "end": 212
+                "start": 219,
+                "end": 219
             }
         },
         "group": [
@@ -28611,8 +28636,8 @@
     {
         "description": "The text color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 213,
-            "end": 214
+            "start": 220,
+            "end": 221
         },
         "context": {
             "type": "variable",
@@ -28620,8 +28645,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 215,
-                "end": 215
+                "start": 222,
+                "end": 222
             }
         },
         "group": [
@@ -28636,8 +28661,8 @@
     {
         "description": "The border color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 216,
-            "end": 217
+            "start": 223,
+            "end": 224
         },
         "context": {
             "type": "variable",
@@ -28645,8 +28670,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 218,
-                "end": 218
+                "start": 225,
+                "end": 225
             }
         },
         "group": [
@@ -28661,8 +28686,8 @@
     {
         "description": "The background color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 220,
-            "end": 221
+            "start": 227,
+            "end": 228
         },
         "context": {
             "type": "variable",
@@ -28670,8 +28695,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 222,
-                "end": 222
+                "start": 229,
+                "end": 229
             }
         },
         "group": [
@@ -28686,8 +28711,8 @@
     {
         "description": "The text color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 223,
-            "end": 224
+            "start": 230,
+            "end": 231
         },
         "context": {
             "type": "variable",
@@ -28695,8 +28720,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 225,
-                "end": 225
+                "start": 232,
+                "end": 232
             }
         },
         "group": [
@@ -28711,8 +28736,8 @@
     {
         "description": "The border color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 226,
-            "end": 227
+            "start": 233,
+            "end": 234
         },
         "context": {
             "type": "variable",
@@ -28720,8 +28745,8 @@
             "value": "$kendo-input-focus-border",
             "scope": "default",
             "line": {
-                "start": 228,
-                "end": 228
+                "start": 235,
+                "end": 235
             }
         },
         "group": [
@@ -28736,8 +28761,8 @@
     {
         "description": "The shadow of the flat focused Input components.\n",
         "commentRange": {
-            "start": 229,
-            "end": 230
+            "start": 236,
+            "end": 237
         },
         "context": {
             "type": "variable",
@@ -28745,8 +28770,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 231,
-                "end": 231
+                "start": 238,
+                "end": 238
             }
         },
         "group": [
@@ -28761,8 +28786,8 @@
     {
         "description": "The text color of the Input placeholder.\n",
         "commentRange": {
-            "start": 233,
-            "end": 234
+            "start": 240,
+            "end": 241
         },
         "context": {
             "type": "variable",
@@ -28770,8 +28795,8 @@
             "value": "if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text)",
             "scope": "default",
             "line": {
-                "start": 235,
-                "end": 235
+                "start": 242,
+                "end": 242
             }
         },
         "group": [
@@ -28786,8 +28811,8 @@
     {
         "description": "The opacity of the Input placeholder.\n",
         "commentRange": {
-            "start": 236,
-            "end": 237
+            "start": 243,
+            "end": 244
         },
         "context": {
             "type": "variable",
@@ -28795,8 +28820,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 238,
-                "end": 238
+                "start": 245,
+                "end": 245
             }
         },
         "group": [
@@ -28811,8 +28836,8 @@
     {
         "description": "The color of the Input clear value icon.\n",
         "commentRange": {
-            "start": 240,
-            "end": 241
+            "start": 247,
+            "end": 248
         },
         "context": {
             "type": "variable",
@@ -28820,8 +28845,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 242,
-                "end": 242
+                "start": 249,
+                "end": 249
             }
         },
         "group": [
@@ -28836,8 +28861,8 @@
     {
         "description": "The opacity of the Input clear value icon.\n",
         "commentRange": {
-            "start": 243,
-            "end": 244
+            "start": 250,
+            "end": 251
         },
         "context": {
             "type": "variable",
@@ -28845,8 +28870,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 245,
-                "end": 245
+                "start": 252,
+                "end": 252
             }
         },
         "group": [
@@ -28861,8 +28886,8 @@
     {
         "description": "The color of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 246,
-            "end": 247
+            "start": 253,
+            "end": 254
         },
         "context": {
             "type": "variable",
@@ -28870,8 +28895,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 248,
-                "end": 248
+                "start": 255,
+                "end": 255
             }
         },
         "group": [
@@ -28886,8 +28911,8 @@
     {
         "description": "The opacity of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 249,
-            "end": 250
+            "start": 256,
+            "end": 257
         },
         "context": {
             "type": "variable",
@@ -28895,8 +28920,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 251,
-                "end": 251
+                "start": 258,
+                "end": 258
             }
         },
         "group": [
@@ -28911,8 +28936,8 @@
     {
         "description": "The vertical margin of the clear value icon.\n",
         "commentRange": {
-            "start": 253,
-            "end": 254
+            "start": 260,
+            "end": 261
         },
         "context": {
             "type": "variable",
@@ -28920,8 +28945,8 @@
             "value": "k-spacing(0.5)",
             "scope": "default",
             "line": {
-                "start": 255,
-                "end": 255
+                "start": 262,
+                "end": 262
             }
         },
         "group": [
@@ -28936,8 +28961,8 @@
     {
         "description": "The horizontal margin of the clear value icon.\n",
         "commentRange": {
-            "start": 256,
-            "end": 257
+            "start": 263,
+            "end": 264
         },
         "context": {
             "type": "variable",
@@ -28945,8 +28970,8 @@
             "value": "$kendo-input-values-margin-y",
             "scope": "default",
             "line": {
-                "start": 258,
-                "end": 258
+                "start": 265,
+                "end": 265
             }
         },
         "group": [
@@ -28961,8 +28986,8 @@
     {
         "description": "The width of the Input button.\n",
         "commentRange": {
-            "start": 260,
-            "end": 261
+            "start": 267,
+            "end": 268
         },
         "context": {
             "type": "variable",
@@ -28970,8 +28995,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 262,
-                "end": 262
+                "start": 269,
+                "end": 269
             }
         },
         "group": [
@@ -28986,8 +29011,8 @@
     {
         "description": "The border width of the Input button.\n",
         "commentRange": {
-            "start": 263,
-            "end": 264
+            "start": 270,
+            "end": 271
         },
         "context": {
             "type": "variable",
@@ -28995,8 +29020,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 265,
-                "end": 265
+                "start": 272,
+                "end": 272
             }
         },
         "group": [
@@ -29011,8 +29036,8 @@
     {
         "description": "The width of the Input spinner button.\n",
         "commentRange": {
-            "start": 266,
-            "end": 267
+            "start": 273,
+            "end": 274
         },
         "context": {
             "type": "variable",
@@ -29020,8 +29045,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 268,
-                "end": 268
+                "start": 275,
+                "end": 275
             }
         },
         "group": [
@@ -29036,8 +29061,8 @@
     {
         "description": "The icon offset of the Input spinner button.\n",
         "commentRange": {
-            "start": 269,
-            "end": 270
+            "start": 276,
+            "end": 277
         },
         "context": {
             "type": "variable",
@@ -29045,8 +29070,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 271,
-                "end": 271
+                "start": 278,
+                "end": 278
             }
         },
         "group": [
@@ -29061,8 +29086,8 @@
     {
         "description": "The color of the Input separator.\n",
         "commentRange": {
-            "start": 273,
-            "end": 274
+            "start": 280,
+            "end": 281
         },
         "context": {
             "type": "variable",
@@ -29070,8 +29095,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 275,
-                "end": 275
+                "start": 282,
+                "end": 282
             }
         },
         "group": [
@@ -29086,8 +29111,8 @@
     {
         "description": "The opacity of the Input separator.\n",
         "commentRange": {
-            "start": 276,
-            "end": 277
+            "start": 283,
+            "end": 284
         },
         "context": {
             "type": "variable",
@@ -29095,8 +29120,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 278,
-                "end": 278
+                "start": 285,
+                "end": 285
             }
         },
         "group": [
@@ -29111,8 +29136,8 @@
     {
         "description": "The text color of the Input prefix.\n",
         "commentRange": {
-            "start": 280,
-            "end": 281
+            "start": 287,
+            "end": 288
         },
         "context": {
             "type": "variable",
@@ -29120,8 +29145,8 @@
             "value": "if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text)",
             "scope": "default",
             "line": {
-                "start": 282,
-                "end": 282
+                "start": 289,
+                "end": 289
             }
         },
         "group": [
@@ -29136,8 +29161,8 @@
     {
         "description": "The text color of the Input suffix.\n",
         "commentRange": {
-            "start": 283,
-            "end": 284
+            "start": 290,
+            "end": 291
         },
         "context": {
             "type": "variable",
@@ -29145,8 +29170,8 @@
             "value": "if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text)",
             "scope": "default",
             "line": {
-                "start": 285,
-                "end": 285
+                "start": 292,
+                "end": 292
             }
         },
         "group": [
@@ -29161,8 +29186,8 @@
     {
         "description": "The border color of the invalid Input components.\n",
         "commentRange": {
-            "start": 287,
-            "end": 288
+            "start": 294,
+            "end": 295
         },
         "context": {
             "type": "variable",
@@ -29170,8 +29195,8 @@
             "value": "$kendo-invalid-border",
             "scope": "default",
             "line": {
-                "start": 289,
-                "end": 289
+                "start": 296,
+                "end": 296
             }
         },
         "group": [
@@ -29186,8 +29211,8 @@
     {
         "description": "The shadow of the invalid Input components.\n",
         "commentRange": {
-            "start": 290,
-            "end": 291
+            "start": 297,
+            "end": 298
         },
         "context": {
             "type": "variable",
@@ -29195,8 +29220,8 @@
             "value": "$kendo-invalid-shadow",
             "scope": "default",
             "line": {
-                "start": 292,
-                "end": 292
+                "start": 299,
+                "end": 299
             }
         },
         "group": [
@@ -35008,6 +35033,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": {
@@ -40761,8 +41086,8 @@
     {
         "description": "The background color of the Picker components.\n",
         "commentRange": {
-            "start": 294,
-            "end": 295
+            "start": 301,
+            "end": 302
         },
         "context": {
             "type": "variable",
@@ -40770,8 +41095,8 @@
             "value": "$kendo-button-bg",
             "scope": "default",
             "line": {
-                "start": 296,
-                "end": 296
+                "start": 303,
+                "end": 303
             }
         },
         "group": [
@@ -40786,8 +41111,8 @@
     {
         "description": "The text color of the Picker components.\n",
         "commentRange": {
-            "start": 297,
-            "end": 298
+            "start": 304,
+            "end": 305
         },
         "context": {
             "type": "variable",
@@ -40795,8 +41120,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 299,
-                "end": 299
+                "start": 306,
+                "end": 306
             }
         },
         "group": [
@@ -40811,8 +41136,8 @@
     {
         "description": "The border color of the Picker components.\n",
         "commentRange": {
-            "start": 300,
-            "end": 301
+            "start": 307,
+            "end": 308
         },
         "context": {
             "type": "variable",
@@ -40820,8 +41145,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 302,
-                "end": 302
+                "start": 309,
+                "end": 309
             }
         },
         "group": [
@@ -40836,8 +41161,8 @@
     {
         "description": "The gradient of the Picker components.\n",
         "commentRange": {
-            "start": 303,
-            "end": 304
+            "start": 310,
+            "end": 311
         },
         "context": {
             "type": "variable",
@@ -40845,8 +41170,8 @@
             "value": "$kendo-button-gradient",
             "scope": "default",
             "line": {
-                "start": 305,
-                "end": 305
+                "start": 312,
+                "end": 312
             }
         },
         "group": [
@@ -40861,8 +41186,8 @@
     {
         "description": "The shadow of the Picker components.\n",
         "commentRange": {
-            "start": 306,
-            "end": 307
+            "start": 313,
+            "end": 314
         },
         "context": {
             "type": "variable",
@@ -40870,8 +41195,8 @@
             "value": "$kendo-button-shadow",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 315,
+                "end": 315
             }
         },
         "group": [
@@ -40886,8 +41211,8 @@
     {
         "description": "The background color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 310,
-            "end": 311
+            "start": 317,
+            "end": 318
         },
         "context": {
             "type": "variable",
@@ -40895,8 +41220,8 @@
             "value": "$kendo-button-hover-bg",
             "scope": "default",
             "line": {
-                "start": 312,
-                "end": 312
+                "start": 319,
+                "end": 319
             }
         },
         "group": [
@@ -40911,8 +41236,8 @@
     {
         "description": "The text color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 313,
-            "end": 314
+            "start": 320,
+            "end": 321
         },
         "context": {
             "type": "variable",
@@ -40920,8 +41245,8 @@
             "value": "$kendo-button-hover-text",
             "scope": "default",
             "line": {
-                "start": 315,
-                "end": 315
+                "start": 322,
+                "end": 322
             }
         },
         "group": [
@@ -40936,8 +41261,8 @@
     {
         "description": "The border color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 316,
-            "end": 317
+            "start": 323,
+            "end": 324
         },
         "context": {
             "type": "variable",
@@ -40945,8 +41270,8 @@
             "value": "$kendo-button-hover-border",
             "scope": "default",
             "line": {
-                "start": 318,
-                "end": 318
+                "start": 325,
+                "end": 325
             }
         },
         "group": [
@@ -40961,8 +41286,8 @@
     {
         "description": "The gradient of the hovered Picker components.\n",
         "commentRange": {
-            "start": 319,
-            "end": 320
+            "start": 326,
+            "end": 327
         },
         "context": {
             "type": "variable",
@@ -40970,8 +41295,8 @@
             "value": "$kendo-button-hover-gradient",
             "scope": "default",
             "line": {
-                "start": 321,
-                "end": 321
+                "start": 328,
+                "end": 328
             }
         },
         "group": [
@@ -40986,8 +41311,8 @@
     {
         "description": "The shadow of the hovered Picker components.\n",
         "commentRange": {
-            "start": 322,
-            "end": 323
+            "start": 329,
+            "end": 330
         },
         "context": {
             "type": "variable",
@@ -40995,8 +41320,8 @@
             "value": "$kendo-button-hover-shadow",
             "scope": "default",
             "line": {
-                "start": 324,
-                "end": 324
+                "start": 331,
+                "end": 331
             }
         },
         "group": [
@@ -41011,8 +41336,8 @@
     {
         "description": "The background color of the focused Picker components.\n",
         "commentRange": {
-            "start": 326,
-            "end": 327
+            "start": 333,
+            "end": 334
         },
         "context": {
             "type": "variable",
@@ -41020,8 +41345,8 @@
             "value": "$kendo-button-active-bg",
             "scope": "default",
             "line": {
-                "start": 328,
-                "end": 328
+                "start": 335,
+                "end": 335
             }
         },
         "group": [
@@ -41036,8 +41361,8 @@
     {
         "description": "The text color of the focused Picker components.\n",
         "commentRange": {
-            "start": 329,
-            "end": 330
+            "start": 336,
+            "end": 337
         },
         "context": {
             "type": "variable",
@@ -41045,8 +41370,8 @@
             "value": "$kendo-button-focus-text",
             "scope": "default",
             "line": {
-                "start": 331,
-                "end": 331
+                "start": 338,
+                "end": 338
             }
         },
         "group": [
@@ -41061,8 +41386,8 @@
     {
         "description": "The border color of the focused Picker components.\n",
         "commentRange": {
-            "start": 332,
-            "end": 333
+            "start": 339,
+            "end": 340
         },
         "context": {
             "type": "variable",
@@ -41070,8 +41395,8 @@
             "value": "$kendo-button-focus-border",
             "scope": "default",
             "line": {
-                "start": 334,
-                "end": 334
+                "start": 341,
+                "end": 341
             }
         },
         "group": [
@@ -41086,8 +41411,8 @@
     {
         "description": "The gradient of the focused Picker components.\n",
         "commentRange": {
-            "start": 335,
-            "end": 336
+            "start": 342,
+            "end": 343
         },
         "context": {
             "type": "variable",
@@ -41095,8 +41420,8 @@
             "value": "$kendo-button-focus-gradient",
             "scope": "default",
             "line": {
-                "start": 337,
-                "end": 337
+                "start": 344,
+                "end": 344
             }
         },
         "group": [
@@ -41111,8 +41436,8 @@
     {
         "description": "The shadow of the focused Picker components.\n",
         "commentRange": {
-            "start": 338,
-            "end": 339
+            "start": 345,
+            "end": 346
         },
         "context": {
             "type": "variable",
@@ -41120,8 +41445,8 @@
             "value": "$kendo-button-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 340,
-                "end": 340
+                "start": 347,
+                "end": 347
             }
         },
         "group": [
@@ -41136,8 +41461,8 @@
     {
         "description": "The background color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 342,
-            "end": 343
+            "start": 349,
+            "end": 350
         },
         "context": {
             "type": "variable",
@@ -41145,8 +41470,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 344,
-                "end": 344
+                "start": 351,
+                "end": 351
             }
         },
         "group": [
@@ -41161,8 +41486,8 @@
     {
         "description": "The text color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 345,
-            "end": 346
+            "start": 352,
+            "end": 353
         },
         "context": {
             "type": "variable",
@@ -41170,8 +41495,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 347,
-                "end": 347
+                "start": 354,
+                "end": 354
             }
         },
         "group": [
@@ -41186,8 +41511,8 @@
     {
         "description": "The border color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 348,
-            "end": 349
+            "start": 355,
+            "end": 356
         },
         "context": {
             "type": "variable",
@@ -41195,8 +41520,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 350,
-                "end": 350
+                "start": 357,
+                "end": 357
             }
         },
         "group": [
@@ -41211,8 +41536,8 @@
     {
         "description": "The gradient of the disabled Picker components.\n",
         "commentRange": {
-            "start": 351,
-            "end": 352
+            "start": 358,
+            "end": 359
         },
         "context": {
             "type": "variable",
@@ -41220,8 +41545,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 353,
-                "end": 353
+                "start": 360,
+                "end": 360
             }
         },
         "group": [
@@ -41236,8 +41561,8 @@
     {
         "description": "The shadow of the disabled Picker components.\n",
         "commentRange": {
-            "start": 354,
-            "end": 355
+            "start": 361,
+            "end": 362
         },
         "context": {
             "type": "variable",
@@ -41245,8 +41570,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 356,
-                "end": 356
+                "start": 363,
+                "end": 363
             }
         },
         "group": [
@@ -41261,8 +41586,8 @@
     {
         "description": "The background color of the outline Picker components.\n",
         "commentRange": {
-            "start": 358,
-            "end": 359
+            "start": 365,
+            "end": 366
         },
         "context": {
             "type": "variable",
@@ -41270,8 +41595,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 360,
-                "end": 360
+                "start": 367,
+                "end": 367
             }
         },
         "group": [
@@ -41286,8 +41611,8 @@
     {
         "description": "The text color of the outline Picker components.\n",
         "commentRange": {
-            "start": 361,
-            "end": 362
+            "start": 368,
+            "end": 369
         },
         "context": {
             "type": "variable",
@@ -41295,8 +41620,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 363,
-                "end": 363
+                "start": 370,
+                "end": 370
             }
         },
         "group": [
@@ -41311,8 +41636,8 @@
     {
         "description": "The border color of the outline Picker components.\n",
         "commentRange": {
-            "start": 364,
-            "end": 365
+            "start": 371,
+            "end": 372
         },
         "context": {
             "type": "variable",
@@ -41320,8 +41645,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), color-mix(in srgb, $kendo-picker-outline-text 50%, transparent))",
             "scope": "default",
             "line": {
-                "start": 366,
-                "end": 366
+                "start": 373,
+                "end": 373
             }
         },
         "group": [
@@ -41336,8 +41661,8 @@
     {
         "description": "The background color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 367,
-            "end": 368
+            "start": 374,
+            "end": 375
         },
         "context": {
             "type": "variable",
@@ -41345,8 +41670,8 @@
             "value": "$kendo-picker-outline-text",
             "scope": "default",
             "line": {
-                "start": 369,
-                "end": 369
+                "start": 376,
+                "end": 376
             }
         },
         "group": [
@@ -41361,8 +41686,8 @@
     {
         "description": "The text color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 370,
-            "end": 371
+            "start": 377,
+            "end": 378
         },
         "context": {
             "type": "variable",
@@ -41370,8 +41695,8 @@
             "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))",
             "scope": "default",
             "line": {
-                "start": 372,
-                "end": 372
+                "start": 379,
+                "end": 379
             }
         },
         "group": [
@@ -41386,8 +41711,8 @@
     {
         "description": "The border color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 373,
-            "end": 374
+            "start": 380,
+            "end": 381
         },
         "context": {
             "type": "variable",
@@ -41395,8 +41720,8 @@
             "value": "$kendo-picker-outline-hover-bg",
             "scope": "default",
             "line": {
-                "start": 375,
-                "end": 375
+                "start": 382,
+                "end": 382
             }
         },
         "group": [
@@ -41411,8 +41736,8 @@
     {
         "description": "The background color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 377,
-            "end": 378
+            "start": 384,
+            "end": 385
         },
         "context": {
             "type": "variable",
@@ -41420,8 +41745,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 379,
-                "end": 379
+                "start": 386,
+                "end": 386
             }
         },
         "group": [
@@ -41436,8 +41761,8 @@
     {
         "description": "The text color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 380,
-            "end": 381
+            "start": 387,
+            "end": 388
         },
         "context": {
             "type": "variable",
@@ -41445,8 +41770,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 382,
-                "end": 382
+                "start": 389,
+                "end": 389
             }
         },
         "group": [
@@ -41461,8 +41786,8 @@
     {
         "description": "The border color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 383,
-            "end": 384
+            "start": 390,
+            "end": 391
         },
         "context": {
             "type": "variable",
@@ -41470,8 +41795,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 385,
-                "end": 385
+                "start": 392,
+                "end": 392
             }
         },
         "group": [
@@ -41486,8 +41811,8 @@
     {
         "description": "The shadow of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 386,
-            "end": 387
+            "start": 393,
+            "end": 394
         },
         "context": {
             "type": "variable",
@@ -41495,8 +41820,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 388,
-                "end": 388
+                "start": 395,
+                "end": 395
             }
         },
         "group": [
@@ -41511,8 +41836,8 @@
     {
         "description": "The background color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 390,
-            "end": 391
+            "start": 397,
+            "end": 398
         },
         "context": {
             "type": "variable",
@@ -41520,8 +41845,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 392,
-                "end": 392
+                "start": 399,
+                "end": 399
             }
         },
         "group": [
@@ -41536,8 +41861,8 @@
     {
         "description": "The text color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 393,
-            "end": 394
+            "start": 400,
+            "end": 401
         },
         "context": {
             "type": "variable",
@@ -41545,8 +41870,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 395,
-                "end": 395
+                "start": 402,
+                "end": 402
             }
         },
         "group": [
@@ -41561,8 +41886,8 @@
     {
         "description": "The border color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 396,
-            "end": 397
+            "start": 403,
+            "end": 404
         },
         "context": {
             "type": "variable",
@@ -41570,8 +41895,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 398,
-                "end": 398
+                "start": 405,
+                "end": 405
             }
         },
         "group": [
@@ -41586,8 +41911,8 @@
     {
         "description": "The background color of the flat Picker components.\n",
         "commentRange": {
-            "start": 400,
-            "end": 401
+            "start": 407,
+            "end": 408
         },
         "context": {
             "type": "variable",
@@ -41595,8 +41920,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 402,
-                "end": 402
+                "start": 409,
+                "end": 409
             }
         },
         "group": [
@@ -41611,8 +41936,8 @@
     {
         "description": "The text color of the flat Picker components.\n",
         "commentRange": {
-            "start": 403,
-            "end": 404
+            "start": 410,
+            "end": 411
         },
         "context": {
             "type": "variable",
@@ -41620,8 +41945,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 405,
-                "end": 405
+                "start": 412,
+                "end": 412
             }
         },
         "group": [
@@ -41636,8 +41961,8 @@
     {
         "description": "The border color of the flat Picker components.\n",
         "commentRange": {
-            "start": 406,
-            "end": 407
+            "start": 413,
+            "end": 414
         },
         "context": {
             "type": "variable",
@@ -41645,8 +41970,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 408,
-                "end": 408
+                "start": 415,
+                "end": 415
             }
         },
         "group": [
@@ -41661,8 +41986,8 @@
     {
         "description": "The background color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 410,
-            "end": 411
+            "start": 417,
+            "end": 418
         },
         "context": {
             "type": "variable",
@@ -41670,8 +41995,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), color-mix(in srgb, $kendo-button-text 80%, transparent))",
             "scope": "default",
             "line": {
-                "start": 412,
-                "end": 412
+                "start": 419,
+                "end": 419
             }
         },
         "group": [
@@ -41686,8 +42011,8 @@
     {
         "description": "The text color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 413,
-            "end": 414
+            "start": 420,
+            "end": 421
         },
         "context": {
             "type": "variable",
@@ -41695,8 +42020,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 415,
-                "end": 415
+                "start": 422,
+                "end": 422
             }
         },
         "group": [
@@ -41711,8 +42036,8 @@
     {
         "description": "The border color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 416,
-            "end": 417
+            "start": 423,
+            "end": 424
         },
         "context": {
             "type": "variable",
@@ -41720,8 +42045,8 @@
             "value": "$kendo-picker-flat-border",
             "scope": "default",
             "line": {
-                "start": 418,
-                "end": 418
+                "start": 425,
+                "end": 425
             }
         },
         "group": [
@@ -41736,8 +42061,8 @@
     {
         "description": "The background color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 420,
-            "end": 421
+            "start": 427,
+            "end": 428
         },
         "context": {
             "type": "variable",
@@ -41745,8 +42070,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 422,
-                "end": 422
+                "start": 429,
+                "end": 429
             }
         },
         "group": [
@@ -41761,8 +42086,8 @@
     {
         "description": "The text color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 423,
-            "end": 424
+            "start": 430,
+            "end": 431
         },
         "context": {
             "type": "variable",
@@ -41770,8 +42095,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 425,
-                "end": 425
+                "start": 432,
+                "end": 432
             }
         },
         "group": [
@@ -41786,8 +42111,8 @@
     {
         "description": "The border color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 426,
-            "end": 427
+            "start": 433,
+            "end": 434
         },
         "context": {
             "type": "variable",
@@ -41795,8 +42120,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 428,
-                "end": 428
+                "start": 435,
+                "end": 435
             }
         },
         "group": [
@@ -41811,8 +42136,8 @@
     {
         "description": "The shadow of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 429,
-            "end": 430
+            "start": 436,
+            "end": 437
         },
         "context": {
             "type": "variable",
@@ -41820,8 +42145,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 431,
-                "end": 431
+                "start": 438,
+                "end": 438
             }
         },
         "group": [
@@ -41836,8 +42161,8 @@
     {
         "description": "The background color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 433,
-            "end": 434
+            "start": 440,
+            "end": 441
         },
         "context": {
             "type": "variable",
@@ -41845,8 +42170,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 435,
-                "end": 435
+                "start": 442,
+                "end": 442
             }
         },
         "group": [
@@ -41861,8 +42186,8 @@
     {
         "description": "The text color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 436,
-            "end": 437
+            "start": 443,
+            "end": 444
         },
         "context": {
             "type": "variable",
@@ -41870,8 +42195,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 438,
-                "end": 438
+                "start": 445,
+                "end": 445
             }
         },
         "group": [
@@ -41886,8 +42211,8 @@
     {
         "description": "The border color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 439,
-            "end": 440
+            "start": 446,
+            "end": 447
         },
         "context": {
             "type": "variable",
@@ -41895,8 +42220,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 441,
-                "end": 441
+                "start": 448,
+                "end": 448
             }
         },
         "group": [
@@ -46917,7 +47242,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='-4 -4 8 8'><circle r='2' fill='#{$kendo-radio-checked-text}'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#ffffff'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 154,
@@ -58137,15 +58462,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": "var( --kendo-font-size-sm, inherit )",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -58162,15 +58487,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,
@@ -58187,15 +58512,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,
@@ -58211,11 +58536,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": "$kendo-tabstrip-md-font-size",
+            "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": "$kendo-tabstrip-md-line-height",
+            "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",
@@ -58223,8 +58698,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 42,
-                "end": 42
+                "start": 61,
+                "end": 61
             }
         },
         "group": [
@@ -58239,8 +58714,8 @@
     {
         "description": "The text color of the TabStrip.\n",
         "commentRange": {
-            "start": 43,
-            "end": 44
+            "start": 62,
+            "end": 63
         },
         "context": {
             "type": "variable",
@@ -58248,8 +58723,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 45,
-                "end": 45
+                "start": 64,
+                "end": 64
             }
         },
         "group": [
@@ -58264,8 +58739,8 @@
     {
         "description": "The border color of the TabStrip.\n",
         "commentRange": {
-            "start": 46,
-            "end": 47
+            "start": 65,
+            "end": 66
         },
         "context": {
             "type": "variable",
@@ -58273,8 +58748,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 48,
-                "end": 48
+                "start": 67,
+                "end": 67
             }
         },
         "group": [
@@ -58289,8 +58764,8 @@
     {
         "description": "The horizontal padding of the TabStrip items.\n",
         "commentRange": {
-            "start": 50,
-            "end": 51
+            "start": 69,
+            "end": 70
         },
         "context": {
             "type": "variable",
@@ -58298,8 +58773,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 52,
-                "end": 52
+                "start": 71,
+                "end": 71
             }
         },
         "group": [
@@ -58314,8 +58789,8 @@
     {
         "description": "The vertical padding of the TabStrip items.\n",
         "commentRange": {
-            "start": 53,
-            "end": 54
+            "start": 72,
+            "end": 73
         },
         "context": {
             "type": "variable",
@@ -58323,8 +58798,8 @@
             "value": "k-spacing(2)",
             "scope": "default",
             "line": {
-                "start": 55,
-                "end": 55
+                "start": 74,
+                "end": 74
             }
         },
         "group": [
@@ -58339,8 +58814,8 @@
     {
         "description": "The border width around the TabStrip items.\n",
         "commentRange": {
-            "start": 56,
-            "end": 57
+            "start": 75,
+            "end": 76
         },
         "context": {
             "type": "variable",
@@ -58348,8 +58823,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 58,
-                "end": 58
+                "start": 77,
+                "end": 77
             }
         },
         "group": [
@@ -58364,8 +58839,8 @@
     {
         "description": "The border radius of the TabStrip items.\n",
         "commentRange": {
-            "start": 59,
-            "end": 60
+            "start": 78,
+            "end": 79
         },
         "context": {
             "type": "variable",
@@ -58373,8 +58848,8 @@
             "value": "k-spacing(1)",
             "scope": "default",
             "line": {
-                "start": 61,
-                "end": 61
+                "start": 80,
+                "end": 80
             }
         },
         "group": [
@@ -58389,8 +58864,8 @@
     {
         "description": "The gap between the TabStrip items.\n",
         "commentRange": {
-            "start": 62,
-            "end": 63
+            "start": 81,
+            "end": 82
         },
         "context": {
             "type": "variable",
@@ -58398,8 +58873,158 @@
             "value": "k-spacing(0)",
             "scope": "default",
             "line": {
-                "start": 64,
-                "end": 64
+                "start": 83,
+                "end": 83
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the small TabStrip items.\n",
+        "commentRange": {
+            "start": 84,
+            "end": 85
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-sm-item-padding-x",
+            "value": "k-spacing(3)",
+            "scope": "default",
+            "line": {
+                "start": 86,
+                "end": 86
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the small TabStrip items.\n",
+        "commentRange": {
+            "start": 87,
+            "end": 88
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-sm-item-padding-y",
+            "value": "k-spacing(1.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(5)",
+            "scope": "default",
+            "line": {
+                "start": 98,
+                "end": 98
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the large TabStrip items.\n",
+        "commentRange": {
+            "start": 99,
+            "end": 100
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-item-padding-y",
+            "value": "k-spacing(2.5)",
+            "scope": "default",
+            "line": {
+                "start": 101,
+                "end": 101
             }
         },
         "group": [
@@ -58414,8 +59039,8 @@
     {
         "description": " The background color of the TabStrip items.\n",
         "commentRange": {
-            "start": 66,
-            "end": 67
+            "start": 103,
+            "end": 104
         },
         "context": {
             "type": "variable",
@@ -58423,8 +59048,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 68,
-                "end": 68
+                "start": 105,
+                "end": 105
             }
         },
         "group": [
@@ -58439,8 +59064,8 @@
     {
         "description": "The text color of the TabStrip items.\n",
         "commentRange": {
-            "start": 69,
-            "end": 70
+            "start": 106,
+            "end": 107
         },
         "context": {
             "type": "variable",
@@ -58448,8 +59073,8 @@
             "value": "$kendo-link-text",
             "scope": "default",
             "line": {
-                "start": 71,
-                "end": 71
+                "start": 108,
+                "end": 108
             }
         },
         "group": [
@@ -58464,8 +59089,8 @@
     {
         "description": "The border color of the TabStrip items.\n",
         "commentRange": {
-            "start": 72,
-            "end": 73
+            "start": 109,
+            "end": 110
         },
         "context": {
             "type": "variable",
@@ -58473,8 +59098,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 74,
-                "end": 74
+                "start": 111,
+                "end": 111
             }
         },
         "group": [
@@ -58489,8 +59114,8 @@
     {
         "description": "The gradient of the TabStrip items.\n",
         "commentRange": {
-            "start": 75,
-            "end": 76
+            "start": 112,
+            "end": 113
         },
         "context": {
             "type": "variable",
@@ -58498,8 +59123,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 77,
-                "end": 77
+                "start": 114,
+                "end": 114
             }
         },
         "group": [
@@ -58514,8 +59139,8 @@
     {
         "description": "The background color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 79,
-            "end": 80
+            "start": 116,
+            "end": 117
         },
         "context": {
             "type": "variable",
@@ -58523,8 +59148,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 81,
-                "end": 81
+                "start": 118,
+                "end": 118
             }
         },
         "group": [
@@ -58539,8 +59164,8 @@
     {
         "description": "The text color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 82,
-            "end": 83
+            "start": 119,
+            "end": 120
         },
         "context": {
             "type": "variable",
@@ -58548,8 +59173,8 @@
             "value": "$kendo-link-hover-text",
             "scope": "default",
             "line": {
-                "start": 84,
-                "end": 84
+                "start": 121,
+                "end": 121
             }
         },
         "group": [
@@ -58564,8 +59189,8 @@
     {
         "description": "The border color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 85,
-            "end": 86
+            "start": 122,
+            "end": 123
         },
         "context": {
             "type": "variable",
@@ -58573,8 +59198,8 @@
             "value": "if($kendo-enable-color-system, k-color( base-subtle ), #e9ecef)",
             "scope": "default",
             "line": {
-                "start": 87,
-                "end": 87
+                "start": 124,
+                "end": 124
             }
         },
         "group": [
@@ -58589,8 +59214,8 @@
     {
         "description": "The gradient of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 88,
-            "end": 89
+            "start": 125,
+            "end": 126
         },
         "context": {
             "type": "variable",
@@ -58598,8 +59223,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 90,
-                "end": 90
+                "start": 127,
+                "end": 127
             }
         },
         "group": [
@@ -58614,8 +59239,8 @@
     {
         "description": "The background color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 92,
-            "end": 93
+            "start": 129,
+            "end": 130
         },
         "context": {
             "type": "variable",
@@ -58623,8 +59248,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 94,
-                "end": 94
+                "start": 131,
+                "end": 131
             }
         },
         "group": [
@@ -58639,8 +59264,8 @@
     {
         "description": "The text color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 95,
-            "end": 96
+            "start": 132,
+            "end": 133
         },
         "context": {
             "type": "variable",
@@ -58648,8 +59273,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 97,
-                "end": 97
+                "start": 134,
+                "end": 134
             }
         },
         "group": [
@@ -58664,8 +59289,8 @@
     {
         "description": "The border color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 98,
-            "end": 99
+            "start": 135,
+            "end": 136
         },
         "context": {
             "type": "variable",
@@ -58673,8 +59298,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 100,
-                "end": 100
+                "start": 137,
+                "end": 137
             }
         },
         "group": [
@@ -58689,8 +59314,8 @@
     {
         "description": "The gradient of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 101,
-            "end": 102
+            "start": 138,
+            "end": 139
         },
         "context": {
             "type": "variable",
@@ -58698,8 +59323,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 103,
-                "end": 103
+                "start": 140,
+                "end": 140
             }
         },
         "group": [
@@ -58714,8 +59339,8 @@
     {
         "description": "The font weight of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 104,
-            "end": 105
+            "start": 141,
+            "end": 142
         },
         "context": {
             "type": "variable",
@@ -58723,8 +59348,8 @@
             "value": "var( --kendo-font-weight-bold, normal )",
             "scope": "default",
             "line": {
-                "start": 106,
-                "end": 106
+                "start": 143,
+                "end": 143
             }
         },
         "group": [
@@ -58739,8 +59364,8 @@
     {
         "description": "The shadow of the focused TabStrip items.\n",
         "commentRange": {
-            "start": 108,
-            "end": 109
+            "start": 145,
+            "end": 146
         },
         "context": {
             "type": "variable",
@@ -58748,8 +59373,8 @@
             "value": "$kendo-list-item-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 110,
-                "end": 110
+                "start": 147,
+                "end": 147
             }
         },
         "group": [
@@ -58764,8 +59389,8 @@
     {
         "description": "The shadow of the dragged TabStrip items.\n",
         "commentRange": {
-            "start": 112,
-            "end": 113
+            "start": 149,
+            "end": 150
         },
         "context": {
             "type": "variable",
@@ -58773,8 +59398,8 @@
             "value": "k-elevation(3)",
             "scope": "default",
             "line": {
-                "start": 114,
-                "end": 114
+                "start": 151,
+                "end": 151
             }
         },
         "group": [
@@ -58789,8 +59414,8 @@
     {
         "description": "The background color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 116,
-            "end": 117
+            "start": 153,
+            "end": 154
         },
         "context": {
             "type": "variable",
@@ -58798,8 +59423,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 118,
-                "end": 118
+                "start": 155,
+                "end": 155
             }
         },
         "group": [
@@ -58814,8 +59439,8 @@
     {
         "description": "The text color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 119,
-            "end": 120
+            "start": 156,
+            "end": 157
         },
         "context": {
             "type": "variable",
@@ -58823,8 +59448,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 121,
-                "end": 121
+                "start": 158,
+                "end": 158
             }
         },
         "group": [
@@ -58839,8 +59464,8 @@
     {
         "description": "The border color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 122,
-            "end": 123
+            "start": 159,
+            "end": 160
         },
         "context": {
             "type": "variable",
@@ -58848,8 +59473,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 124,
-                "end": 124
+                "start": 161,
+                "end": 161
             }
         },
         "group": [
@@ -58864,8 +59489,8 @@
     {
         "description": "The gradient of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 125,
-            "end": 126
+            "start": 162,
+            "end": 163
         },
         "context": {
             "type": "variable",
@@ -58873,8 +59498,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 127,
-                "end": 127
+                "start": 164,
+                "end": 164
             }
         },
         "group": [
@@ -58889,8 +59514,8 @@
     {
         "description": "The opacity of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 128,
-            "end": 129
+            "start": 165,
+            "end": 166
         },
         "context": {
             "type": "variable",
@@ -58898,8 +59523,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 130,
-                "end": 130
+                "start": 167,
+                "end": 167
             }
         },
         "group": [
@@ -58914,8 +59539,8 @@
     {
         "description": "The filter of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 131,
-            "end": 132
+            "start": 168,
+            "end": 169
         },
         "context": {
             "type": "variable",
@@ -58923,8 +59548,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 133,
-                "end": 133
+                "start": 170,
+                "end": 170
             }
         },
         "group": [
@@ -58939,8 +59564,8 @@
     {
         "description": "The border width of the TabStrip indicator.\n",
         "commentRange": {
-            "start": 135,
-            "end": 136
+            "start": 172,
+            "end": 173
         },
         "context": {
             "type": "variable",
@@ -58948,8 +59573,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 137,
-                "end": 137
+                "start": 174,
+                "end": 174
             }
         },
         "group": [
@@ -58964,8 +59589,8 @@
     {
         "description": "The border color of the TabStrip ripple.\n",
         "commentRange": {
-            "start": 138,
-            "end": 139
+            "start": 175,
+            "end": 176
         },
         "context": {
             "type": "variable",
@@ -58973,8 +59598,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 140,
-                "end": 140
+                "start": 177,
+                "end": 177
             }
         },
         "group": [
@@ -58989,8 +59614,8 @@
     {
         "description": "The horizontal padding of the TabStrip content.\n",
         "commentRange": {
-            "start": 142,
-            "end": 143
+            "start": 179,
+            "end": 180
         },
         "context": {
             "type": "variable",
@@ -58998,8 +59623,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 144,
-                "end": 144
+                "start": 181,
+                "end": 181
             }
         },
         "group": [
@@ -59014,8 +59639,8 @@
     {
         "description": "The vertical padding of the TabStrip content.\n",
         "commentRange": {
-            "start": 145,
-            "end": 146
+            "start": 182,
+            "end": 183
         },
         "context": {
             "type": "variable",
@@ -59023,8 +59648,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 147,
-                "end": 147
+                "start": 184,
+                "end": 184
             }
         },
         "group": [
@@ -59039,8 +59664,8 @@
     {
         "description": "The border width around the TabStrip content.\n",
         "commentRange": {
-            "start": 148,
-            "end": 149
+            "start": 185,
+            "end": 186
         },
         "context": {
             "type": "variable",
@@ -59048,8 +59673,8 @@
             "value": "$kendo-tabstrip-border-width",
             "scope": "default",
             "line": {
-                "start": 150,
-                "end": 150
+                "start": 187,
+                "end": 187
             }
         },
         "group": [
@@ -59064,8 +59689,8 @@
     {
         "description": "The background color of the TabStrip content.\n",
         "commentRange": {
-            "start": 152,
-            "end": 153
+            "start": 189,
+            "end": 190
         },
         "context": {
             "type": "variable",
@@ -59073,8 +59698,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 154,
-                "end": 154
+                "start": 191,
+                "end": 191
             }
         },
         "group": [
@@ -59089,8 +59714,8 @@
     {
         "description": "The text color of the TabStrip content.\n",
         "commentRange": {
-            "start": 155,
-            "end": 156
+            "start": 192,
+            "end": 193
         },
         "context": {
             "type": "variable",
@@ -59098,8 +59723,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 157,
-                "end": 157
+                "start": 194,
+                "end": 194
             }
         },
         "group": [
@@ -59114,8 +59739,8 @@
     {
         "description": "The border color of the TabStrip content.\n",
         "commentRange": {
-            "start": 158,
-            "end": 159
+            "start": 195,
+            "end": 196
         },
         "context": {
             "type": "variable",
@@ -59123,8 +59748,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 160,
-                "end": 160
+                "start": 197,
+                "end": 197
             }
         },
         "group": [
@@ -59139,8 +59764,8 @@
     {
         "description": "The border color of the focused TabStrip content.\n",
         "commentRange": {
-            "start": 161,
-            "end": 162
+            "start": 198,
+            "end": 199
         },
         "context": {
             "type": "variable",
@@ -59148,8 +59773,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": [
@@ -62595,7 +63270,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-padding-x",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 9,
@@ -62645,7 +63320,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-padding-x",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-padding-x",
             "scope": "default",
             "line": {
                 "start": 15,
@@ -62695,7 +63370,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-padding-y",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 22,
@@ -62745,7 +63420,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-padding-y",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-padding-y",
             "scope": "default",
             "line": {
                 "start": 28,
@@ -62795,7 +63470,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-spacing",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
                 "start": 35,
@@ -62845,7 +63520,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-spacing",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-spacing",
             "scope": "default",
             "line": {
                 "start": 41,
@@ -62887,15 +63562,15 @@
         }
     },
     {
-        "description": "The width of the border around the Toolbar.\n",
+        "description": "The height of the Toolbar button separator.\n",
         "commentRange": {
             "start": 46,
             "end": 47
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-border-width",
-            "value": "1px",
+            "name": "kendo-toolbar-separator-height",
+            "value": "$kendo-button-md-calc-size",
             "scope": "default",
             "line": {
                 "start": 48,
@@ -62912,15 +63587,15 @@
         }
     },
     {
-        "description": "The border radius of the Toolbar.\n",
+        "description": "The height of the small Toolbar button separator.\n",
         "commentRange": {
             "start": 49,
             "end": 50
         },
         "context": {
             "type": "variable",
-            "name": "kendo-toolbar-border-radius",
-            "value": "null",
+            "name": "kendo-toolbar-sm-separator-height",
+            "value": "$kendo-button-sm-calc-size",
             "scope": "default",
             "line": {
                 "start": 51,
@@ -62936,11 +63611,111 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The height of the medium Toolbar button separator.\n",
+        "commentRange": {
+            "start": 52,
+            "end": 53
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-md-separator-height",
+            "value": "$kendo-toolbar-separator-height",
+            "scope": "default",
+            "line": {
+                "start": 54,
+                "end": 54
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the large Toolbar button separator.\n",
+        "commentRange": {
+            "start": 55,
+            "end": 56
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-lg-separator-height",
+            "value": "$kendo-button-lg-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 57,
+                "end": 57
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the border around the Toolbar.\n",
+        "commentRange": {
+            "start": 59,
+            "end": 60
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-border-width",
+            "value": "1px",
+            "scope": "default",
+            "line": {
+                "start": 61,
+                "end": 61
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border radius of the Toolbar.\n",
+        "commentRange": {
+            "start": 62,
+            "end": 63
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-border-radius",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 64,
+                "end": 64
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The font family of the Toolbar.\n",
         "commentRange": {
-            "start": 53,
-            "end": 54
+            "start": 66,
+            "end": 67
         },
         "context": {
             "type": "variable",
@@ -62948,8 +63723,8 @@
             "value": "var( --kendo-font-family, inherit )",
             "scope": "default",
             "line": {
-                "start": 55,
-                "end": 55
+                "start": 68,
+                "end": 68
             }
         },
         "group": [
@@ -62964,8 +63739,8 @@
     {
         "description": "The font size of the Toolbar.\n",
         "commentRange": {
-            "start": 56,
-            "end": 57
+            "start": 69,
+            "end": 70
         },
         "context": {
             "type": "variable",
@@ -62973,8 +63748,8 @@
             "value": "var( --kendo-font-size, inherit )",
             "scope": "default",
             "line": {
-                "start": 58,
-                "end": 58
+                "start": 71,
+                "end": 71
             }
         },
         "group": [
@@ -62989,8 +63764,8 @@
     {
         "description": "The line height of the Toolbar.\n",
         "commentRange": {
-            "start": 59,
-            "end": 60
+            "start": 72,
+            "end": 73
         },
         "context": {
             "type": "variable",
@@ -62998,8 +63773,8 @@
             "value": "var( --kendo-line-height, normal )",
             "scope": "default",
             "line": {
-                "start": 61,
-                "end": 61
+                "start": 74,
+                "end": 74
             }
         },
         "group": [
@@ -63014,8 +63789,8 @@
     {
         "description": "The background color of the Toolbar.\n",
         "commentRange": {
-            "start": 63,
-            "end": 64
+            "start": 76,
+            "end": 77
         },
         "context": {
             "type": "variable",
@@ -63023,8 +63798,8 @@
             "value": "$kendo-component-header-bg",
             "scope": "default",
             "line": {
-                "start": 65,
-                "end": 65
+                "start": 78,
+                "end": 78
             }
         },
         "group": [
@@ -63039,8 +63814,8 @@
     {
         "description": "The text color of the Toolbar.\n",
         "commentRange": {
-            "start": 66,
-            "end": 67
+            "start": 79,
+            "end": 80
         },
         "context": {
             "type": "variable",
@@ -63048,8 +63823,8 @@
             "value": "$kendo-component-header-text",
             "scope": "default",
             "line": {
-                "start": 68,
-                "end": 68
+                "start": 81,
+                "end": 81
             }
         },
         "group": [
@@ -63064,8 +63839,8 @@
     {
         "description": "The color of the border around the Toolbar.\n",
         "commentRange": {
-            "start": 69,
-            "end": 70
+            "start": 82,
+            "end": 83
         },
         "context": {
             "type": "variable",
@@ -63073,8 +63848,8 @@
             "value": "$kendo-component-header-border",
             "scope": "default",
             "line": {
-                "start": 71,
-                "end": 71
+                "start": 84,
+                "end": 84
             }
         },
         "group": [
@@ -63089,8 +63864,8 @@
     {
         "description": "The gradient of the Toolbar.\n",
         "commentRange": {
-            "start": 72,
-            "end": 73
+            "start": 85,
+            "end": 86
         },
         "context": {
             "type": "variable",
@@ -63098,8 +63873,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 74,
-                "end": 74
+                "start": 87,
+                "end": 87
             }
         },
         "group": [
@@ -63114,8 +63889,8 @@
     {
         "description": "The box shadow of the Toolbar.\n",
         "commentRange": {
-            "start": 75,
-            "end": 76
+            "start": 88,
+            "end": 89
         },
         "context": {
             "type": "variable",
@@ -63123,8 +63898,33 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 77,
-                "end": 77
+                "start": 90,
+                "end": 90
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The left and right scroll overlay of the Toolbar.\n",
+        "commentRange": {
+            "start": 91,
+            "end": 92
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-scroll-overlay",
+            "value": "$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
+            "scope": "default",
+            "line": {
+                "start": 93,
+                "end": 93
             }
         },
         "group": [
@@ -63139,8 +63939,8 @@
     {
         "description": "The text color of the outline Toolbar.\n",
         "commentRange": {
-            "start": 79,
-            "end": 80
+            "start": 96,
+            "end": 97
         },
         "context": {
             "type": "variable",
@@ -63148,8 +63948,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 81,
-                "end": 81
+                "start": 98,
+                "end": 98
             }
         },
         "group": [
@@ -63164,8 +63964,8 @@
     {
         "description": "The color of the border around the outline Toolbar.\n",
         "commentRange": {
-            "start": 82,
-            "end": 83
+            "start": 99,
+            "end": 100
         },
         "context": {
             "type": "variable",
@@ -63173,8 +63973,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5 ))",
             "scope": "default",
             "line": {
-                "start": 84,
-                "end": 84
+                "start": 101,
+                "end": 101
             }
         },
         "group": [
@@ -63189,8 +63989,8 @@
     {
         "description": "The gradient of the outline Toolbar.\n",
         "commentRange": {
-            "start": 85,
-            "end": 86
+            "start": 102,
+            "end": 103
         },
         "context": {
             "type": "variable",
@@ -63198,8 +63998,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 87,
-                "end": 87
+                "start": 104,
+                "end": 104
             }
         },
         "group": [
@@ -63214,8 +64014,8 @@
     {
         "description": "The box shadow of the outline Toolbar.\n",
         "commentRange": {
-            "start": 88,
-            "end": 89
+            "start": 105,
+            "end": 106
         },
         "context": {
             "type": "variable",
@@ -63223,8 +64023,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 90,
-                "end": 90
+                "start": 107,
+                "end": 107
             }
         },
         "group": [
@@ -63239,8 +64039,8 @@
     {
         "description": "The width of the border around the outline Toolbar.\n",
         "commentRange": {
-            "start": 91,
-            "end": 92
+            "start": 108,
+            "end": 109
         },
         "context": {
             "type": "variable",
@@ -63248,8 +64048,33 @@
             "value": "$kendo-toolbar-border-width",
             "scope": "default",
             "line": {
-                "start": 93,
-                "end": 93
+                "start": 110,
+                "end": 110
+            }
+        },
+        "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": 111,
+            "end": 112
+        },
+        "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": 113,
+                "end": 113
             }
         },
         "group": [
@@ -63264,8 +64089,8 @@
     {
         "description": "The text color of the flat Toolbar.\n",
         "commentRange": {
-            "start": 95,
-            "end": 96
+            "start": 116,
+            "end": 117
         },
         "context": {
             "type": "variable",
@@ -63273,8 +64098,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 97,
-                "end": 97
+                "start": 118,
+                "end": 118
             }
         },
         "group": [
@@ -63289,8 +64114,8 @@
     {
         "description": "The color of the border around the flat Toolbar.\n",
         "commentRange": {
-            "start": 98,
-            "end": 99
+            "start": 119,
+            "end": 120
         },
         "context": {
             "type": "variable",
@@ -63298,8 +64123,8 @@
             "value": "$kendo-toolbar-border",
             "scope": "default",
             "line": {
-                "start": 100,
-                "end": 100
+                "start": 121,
+                "end": 121
             }
         },
         "group": [
@@ -63314,8 +64139,8 @@
     {
         "description": "The gradient of the flat Toolbar.\n",
         "commentRange": {
-            "start": 101,
-            "end": 102
+            "start": 122,
+            "end": 123
         },
         "context": {
             "type": "variable",
@@ -63323,8 +64148,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 103,
-                "end": 103
+                "start": 124,
+                "end": 124
             }
         },
         "group": [
@@ -63339,8 +64164,8 @@
     {
         "description": "The box shadow of the flat Toolbar.\n",
         "commentRange": {
-            "start": 104,
-            "end": 105
+            "start": 125,
+            "end": 126
         },
         "context": {
             "type": "variable",
@@ -63348,8 +64173,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 106,
-                "end": 106
+                "start": 127,
+                "end": 127
             }
         },
         "group": [
@@ -63364,8 +64189,8 @@
     {
         "description": "Border width of the flat Toolbar.\n",
         "commentRange": {
-            "start": 107,
-            "end": 108
+            "start": 128,
+            "end": 129
         },
         "context": {
             "type": "variable",
@@ -63373,8 +64198,33 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 109,
-                "end": 109
+                "start": 130,
+                "end": 130
+            }
+        },
+        "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": 131,
+            "end": 132
+        },
+        "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": 133,
+                "end": 133
             }
         },
         "group": [
@@ -63389,8 +64239,8 @@
     {
         "description": "The color of the separator border of the Toolbar.\n",
         "commentRange": {
-            "start": 111,
-            "end": 112
+            "start": 136,
+            "end": 137
         },
         "context": {
             "type": "variable",
@@ -63398,8 +64248,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 113,
-                "end": 113
+                "start": 138,
+                "end": 138
             }
         },
         "group": [
@@ -63414,8 +64264,8 @@
     {
         "description": "The width of the input in the Toolbar.\n",
         "commentRange": {
-            "start": 115,
-            "end": 116
+            "start": 140,
+            "end": 141
         },
         "context": {
             "type": "variable",
@@ -63423,8 +64273,8 @@
             "value": "10em",
             "scope": "default",
             "line": {
-                "start": 117,
-                "end": 117
+                "start": 142,
+                "end": 142
             }
         },
         "group": [
@@ -63439,8 +64289,8 @@
     {
         "description": "The box shadow of the focused Toolbar item.\n",
         "commentRange": {
-            "start": 119,
-            "end": 120
+            "start": 144,
+            "end": 145
         },
         "context": {
             "type": "variable",
@@ -63448,8 +64298,8 @@
             "value": "0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
-                "start": 121,
-                "end": 121
+                "start": 146,
+                "end": 146
             }
         },
         "group": [
@@ -63464,17 +64314,17 @@
     {
         "description": "The sizes map for the Toolbar.\n",
         "commentRange": {
-            "start": 123,
-            "end": 124
+            "start": 148,
+            "end": 149
         },
         "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": 125,
-                "end": 141
+                "start": 150,
+                "end": 169
             }
         },
         "group": [