@progress/kendo-theme-core 12.2.4-dev.1 → 12.3.0-dev.1

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

@@ -3322,6 +3322,139 @@
             "name": "index.scss"
         }
     },
+    {
+        "description": "The global map of motion easing tokens.\n",
+        "commentRange": {
+            "start": 141,
+            "end": 142
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-easings",
+            "value": "$default-easings",
+            "scope": "default",
+            "line": {
+                "start": 143,
+                "end": 143
+            }
+        },
+        "group": [
+            "motion"
+        ],
+        "access": "public",
+        "file": {
+            "path": "motion/index.scss",
+            "name": "index.scss"
+        }
+    },
+    {
+        "description": "The global map of motion duration tokens.\n",
+        "commentRange": {
+            "start": 146,
+            "end": 147
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-durations",
+            "value": "$default-durations",
+            "scope": "default",
+            "line": {
+                "start": 148,
+                "end": 148
+            }
+        },
+        "group": [
+            "motion"
+        ],
+        "access": "public",
+        "file": {
+            "path": "motion/index.scss",
+            "name": "index.scss"
+        }
+    },
+    {
+        "description": "The global map of motion transition tokens.\n",
+        "commentRange": {
+            "start": 151,
+            "end": 172
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-transitions",
+            "value": "$default-transitions",
+            "scope": "default",
+            "line": {
+                "start": 173,
+                "end": 173
+            }
+        },
+        "group": [
+            "motion"
+        ],
+        "subGroup": [
+            {
+                "name": "fast",
+                "value": [
+                    "instant",
+                    "rapid",
+                    "snappy",
+                    "energetic"
+                ],
+                "description": "Speed and Responsiveness"
+            },
+            {
+                "name": "expressive",
+                "value": [
+                    "emphasis",
+                    "bouncy",
+                    "pulse",
+                    "flip"
+                ],
+                "description": "Personality and Playfulness"
+            },
+            {
+                "name": "calm",
+                "value": [
+                    "subtle",
+                    "gentle",
+                    "settle",
+                    "smooth",
+                    "fluid",
+                    "deliberate"
+                ],
+                "description": "Subtle & Natural"
+            },
+            {
+                "name": "visibility",
+                "value": [
+                    "slide-in",
+                    "slide-out",
+                    "fade-in",
+                    "fade-out",
+                    "enter",
+                    "exit"
+                ],
+                "description": "Visibility & Movement Change"
+            },
+            {
+                "name": "size",
+                "value": [
+                    "scale-in",
+                    "scale-out",
+                    "grow",
+                    "shrink",
+                    "expand",
+                    "collapse"
+                ],
+                "description": "Size & Scale Adjustments"
+            }
+        ],
+        "access": "public",
+        "file": {
+            "path": "motion/index.scss",
+            "name": "index.scss"
+        }
+    },
     {
         "description": "The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.\n",
         "commentRange": {

package/dist/meta/variables.json

@@ -808,10 +808,6 @@
             "fit": "fit-content"
         }
     },
-    "kendo-prefix": {
-        "type": "String",
-        "value": "k-"
-    },
     "default-elevation": {
         "type": "Map",
         "value": "(1: (0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)), 2: (0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)), 3: (0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)), 4: (0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)), 5: (0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12)), 6: (0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12)), 7: (0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12)), 8: (0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)), 9: (0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12)))",
@@ -1172,9 +1168,297 @@
             "full": "9999px"
         }
     },
-    "kendo-transition": {
-        "type": "List",
-        "value": "(color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out)"
+    "default-easings": {
+        "type": "Map",
+        "value": "(linear: cubic-bezier(0, 0, 1, 1), accelerate: cubic-bezier(0.42, 0, 1, 1), decelerate: cubic-bezier(0, 0, 0.58, 1), standard: cubic-bezier(0.42, 0, 0.58, 1), sharp: cubic-bezier(0.75, 0, 0.25, 1), bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55), elastic: cubic-bezier(0.5, -0.5, 0.5, 1.5))",
+        "prettyValue": {
+            "linear": "cubic-bezier(0, 0, 1, 1)",
+            "accelerate": "cubic-bezier(0.42, 0, 1, 1)",
+            "decelerate": "cubic-bezier(0, 0, 0.58, 1)",
+            "standard": "cubic-bezier(0.42, 0, 0.58, 1)",
+            "sharp": "cubic-bezier(0.75, 0, 0.25, 1)",
+            "bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+            "elastic": "cubic-bezier(0.5, -0.5, 0.5, 1.5)"
+        }
+    },
+    "default-durations": {
+        "type": "Map",
+        "value": "(instant: 0ms, immediate: 50ms, brief: 100ms, quick: 150ms, rapid: 200ms, swift: 250ms, speedy: 300ms, brisk: 350ms, prompt: 400ms, timely: 450ms, moderate: 500ms, measured: 550ms, steady: 600ms, leisurely: 700ms, slow: 800ms, languid: 900ms, sluggish: 1000ms)",
+        "prettyValue": {
+            "instant": "0ms",
+            "immediate": "50ms",
+            "brief": "100ms",
+            "quick": "150ms",
+            "rapid": "200ms",
+            "swift": "250ms",
+            "speedy": "300ms",
+            "brisk": "350ms",
+            "prompt": "400ms",
+            "timely": "450ms",
+            "moderate": "500ms",
+            "measured": "550ms",
+            "steady": "600ms",
+            "leisurely": "700ms",
+            "slow": "800ms",
+            "languid": "900ms",
+            "sluggish": "1000ms"
+        }
+    },
+    "default-transitions": {
+        "type": "Map",
+        "value": "(instant: (duration: var(--kendo-duration-instant), easing: var(--kendo-easing-linear)), rapid: (duration: var(--kendo-duration-quick), easing: var(--kendo-easing-decelerate)), snappy: (duration: var(--kendo-duration-swift), easing: var(--kendo-easing-decelerate)), energetic: (duration: var(--kendo-duration-swift), easing: var(--kendo-easing-elastic)), bouncy: (duration: var(--kendo-duration-speedy), easing: var(--kendo-easing-bounce)), subtle: (duration: var(--kendo-duration-brisk), easing: var(--kendo-easing-standard)), gentle: (duration: var(--kendo-duration-prompt), easing: var(--kendo-easing-accelerate)), enter: (duration: var(--kendo-duration-speedy), easing: var(--kendo-easing-decelerate)), exit: (duration: var(--kendo-duration-rapid), easing: var(--kendo-easing-accelerate)), settle: (duration: var(--kendo-duration-brisk), easing: var(--kendo-easing-decelerate)), scale-out: (duration: var(--kendo-duration-quick), easing: var(--kendo-easing-accelerate)), scale-in: (duration: var(--kendo-duration-rapid), easing: var(--kendo-easing-decelerate)), fade-out: (duration: var(--kendo-duration-rapid), easing: var(--kendo-easing-standard)), fade-in: (duration: var(--kendo-duration-swift), easing: var(--kendo-easing-standard)), slide-out: (duration: var(--kendo-duration-swift), easing: var(--kendo-easing-accelerate)), slide-in: (duration: var(--kendo-duration-speedy), easing: var(--kendo-easing-decelerate)), emphasis: (duration: var(--kendo-duration-quick), easing: var(--kendo-easing-sharp)), collapse: (duration: var(--kendo-duration-speedy), easing: var(--kendo-easing-accelerate)), expand: (duration: var(--kendo-duration-prompt), easing: var(--kendo-easing-standard)), shrink: (duration: var(--kendo-duration-brisk), easing: var(--kendo-easing-accelerate)), grow: (duration: var(--kendo-duration-prompt), easing: var(--kendo-easing-standard)), pulse: (duration: var(--kendo-duration-brisk), easing: var(--kendo-easing-standard)), smooth: (duration: var(--kendo-duration-moderate), easing: var(--kendo-easing-standard)), flip: (duration: var(--kendo-duration-measured), easing: var(--kendo-easing-standard)), fluid: (duration: var(--kendo-duration-steady), easing: var(--kendo-easing-standard)), deliberate: (duration: var(--kendo-duration-slow), easing: var(--kendo-easing-standard)))",
+        "prettyValue": {
+            "instant": {
+                "duration": "var(--kendo-duration-instant)",
+                "easing": "var(--kendo-easing-linear)"
+            },
+            "rapid": {
+                "duration": "var(--kendo-duration-quick)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "snappy": {
+                "duration": "var(--kendo-duration-swift)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "energetic": {
+                "duration": "var(--kendo-duration-swift)",
+                "easing": "var(--kendo-easing-elastic)"
+            },
+            "bouncy": {
+                "duration": "var(--kendo-duration-speedy)",
+                "easing": "var(--kendo-easing-bounce)"
+            },
+            "subtle": {
+                "duration": "var(--kendo-duration-brisk)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "gentle": {
+                "duration": "var(--kendo-duration-prompt)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "enter": {
+                "duration": "var(--kendo-duration-speedy)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "exit": {
+                "duration": "var(--kendo-duration-rapid)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "settle": {
+                "duration": "var(--kendo-duration-brisk)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "scale-out": {
+                "duration": "var(--kendo-duration-quick)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "scale-in": {
+                "duration": "var(--kendo-duration-rapid)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "fade-out": {
+                "duration": "var(--kendo-duration-rapid)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "fade-in": {
+                "duration": "var(--kendo-duration-swift)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "slide-out": {
+                "duration": "var(--kendo-duration-swift)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "slide-in": {
+                "duration": "var(--kendo-duration-speedy)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "emphasis": {
+                "duration": "var(--kendo-duration-quick)",
+                "easing": "var(--kendo-easing-sharp)"
+            },
+            "collapse": {
+                "duration": "var(--kendo-duration-speedy)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "expand": {
+                "duration": "var(--kendo-duration-prompt)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "shrink": {
+                "duration": "var(--kendo-duration-brisk)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "grow": {
+                "duration": "var(--kendo-duration-prompt)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "pulse": {
+                "duration": "var(--kendo-duration-brisk)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "smooth": {
+                "duration": "var(--kendo-duration-moderate)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "flip": {
+                "duration": "var(--kendo-duration-measured)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "fluid": {
+                "duration": "var(--kendo-duration-steady)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "deliberate": {
+                "duration": "var(--kendo-duration-slow)",
+                "easing": "var(--kendo-easing-standard)"
+            }
+        }
+    },
+    "kendo-easings": {
+        "type": "Map",
+        "value": "(linear: cubic-bezier(0, 0, 1, 1), accelerate: cubic-bezier(0.42, 0, 1, 1), decelerate: cubic-bezier(0, 0, 0.58, 1), standard: cubic-bezier(0.42, 0, 0.58, 1), sharp: cubic-bezier(0.75, 0, 0.25, 1), bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55), elastic: cubic-bezier(0.5, -0.5, 0.5, 1.5))",
+        "prettyValue": {
+            "linear": "cubic-bezier(0, 0, 1, 1)",
+            "accelerate": "cubic-bezier(0.42, 0, 1, 1)",
+            "decelerate": "cubic-bezier(0, 0, 0.58, 1)",
+            "standard": "cubic-bezier(0.42, 0, 0.58, 1)",
+            "sharp": "cubic-bezier(0.75, 0, 0.25, 1)",
+            "bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+            "elastic": "cubic-bezier(0.5, -0.5, 0.5, 1.5)"
+        }
+    },
+    "kendo-durations": {
+        "type": "Map",
+        "value": "(instant: 0ms, immediate: 50ms, brief: 100ms, quick: 150ms, rapid: 200ms, swift: 250ms, speedy: 300ms, brisk: 350ms, prompt: 400ms, timely: 450ms, moderate: 500ms, measured: 550ms, steady: 600ms, leisurely: 700ms, slow: 800ms, languid: 900ms, sluggish: 1000ms)",
+        "prettyValue": {
+            "instant": "0ms",
+            "immediate": "50ms",
+            "brief": "100ms",
+            "quick": "150ms",
+            "rapid": "200ms",
+            "swift": "250ms",
+            "speedy": "300ms",
+            "brisk": "350ms",
+            "prompt": "400ms",
+            "timely": "450ms",
+            "moderate": "500ms",
+            "measured": "550ms",
+            "steady": "600ms",
+            "leisurely": "700ms",
+            "slow": "800ms",
+            "languid": "900ms",
+            "sluggish": "1000ms"
+        }
+    },
+    "kendo-transitions": {
+        "type": "Map",
+        "value": "(instant: (duration: var(--kendo-duration-instant), easing: var(--kendo-easing-linear)), rapid: (duration: var(--kendo-duration-quick), easing: var(--kendo-easing-decelerate)), snappy: (duration: var(--kendo-duration-swift), easing: var(--kendo-easing-decelerate)), energetic: (duration: var(--kendo-duration-swift), easing: var(--kendo-easing-elastic)), bouncy: (duration: var(--kendo-duration-speedy), easing: var(--kendo-easing-bounce)), subtle: (duration: var(--kendo-duration-brisk), easing: var(--kendo-easing-standard)), gentle: (duration: var(--kendo-duration-prompt), easing: var(--kendo-easing-accelerate)), enter: (duration: var(--kendo-duration-speedy), easing: var(--kendo-easing-decelerate)), exit: (duration: var(--kendo-duration-rapid), easing: var(--kendo-easing-accelerate)), settle: (duration: var(--kendo-duration-brisk), easing: var(--kendo-easing-decelerate)), scale-out: (duration: var(--kendo-duration-quick), easing: var(--kendo-easing-accelerate)), scale-in: (duration: var(--kendo-duration-rapid), easing: var(--kendo-easing-decelerate)), fade-out: (duration: var(--kendo-duration-rapid), easing: var(--kendo-easing-standard)), fade-in: (duration: var(--kendo-duration-swift), easing: var(--kendo-easing-standard)), slide-out: (duration: var(--kendo-duration-swift), easing: var(--kendo-easing-accelerate)), slide-in: (duration: var(--kendo-duration-speedy), easing: var(--kendo-easing-decelerate)), emphasis: (duration: var(--kendo-duration-quick), easing: var(--kendo-easing-sharp)), collapse: (duration: var(--kendo-duration-speedy), easing: var(--kendo-easing-accelerate)), expand: (duration: var(--kendo-duration-prompt), easing: var(--kendo-easing-standard)), shrink: (duration: var(--kendo-duration-brisk), easing: var(--kendo-easing-accelerate)), grow: (duration: var(--kendo-duration-prompt), easing: var(--kendo-easing-standard)), pulse: (duration: var(--kendo-duration-brisk), easing: var(--kendo-easing-standard)), smooth: (duration: var(--kendo-duration-moderate), easing: var(--kendo-easing-standard)), flip: (duration: var(--kendo-duration-measured), easing: var(--kendo-easing-standard)), fluid: (duration: var(--kendo-duration-steady), easing: var(--kendo-easing-standard)), deliberate: (duration: var(--kendo-duration-slow), easing: var(--kendo-easing-standard)))",
+        "prettyValue": {
+            "instant": {
+                "duration": "var(--kendo-duration-instant)",
+                "easing": "var(--kendo-easing-linear)"
+            },
+            "rapid": {
+                "duration": "var(--kendo-duration-quick)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "snappy": {
+                "duration": "var(--kendo-duration-swift)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "energetic": {
+                "duration": "var(--kendo-duration-swift)",
+                "easing": "var(--kendo-easing-elastic)"
+            },
+            "bouncy": {
+                "duration": "var(--kendo-duration-speedy)",
+                "easing": "var(--kendo-easing-bounce)"
+            },
+            "subtle": {
+                "duration": "var(--kendo-duration-brisk)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "gentle": {
+                "duration": "var(--kendo-duration-prompt)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "enter": {
+                "duration": "var(--kendo-duration-speedy)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "exit": {
+                "duration": "var(--kendo-duration-rapid)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "settle": {
+                "duration": "var(--kendo-duration-brisk)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "scale-out": {
+                "duration": "var(--kendo-duration-quick)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "scale-in": {
+                "duration": "var(--kendo-duration-rapid)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "fade-out": {
+                "duration": "var(--kendo-duration-rapid)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "fade-in": {
+                "duration": "var(--kendo-duration-swift)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "slide-out": {
+                "duration": "var(--kendo-duration-swift)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "slide-in": {
+                "duration": "var(--kendo-duration-speedy)",
+                "easing": "var(--kendo-easing-decelerate)"
+            },
+            "emphasis": {
+                "duration": "var(--kendo-duration-quick)",
+                "easing": "var(--kendo-easing-sharp)"
+            },
+            "collapse": {
+                "duration": "var(--kendo-duration-speedy)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "expand": {
+                "duration": "var(--kendo-duration-prompt)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "shrink": {
+                "duration": "var(--kendo-duration-brisk)",
+                "easing": "var(--kendo-easing-accelerate)"
+            },
+            "grow": {
+                "duration": "var(--kendo-duration-prompt)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "pulse": {
+                "duration": "var(--kendo-duration-brisk)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "smooth": {
+                "duration": "var(--kendo-duration-moderate)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "flip": {
+                "duration": "var(--kendo-duration-measured)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "fluid": {
+                "duration": "var(--kendo-duration-steady)",
+                "easing": "var(--kendo-easing-standard)"
+            },
+            "deliberate": {
+                "duration": "var(--kendo-duration-slow)",
+                "easing": "var(--kendo-easing-standard)"
+            }
+        }
     },
     "kendo-z-step": {
         "type": "Number",
@@ -1200,5 +1484,9 @@
             "top": 100000,
             "scroll": 200000
         }
+    },
+    "kendo-prefix": {
+        "type": "String",
+        "value": "k-"
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "12.2.4-dev.1",
+  "version": "12.3.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "fa01827fd3e94ef6e83f67fa2dc9038288d128fc"
+  "gitHead": "689804b100fdba0f1c7ef277340b9a47802b2ccc"
 }

package/scss/components/action-sheet/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-action-sheet--layout-base() {
 
@@ -160,6 +161,7 @@
         display: flex;
         flex-flow: row nowrap;
         outline: none;
+        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
     }
     .k-actionsheet-action {
         margin: 0;

package/scss/components/bottom-navigation/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-bottom-navigation--layout-base() {
@@ -64,6 +65,7 @@
         background-color: inherit;
         border-color: inherit;
         outline: none;
+        transition: background-color k-transition(emphasis), color k-transition(emphasis), font-weight k-transition(emphasis), box-shadow k-transition(emphasis);
 
         &:focus {
             outline: none;

package/scss/components/breadcrumb/_layout.scss

@@ -79,7 +79,7 @@
         align-items: center;
         align-self: stretch;
         overflow: hidden;
-        transition: $kendo-transition;
+        transition: color k-transition(rapid), background-color k-transition(rapid), box-shadow k-transition(rapid);
     }
 
     .k-breadcrumb-link > .k-image,

package/scss/components/bubble/_layout.scss

@@ -1,5 +1,6 @@
 @use "./_variables.scss" as *;
 @use "../../mixins/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 
 @mixin kendo-bubble--layout-base() {
@@ -14,6 +15,7 @@
         display: flex;
         box-sizing: border-box;
         overflow-wrap: break-word;
+        transition: border-color k-transition(rapid), background-color k-transition(rapid), box-shadow k-transition(rapid);
 
         a {
             color: inherit;
@@ -24,6 +26,12 @@
         &.k-hover {
             cursor: pointer;
         }
+
+        &:focus,
+        &:focus-visible,
+        &.k-focus {
+            outline: none;
+        }
     }
 
     .k-bubble-expandable {

package/scss/components/bubble/_theme.scss

@@ -25,7 +25,6 @@
         &.k-focus {
             @include fill( $bg: $kendo-bubble-focus-bg, $border: $kendo-bubble-focus-border );
             @include focus-indicator( $kendo-bubble-focus-shadow, true, true );
-            outline: none;
         }
 
         &:hover,

package/scss/components/button/_layout.scss

@@ -4,6 +4,7 @@
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-button--layout-base() {
 
@@ -274,7 +275,7 @@
         inset-block-start: calc( -1 * $kendo-button-border-width );
         inset-block-end: calc( -1 * $kendo-button-border-width );
         z-index: k-z-index("base");
-        transition: opacity .2s ease-in-out;
+        transition: opacity k-transition(rapid);
     }
 
 
@@ -339,7 +340,7 @@
             inset-block-start: calc( -1 * $kendo-button-border-width );
             inset-block-end: calc( -1 * $kendo-button-border-width );
             z-index: k-z-index("base");
-            transition: opacity .2s ease-in-out;
+            transition: opacity k-transition(rapid);
         }
     }
 

package/scss/components/calendar/_layout.scss

@@ -3,6 +3,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-calendar--layout-base() {
@@ -115,6 +116,7 @@
         white-space: normal;
         position: relative;
         overflow: hidden;
+        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
     }
 
 

package/scss/components/chart-wizard/_layout.scss

@@ -1,4 +1,5 @@
 @use "./variables.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-chart-wizard--layout-base() {
     // Chart wizard
@@ -7,12 +8,14 @@
             display: flex;
             align-items: center;
             gap: $kendo-chart-wizard-icon-text-gap;
+            transition: color k-transition(rapid);
         }
 
         .k-icon-background-area {
             display: flex;
             padding: $kendo-chart-wizard-icon-area-padding;
             border-radius: $kendo-chart-wizard-icon-area-border-radius;
+            transition: box-shadow k-transition(rapid);
         }
     }