@progress/kendo-theme-material 5.8.2-dev.4 → 5.8.2-dev.6

package/dist/all.scss

@@ -4,6 +4,724 @@
 // #region @import "index.scss"; -> packages/material/scss/index.scss
 // #region @import "core/_index.scss"; -> packages/material/scss/core/_index.scss
 // #region @import "functions/_index.scss"; -> packages/material/scss/core/functions/_index.scss
+$wcag-min-contrast-ratio: 4.5 !default;
+
+// #region @import "~@progress/kendo-theme-core/scss/functions/index.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
+// #region @import "_color.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
+@function k-color-red( $color ) {
+    @return red( $color );
+}
+
+@function k-color-green( $color ) {
+    @return green( $color );
+}
+
+@function k-color-blue( $color ) {
+    @return blue( $color );
+}
+
+@function k-color-mix( $color1, $color2, $weight: 50% ) {
+    @return mix( $color1, $color2, $weight );
+}
+
+@function k-color-darken( $color, $amount) {
+    @return darken( $color, $amount );
+}
+
+@function k-color-lighten( $color, $amount) {
+    @return lighten( $color, $amount );
+}
+
+// #endregion
+// #region @import "_color-contrast.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/_color-contrast.import.scss
+// Adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
+// Adapted from https://github.com/twbs/bootstrap/commit/03908ea37a55eaa44c12ce5694dddc1630c980b3
+
+//  Precomputed linear color channel values, for use in contrast calculations.
+//  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+//
+//  Algorithm, for c in 0 to 255:
+//  f(c) {
+//    c = c / 255;
+//    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+//  }
+//
+//  This lookup table is needed since there is no `pow` in SASS.
+// stylelint-disable-next-line scss/dollar-variable-default
+$linear-channel-values: (
+    0
+    .0003035269835488375
+    .000607053967097675
+    .0009105809506465125
+    .00121410793419535
+    .0015176349177441874
+    .001821161901293025
+    .0021246888848418626
+    .0024282158683907
+    .0027317428519395373
+    .003035269835488375
+    .003346535763899161
+    .003676507324047436
+    .004024717018496307
+    .004391442037410293
+    .004776953480693729
+    .005181516702338386
+    .005605391624202723
+    .006048833022857054
+    .006512090792594475
+    .006995410187265387
+    .007499032043226175
+    .008023192985384994
+    .008568125618069307
+    .009134058702220787
+    .00972121732023785
+    .010329823029626936
+    .010960094006488246
+    .011612245179743885
+    .012286488356915872
+    .012983032342173012
+    .013702083047289686
+    .014443843596092545
+    .01520851442291271
+    .01599629336550963
+    .016807375752887384
+    .017641954488384078
+    .018500220128379697
+    .019382360956935723
+    .0202885630566524
+    .021219010376003555
+    .022173884793387385
+    .02315336617811041
+    .024157632448504756
+    .02518685962736163
+    .026241221894849898
+    .027320891639074894
+    .028426039504420793
+    .0295568344378088
+    .030713443732993635
+    .03189603307301153
+    .033104766570885055
+    .03433980680868217
+    .03560131487502034
+    .03688945040110004
+    .0382043715953465
+    .03954623527673284
+    .04091519690685319
+    .042311410620809675
+    .043735029256973465
+    .04518620438567554
+    .046665086336880095
+    .04817182422688942
+    .04970656598412723
+    .05126945837404324
+    .052860647023180246
+    .05448027644244237
+    .05612849004960009
+    .05780543019106723
+    .0595112381629812
+    .06124605423161761
+    .06301001765316767
+    .06480326669290577
+    .06662593864377289
+    .06847816984440017
+    .07036009569659588
+    .07227185068231748
+    .07421356838014963
+    .07618538148130785
+    .07818742180518633
+    .08021982031446832
+    .0822827071298148
+    .08437621154414882
+    .08650046203654976
+    .08865558628577294
+    .09084171118340768
+    .09305896284668745
+    .0953074666309647
+    .09758734714186246
+    .09989872824711389
+    .10224173308810132
+    .10461648409110419
+    .10702310297826761
+    .10946171077829933
+    .1119324278369056
+    .11443537382697373
+    .11697066775851084
+    .11953842798834562
+    .12213877222960187
+    .12477181756095049
+    .12743768043564743
+    .1301364766903643
+    .13286832155381798
+    .13563332965520566
+    .13843161503245183
+    .14126329114027164
+    .14412847085805777
+    .14702726649759498
+    .14995978981060856
+    .15292615199615017
+    .1559264637078274
+    .1589608350608804
+    .162029375639111
+    .1651321945016676
+    .16826940018969075
+    .1714411007328226
+    .17464740365558504
+    .17788841598362912
+    .18116424424986022
+    .184474994500441
+    .18782077230067787
+    .19120168274079138
+    .1946178304415758
+    .19806931955994886
+    .20155625379439707
+    .20507873639031693
+    .20863687014525575
+    .21223075741405523
+    .21586050011389926
+    .2195261997292692
+    .2232279573168085
+    .22696587351009836
+    .23074004852434915
+    .23455058216100522
+    .238397573812271
+    .24228112246555486
+    .24620132670783548
+    .25015828472995344
+    .25415209433082675
+    .2581828529215958
+    .26225065752969623
+    .26635560480286247
+    .2704977910130658
+    .27467731206038465
+    .2788942634768104
+    .2831487404299921
+    .2874408377269175
+    .29177064981753587
+    .2961382707983211
+    .3005437944157765
+    .3049873140698863
+    .30946892281750854
+    .31398871337571754
+    .31854677812509186
+    .32314320911295075
+    .3277780980565422
+    .33245153634617935
+    .33716361504833037
+    .3419144249086609
+    .3467040563550296
+    .35153259950043936
+    .3564001441459435
+    .3613067797835095
+    .3662525955988395
+    .3712376804741491
+    .3762621229909065
+    .38132601143253014
+    .386429433787049
+    .39157247774972326
+    .39675523072562685
+    .4019777798321958
+    .4072402119017367
+    .41254261348390375
+    .4178850708481375
+    .4232676699860717
+    .4286904966139066
+    .43415363617474895
+    .4396571738409188
+    .44520119451622786
+    .45078578283822346
+    .45641102318040466
+    .4620769996544071
+    .467783796112159
+    .47353149614800955
+    .4793201831008268
+    .4851499400560704
+    .4910208498478356
+    .4969329950608704
+    .5028864580325687
+    .5088813208549338
+    .5149176653765214
+    .5209955732043543
+    .5271151257058131
+    .5332764040105052
+    .5394794890121072
+    .5457244613701866
+    .5520114015120001
+    .5583403896342679
+    .5647115057049292
+    .5711248294648731
+    .5775804404296506
+    .5840784178911641
+    .5906188409193369
+    .5972017883637634
+    .6038273388553378
+    .6104955708078648
+    .6172065624196511
+    .6239603916750761
+    .6307571363461468
+    .6375968739940326
+    .6444796819705821
+    .6514056374198242
+    .6583748172794485
+    .665387298282272
+    .6724431569576875
+    .6795424696330938
+    .6866853124353135
+    .6938717612919899
+    .7011018919329731
+    .7083757798916868
+    .7156935005064807
+    .7230551289219693
+    .7304607400903537
+    .7379104087727308
+    .7454042095403874
+    .7529422167760779
+    .7605245046752924
+    .768151147247507
+    .7758222183174236
+    .7835377915261935
+    .7912979403326302
+    .799102738014409
+    .8069522576692516
+    .8148465722161012
+    .8227857543962835
+    .8307698767746546
+    .83879901174074
+    .846873231509858
+    .8549926081242338
+    .8631572134541023
+    .8713671191987972
+    .8796223968878317
+    .8879231178819663
+    .8962693533742664
+    .9046611743911496
+    .9130986517934192
+    .9215818562772946
+    .9301108583754237
+    .938685728457888
+    .9473065367331999
+    .9559733532492861
+    .9646862478944651
+    .9734452903984125
+    .9822505503331171
+    .9911020971138298
+    1
+);
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
+// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+$wcag-min-contrast-ratio: 7 !default;
+$wcag-dark: black !default;
+$wcag-light: white !default;
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function k-color-luminance( $color ) {
+    $red: k-list-nth( $linear-channel-values, k-color-red( $color ) + 1 );
+    $green: k-list-nth( $linear-channel-values, k-color-green( $color ) + 1 );
+    $blue: k-list-nth( $linear-channel-values, k-color-blue( $color ) + 1 );
+
+    @return .2126 * $red + .7152 * $green + .0722 * $blue;
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function k-color-contrast-ratio( $background, $foreground ) {
+    // sass-lint:disable-block variable-name-format
+    $backLum: k-color-luminance( $background ) + .05;
+    $foreLum: k-color-luminance( $foreground ) + .05;
+
+    @return k-math-div( k-math-max( $backLum, $foreLum ), k-math-min( $backLum, $foreLum ) );
+}
+
+@function k-is-dark( $color ) {
+    @return if( k-color-luminance( $color ) < .5, true, false );
+}
+@function k-is-light( $color ) {
+    @return if( k-color-luminance( $color ) < .5, false, true );
+}
+
+
+// Contrast functions
+@function k-contrast-color( $background, $dark: $wcag-dark, $light: $wcag-light, $min-ratio: $wcag-min-contrast-ratio ) {
+    $foregrounds: $light, $dark, #ffffff, #000000;
+    $max-ratio: 0;
+    $max-ratio-color: null;
+
+    @each $color in $foregrounds {
+        $contrast-ratio: k-color-contrast-ratio( $background, $color );
+
+        @if ( $contrast-ratio > $min-ratio ) {
+            @return $color;
+        } @else if ( $contrast-ratio > $max-ratio ) {
+            $max-ratio: $contrast-ratio;
+            $max-ratio-color: $color;
+        }
+    }
+
+    // sass-lint:disable-block no-warn
+    @warn "Found no color leading to #{$min-ratio}:1 contrast ratio against #{$background}...";
+
+    @return $max-ratio-color;
+}
+
+// #endregion
+// #region @import "_color-manipulation.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/_color-manipulation.import.scss
+/// Set a specific jump point for requesting color jumps
+/// @group color-system
+/// @access private
+$kendo-color-level-step: 8% !default;
+
+@function k-color-level( $color, $level: 0 ) {
+
+    @if ( $level == 0 ) or ( $level == 0% ) {
+        @return $color;
+    }
+
+    $base: if( $level < 0, #ffffff, #000000 );
+    $level: k-math-abs( $level );
+
+
+    @if ( k-math-unit($level) == "%" ) {
+        @return k-color-mix( $base, $color, $level );
+    }
+
+    @return k-color-mix( $base, $color, $level * $kendo-color-level-step );
+}
+
+@function k-color-tint( $color, $level: 1 ) {
+    @return k-color-level( $color, -$level );
+}
+@function k-color-shade( $color, $level: 1 ) {
+    @return k-color-level( $color, $level );
+}
+
+@function k-try-shade( $color, $level: 1 ) {
+    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+
+    @if $dark-theme {
+        @return k-color-tint( $color, $level );
+    }
+
+    @return k-color-shade( $color, $level );
+}
+@function k-try-tint( $color, $level: 1 ) {
+    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+
+    @if $dark-theme {
+        @return k-color-shade( $color, $level );
+    }
+
+    @return k-color-tint( $color, $level );
+}
+
+
+@function k-try-darken( $color, $amount ) {
+    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+
+    @if $dark-theme {
+        @return k-color-lighten( $color, $amount );
+    }
+    @return k-color-darken( $color, $amount );
+}
+
+@function k-try-lighten( $color, $amount ) {
+    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+
+    @if $dark-theme {
+        @return k-color-darken( $color, $amount );
+    }
+    @return k-color-lighten( $color, $amount );
+}
+
+// TODO: Remove this function or rethink the logic
+@function k-true-mix( $color1, $color2, $weight: 50% ) {
+    @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
+}
+
+// #endregion
+// #region @import "_list.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/_list.import.scss
+@function k-list-append( $list, $val, $separator: auto ) {
+    @return append( $list, $val, $separator );
+}
+
+@function k-list-index( $list, $value ) {
+    @return index( $list, $value );
+}
+
+@function k-list-is-bracketed( $list ) {
+    @return is-bracketed( $list );
+}
+
+@function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
+    @return join( $list1, $list2, $separator, $bracketed );
+}
+
+@function k-list-length( $list ) {
+    @return length( $list );
+}
+
+@function k-list-nth( $list, $n ) {
+    @return nth( $list, $n );
+}
+
+@function k-list-separator( $list ) {
+    @return list-separator( $list );
+}
+
+@function k-list-set-nth( $list, $n, $value ) {
+    @return set-nth( $list, $n, $value );
+}
+
+@function k-list-zip( $lists... ) {
+    @return zip( $lists... );
+}
+
+// #endregion
+// #region @import "_math.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/_math.import.scss
+@function k-math-abs( $number ) {
+    @return abs( $number );
+}
+
+@function k-math-ceil( $number ) {
+    @return ceil( $number );
+}
+
+@function k-math-clamp( $value, $min, $max ) {
+    @return k-math-max( $min, k-math-min( $max, $value ) );
+}
+
+@function k-math-compatible( $a, $b ) {
+    @return comparable( $a, $b );
+}
+
+@function k-math-div( $a, $b )  {
+    @return ( $a / $b );
+}
+
+@function k-math-is-unitless( $number ) {
+    @return unitless( $number );
+}
+
+@function k-math-max( $a, $b ) {
+    @return max( $a, $b );
+}
+
+@function k-math-min( $a, $b ) {
+    @return min( $a, $b );
+}
+
+@function k-math-mod( $a, $b ) {
+    @return ( $a % $b );
+}
+
+@function k-math-mul( $a, $b ) {
+    @return ( $a * $b );
+}
+
+@function k-math-percentage( $number ) {
+    @return ( $number * 100% );
+}
+
+@function k-math-pow( $x, $n ) {
+    $ret: 1;
+
+    @if ( $n == 0 ) {
+        @return $ret;
+    }
+
+    @if ( $n > 0 ) {
+        @for $i from 1 through $n {
+            $ret: $ret * $x;
+        }
+        @return $ret;
+    }
+
+    @for $i from $n to 0 {
+        $ret: k-math-div( $ret, $x );
+    }
+    @return $ret;
+
+}
+
+@function k-math-random( $limit: null ) {
+    @if ( $limit == null ) {
+        @return random();
+    }
+
+    @return random( $limit );
+}
+
+@function k-math-round( $number, $precision: 0 ) {
+
+    @if ( $precision == 0 ) {
+        @return round( $number );
+    }
+
+    $pow: k-math-pow( 10, $precision );
+
+    @return k-math-div( round( $number * $pow ), $pow );
+}
+
+@function k-math-unit( $number ) {
+    @return unit( $number );
+}
+
+@function k-math-strip-unit($number) {
+    @if ( k-meta-type-of( $number ) == "number" ) and not k-math-is-unitless( $number ) {
+        @return k-math-div( $number, 1 * k-math-unit( $number) );
+    }
+
+    @return $number;
+}
+
+// #endregion
+// #region @import "_map.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/_map.import.scss
+@function k-map-get( $map, $keys... ) {
+    @each $key in $keys {
+        $map: map-get( $map, $key );
+    }
+    @return $map;
+}
+
+@function k-map-has-key( $map, $key ) {
+    @return map-has-key( $map, $key );
+}
+
+@function k-map-keys( $map ) {
+    @return map-keys( $map );
+}
+
+@function k-map-merge( $map, $args... ) {
+    @each $arg in $args {
+        $map: map-merge( $map, $arg );
+    }
+    @return $map;
+}
+
+@function k-map-remove( $map, $keys... ) {
+    @return map-remove( $map, $keys... );
+}
+
+@function k-map-set( $map, $key, $value ) {
+    @return k-map-merge( $map, ( $key: $value ) );
+}
+
+@function k-map-values( $map ) {
+    @return map-values( $map );
+}
+
+// #endregion
+// #region @import "_meta.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/_meta.import.scss
+// Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
+
+@function k-meta-type-of( $value ) {
+    @return type-of( $value );
+}
+
+@function k-meta-is-number( $value ) {
+    @return k-meta-type-of( $value ) == "number";
+}
+
+@function k-meta-is-integer( $value ) {
+    @return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
+}
+
+@function k-meta-is-time( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-duration( $value ) {
+    @return k-meta-is-time( $value );
+}
+
+@function k-meta-is-angle( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "deg" "rad" "grad" "turn", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-frequency( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-relative-length( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-absolute-length( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "cm" "mm" "in" "px" "pt" "pc", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-percentage( $value ) {
+    @return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
+}
+
+@function k-meta-is-length( $value ) {
+    @return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
+}
+
+@function k-meta-is-resolution( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-position( $value ) {
+    @return k-meta-is-length( $value ) or k-meta-is-percentage( $value ) or k-string-index( "top" "right" "bottom" "left" "center", $value ) != null;
+}
+
+// #endregion
+// #region @import "_string.import.scss"; -> packages/material/node_modules/@progress/kendo-theme-core/scss/functions/_string.import.scss
+@function k-string-index( $string, $substring ) {
+    @return str-index( $string, $substring );
+}
+
+@function k-string-insert( $string, $insert, $index ) {
+    @return str-insert( $string, $insert, $index );
+}
+
+@function k-string-length( $string ) {
+    @return str-length( $string );
+}
+
+@function k-string-quote( $string ) {
+    @return quote( $string );
+}
+
+// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function k-string-replace( $string, $search, $replace: "" ) {
+    $index: k-string-index( $string, $search );
+
+    @if $index {
+        @return k-string-slice( $string, 1, $index - 1 ) + $replace + k-string-replace( k-string-slice( $string, $index + k-string-length( $search ) ), $search, $replace );
+    }
+
+    @return $string;
+}
+
+@function k-string-slice( $string, $start-at, $end-at: -1 ) {
+    @return str-slice( $string, $start-at, $end-at );
+}
+
+@function k-string-to-lower-case( $string ) {
+    @return to-lower-case( $string );
+}
+
+@function k-string-to-upper-case( $string ) {
+    @return to-upper-case( $string );
+}
+
+@function k-string-unique-id() {
+    @return unique-id();
+}
+
+@function k-string-unquote( $string ) {
+    @return unquote( $string );
+}
+
+// #endregion
+
+// #endregion
 // #region @import "~@progress/kendo-theme-default/scss/core/functions/_index.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/core/functions/_index.scss
 // #region @import "_math.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/core/functions/_math.scss
 @function decimal-round($float, $digits: 2) {
@@ -872,8 +1590,8 @@ $_kendo-imported-modules: ();
 // Infinite calendar and timepicker
 @mixin hide-scrollbar($dir: "right", $max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
-    $scrollbar-size: 17px;
-    $margin: -$max-scrollbar - $scrollbar-size;
+    $scrollbar-size: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+    $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
 
     padding-right: $max-scrollbar;
     padding-left: $max-scrollbar;
@@ -914,16 +1632,16 @@ $gradient-white-to-transparent: white, rgba( white, 0); // stylelint-disable-lin
 
 $gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
 
-$dark-primary-text: rgba($black, .87) !default;
-$dark-secondary-text: rgba($black, .54) !default;
-$dark-disabled-text: rgba($black, .38) !default;
-$dark-dividers: rgba($black, .12) !default;
-$dark-focused: rgba($black, .12) !default;
+$dark-primary-text: rgba( black, .87 ) !default;
+$dark-secondary-text: rgba( black, .54 ) !default;
+$dark-disabled-text: rgba( black, .38 ) !default;
+$dark-dividers: rgba( black, .12 ) !default;
+$dark-focused: rgba( black, .12 ) !default;
 $light-primary-text: $white !default;
-$light-secondary-text: rgba($white, .7) !default;
-$light-disabled-text: rgba($white, .5) !default;
-$light-dividers: rgba($white, .12) !default;
-$light-focused: rgba($white, .12) !default;
+$light-secondary-text: rgba( white, .7 ) !default;
+$light-disabled-text: rgba( white, .5 ) !default;
+$light-dividers: rgba( white, .12 ) !default;
+$light-focused: rgba( white, .12 ) !default;
 
 $palettes: (
 
@@ -968,7 +1686,7 @@ $palettes: (
         200: #f48fb1,
         300: #f06292,
         400: #ec407a,
-        500: #e51a5f, // originaly it was #e91e63, but changed for better contrast against white
+        500: #e51a5f, // originally it was #e91e63, but changed for better contrast against white
         600: #d81b60,
         700: #c2185b,
         800: #ad1457,
@@ -1576,15 +2294,15 @@ $palettes: (
 ) !default;
 
 @function get-base-palette($name) {
-    @return map-get( $palettes, $name );
+    @return k-map-get( $palettes, $name );
 }
 
 @function get-base-hue($palette, $hue) {
-    @return map-get( get-base-palette( $palette ), $hue );
+    @return k-map-get( get-base-palette( $palette ), $hue );
 }
 
 @function get-base-contrast($palette, $hue) {
-    @return map-get( map-get( get-base-palette($palette), contrast), $hue );
+    @return k-map-get( k-map-get( get-base-palette($palette), contrast), $hue );
 }
 
 $material-dark-complimentary: (
@@ -1597,8 +2315,8 @@ $material-dark-complimentary: (
     component-text: $light-primary-text,
     component-border: $light-dividers,
     base-bg: get-base-hue( gray, 900 ),
-    hover-bg: rgba( $white, .08 ),
-    focus-bg: rgba( $white, .24 ),
+    hover-bg: rgba( white, .08 ),
+    focus-bg: rgba( white, .24 ),
     elevation: $black
 ) !default;
 
@@ -1613,15 +2331,15 @@ $material-light-complimentary: (
     component-text: $dark-primary-text,
     component-border: $dark-dividers,
     base-bg: $white,
-    hover-bg: rgba( $black, .04 ),
-    focus-bg: rgba( $black, .12 ),
+    hover-bg: rgba( black, .04 ),
+    focus-bg: rgba( black, .12 ),
     elevation: $black
 ) !default;
 
 
 // For a given hue in a palette, return the contrast color from the map of contrast palettes.
 @function material-contrast($palette, $hue) {
-    @return map-get(map-get($palette, contrast), $hue);
+    @return k-map-get(k-map-get($palette, contrast), $hue);
 }
 
 // Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
@@ -1649,11 +2367,11 @@ $material-light-complimentary: (
     }
 
     // stylelint-disable-next-line function-comma-newline-after
-    $result: map-merge($base-palette, (
+    $result: k-map-merge($base-palette, (
         // sass-lint:disable-block indentation
-        main: map-get($base-palette, $main),
-        lighter: map-get($base-palette, $lighter),
-        darker: map-get($base-palette, $darker),
+        main: k-map-get($base-palette, $main),
+        lighter: k-map-get($base-palette, $lighter),
+        darker: k-map-get($base-palette, $darker),
         main-contrast: material-contrast($base-palette, $main),
         lighter-contrast: material-contrast($base-palette, $lighter),
         darker-contrast: material-contrast($base-palette, $darker)
@@ -1662,7 +2380,7 @@ $material-light-complimentary: (
     // For each hue in the palette, add a "-contrast" color to the map.
     @each $hue, $color in $base-palette {
         // stylelint-disable-next-line function-comma-newline-after
-        $result: map-merge($result, (
+        $result: k-map-merge($result, (
             // sass-lint:disable-block indentation
             "#{$hue}-contrast": material-contrast($base-palette, $hue)
         ));
@@ -1687,16 +2405,16 @@ $material-light-complimentary: (
         @return material-color($palette, main, $hue);
     }
 
-    $color: map-get($palette, $hue);
+    $color: k-map-get($palette, $hue);
     $opacity: if($opacity == null, opacity($color), $opacity);
 
-    @return rgba($color, $opacity);
+    @return rgba( $color, $opacity );
 }
 
 // Creates a container object for a light theme to be given to individual component theme mixins.
 @function material-theme($primary, $secondary, $theme-type, $warn: material-palette(red)) {
     $complimentary: if($theme-type == dark, $material-dark-complimentary, $material-light-complimentary);
-    @return map-merge((
+    @return k-map-merge((
         // sass-lint:disable-block indentation
         primary: $primary,
         secondary: $secondary,
@@ -1787,7 +2505,7 @@ $theme: material-theme(
 
 /// Color of shadows
 /// @group shadows
-$elevation: map-get( $theme, elevation ) !default;
+$elevation: k-map-get( $theme, elevation ) !default;
 /// Shadow for switch.
 /// Equivalent to material elevation 1.
 /// @group shadows
@@ -1813,7 +2531,7 @@ $box-shadow-depth-5: 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rg
 // Icons
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
-$icon-spacing: map-get( $spacing, 2 ) !default;
+$icon-spacing: k-map-get( $spacing, 2 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL
@@ -1824,14 +2542,14 @@ $icon-font-url: null !default;
 // Metrics
 $padding-x: 16px !default;
 $padding-y: 4px !default;
-$padding-x-sm: $padding-x / 2 !default;
-$padding-y-sm: $padding-y / 2 !default;
+$padding-x-sm: k-math-div( $padding-x, 2 ) !default;
+$padding-y-sm: k-math-div( $padding-y, 2 ) !default;
 $padding-x-lg: $padding-x * 1.5 !default;
 $padding-y-lg: $padding-y * 1.5 !default;
 
 /// Border radius for all components.
-$kendo-border-radius: map-get( $spacing, 1 ) !default;
-$kendo-border-radius-sm: $kendo-border-radius / 2 !default;
+$kendo-border-radius: k-map-get( $spacing, 1 ) !default;
+$kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
 $kendo-border-radius-md: $kendo-border-radius !default;
 $kendo-border-radius-lg: $kendo-border-radius * 1.5 !default;
 
@@ -1855,7 +2573,7 @@ $zindex-window: 2 !default;
 
 
 // Color settings
-$dark-theme: map-get($theme, is-dark) !default;
+$dark-theme: k-map-get( $theme, is-dark ) !default;
 
 
 // Theme colors
@@ -1903,29 +2621,29 @@ $tertiary-contrast: material-color($tertiary-palette, main-contrast) !default;
 /// @group color-system
 /// @type Color
 $info: #0058e9 !default;
-$info-lighter: tint( $info, 2 ) !default;
-$info-darker: shade( $info, 2 ) !default;
+$info-lighter: k-color-tint( $info, 2 ) !default;
+$info-darker: k-color-shade( $info, 2 ) !default;
 
 /// The color for success messages and states.
 /// @group color-system
 /// @type Color
 $success: #37b400 !default;
-$success-lighter: tint( $success, 2 ) !default;
-$success-darker: shade( $success, 2 ) !default;
+$success-lighter: k-color-tint( $success, 2 ) !default;
+$success-darker: k-color-shade( $success, 2 ) !default;
 
 /// The color for warning messages and states.
 /// @group color-system
 /// @type Color
 $warning: #ffc000 !default;
-$warning-lighter: tint( $warning, 2 ) !default;
-$warning-darker: shade( $warning, 2 ) !default;
+$warning-lighter: k-color-tint( $warning, 2 ) !default;
+$warning-darker: k-color-shade( $warning, 2 ) !default;
 
 /// The color for error messages and states.
 /// @group color-system
 /// @type Color
 $error: #f31700 !default;
-$error-lighter: tint( $error, 2 ) !default;
-$error-darker: shade( $error, 2 ) !default;
+$error-lighter: k-color-tint( $error, 2 ) !default;
+$error-darker: k-color-shade( $error, 2 ) !default;
 
 /// The dark color of the theme.
 /// @group color-system
@@ -1963,15 +2681,15 @@ $cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, ce
 
 
 // Root styles
-$body-bg: map-get($theme, body-bg) !default;
-$body-text: map-get($theme, body-text) !default;
+$body-bg: k-map-get( $theme, body-bg ) !default;
+$body-text: k-map-get( $theme, body-text ) !default;
 
-$subtle-text: map-get($theme, subtle-text) !default;
-$disabled-text: map-get($theme, disabled-text) !default;
+$subtle-text: k-map-get( $theme, subtle-text ) !default;
+$disabled-text: k-map-get( $theme, disabled-text ) !default;
 
 $app-bg: $body-bg !default;
 $app-text: $body-text !default;
-$app-border: map-get($theme, component-border) !default;
+$app-border: k-map-get( $theme, component-border ) !default;
 
 
 // Components
@@ -1980,32 +2698,32 @@ $app-border: map-get($theme, component-border) !default;
 /// Background color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
-$component-bg: map-get($theme, component-bg) !default;
+$component-bg: k-map-get( $theme, component-bg ) !default;
 /// Text color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
 /// @group component
-$component-text: map-get($theme, component-text) !default;
+$component-text: k-map-get( $theme, component-text ) !default;
 /// Border color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
 /// @group component
-$component-border: map-get($theme, component-border) !default;
+$component-border: k-map-get( $theme, component-border ) !default;
 
 
 /// The background of the components' chrome area.
-$base-bg: map-get( $theme, base-bg ) !default;
+$base-bg: k-map-get( $theme, base-bg ) !default;
 /// The text color of the components' chrome area.
-$base-text: map-get($theme, component-text) !default;
+$base-text: k-map-get( $theme, component-text ) !default;
 /// The border of the components' chrome area.
-$base-border: rgba( if($theme-type == dark, white, black), .08 ) !default;
+$base-border: rgba( if( $theme-type == dark, white, black ), .08 ) !default;
 /// The gradient background of the components' chrome area.
 $base-gradient: null !default;
 
 /// The background of hovered items.
-$hovered-bg: map-get( $theme, hover-bg ) !default;
+$hovered-bg: k-map-get( $theme, hover-bg ) !default;
 /// The text color of hovered items.
 $hovered-text: $base-text !default;
 /// The border color of hovered items.
-$hovered-border: rgba( if($theme-type == dark, white, black), .15 ) !default;
+$hovered-border: rgba( if( $theme-type == dark, white, black ), .15 ) !default;
 /// The gradient background of hovered items.
 $hovered-gradient: null !default;
 
@@ -2018,7 +2736,7 @@ $selected-border: rgba( if($theme-type == dark, white, black), .1 ) !default;
 /// The gradient background of selected items.
 $selected-gradient: null !default;
 
-$selected-hover-bg: try-shade( $selected-bg, .5 ) !default;
+$selected-hover-bg: k-try-shade( $selected-bg, .5 ) !default;
 $selected-hover-text: $selected-text !default;
 $selected-hover-border: rgba( if($theme-type == dark, white, black), .1 ) !default;
 $selected-hover-gradient: null !default;
@@ -2094,7 +2812,7 @@ $node-selected-gradient: null !default;
 // Placeholder
 $placeholder-line-width: 100% !default;
 $placeholder-line-height: 10px !default;
-$placeholder-bg: rgba(0, 0, 0, .1) !default;
+$placeholder-bg: rgba( black, .1 ) !default;
 
 
 // Loading
@@ -2136,7 +2854,7 @@ $drag-clue-font-size: $font-size !default;
 $drag-clue-font-family: $font-family !default;
 $drag-clue-line-height: ( 20 / 14 ) !default;
 
-$drag-clue-bg: try-shade( $body-bg ) !default;
+$drag-clue-bg: k-try-shade( $body-bg ) !default;
 $drag-clue-text: $body-text !default;
 $drag-clue-border: null !default;
 $drag-clue-gradient: null !default;
@@ -5687,6 +6405,27 @@ $utils-border-radius: (
         }
     }
 
+    // Icon wrap
+    .k-icon-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+        align-self: flex-start;
+        vertical-align: middle;
+        position: relative;
+
+        &::before {
+            content: "\200b";
+            width: 0;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
     .k-icon {
         width: 1em;
         height: 1em;
@@ -6942,25 +7681,25 @@ $kendo-list-font-size-lg: $font-size-lg !default;
 /// Line height of the list component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
-$kendo-list-line-height-sm: (20 / 14) !default;
-$kendo-list-line-height-md: (20 / 14) !default;
+$kendo-list-line-height-sm: k-math-div( 20, 14 ) !default;
+$kendo-list-line-height-md: k-math-div( 20, 14 ) !default;
 $kendo-list-line-height-lg: 1.5 !default;
 
 /// Horizontal padding of list header, if no size is set.
 /// @group list
 $kendo-list-header-padding-x: null !default;
-$kendo-list-header-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-header-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-list-header-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-list-header-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-base: k-map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list header, if no size is set.
 /// @group list
 $kendo-list-header-padding-y: null !default;
-$kendo-list-header-padding-y-base: map-get( $spacing, 2 ) !default;
-$kendo-list-header-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-list-header-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-list-header-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-y-base: k-map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-list-header-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 
 /// Border width of list header.
 /// @group list
@@ -6987,18 +7726,18 @@ $kendo-list-header-font-weight: null !default;
 /// Horizontal padding of list items, when no size is set.
 /// @group list
 $kendo-list-item-padding-x: null !default;
-$kendo-list-item-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-item-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-list-item-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-list-item-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-base: k-map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list
 $kendo-list-item-padding-y: null !default;
-$kendo-list-item-padding-y-base: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-list-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-y-base: k-map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 
 /// Font size of list items, if no size is set.
 /// @group list
@@ -7017,18 +7756,18 @@ $kendo-list-item-line-height-lg: null !default;
 /// Horizontal padding of list group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-x: null !default;
-$kendo-list-group-item-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-group-item-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-list-group-item-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-list-group-item-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-base: k-map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-y: null !default;
-$kendo-list-group-item-padding-y-base: map-get( $spacing, 2 ) !default;
-$kendo-list-group-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-list-group-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-list-group-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-list-group-item-padding-y-base: k-map-get( $spacing, 2 ) !default;
+$kendo-list-group-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-list-group-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-list-group-item-padding-y-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
 
 /// Border width of list group items.
 /// @group list
@@ -7193,19 +7932,19 @@ $kendo-checkbox-border-width: 2px !default;
 // Checkbox sizes
 $kendo-checkbox-sizes: (
     sm: (
-        size: map-get( $spacing, 3 ),
-        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 3 ) * 3
+        size: k-map-get( $spacing, 3 ),
+        glyph-size: ( k-map-get( $spacing, 3 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 3 ) * 3
     ),
     md: (
-        size: map-get( $spacing, 4 ),
-        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 4 ) * 3
+        size: k-map-get( $spacing, 4 ),
+        glyph-size: ( k-map-get( $spacing, 4 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 4 ) * 3
     ),
     lg: (
-        size: map-get( $spacing, 5 ),
-        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 5 ) * 3
+        size: k-map-get( $spacing, 5 ),
+        glyph-size: ( k-map-get( $spacing, 5 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 5 ) * 3
     )
 ) !default;
 
@@ -7234,7 +7973,7 @@ $kendo-checkbox-hover-border: null !default;
 $kendo-checkbox-checked-bg: $primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: k-contrast-color( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -7270,7 +8009,7 @@ $kendo-checkbox-disabled-bg: null !default;
 $kendo-checkbox-disabled-text: null !default;
 /// Border color of disabled checkbox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
+$kendo-checkbox-disabled-border: k-try-shade( $component-bg, 4 ) !default;
 
 
 /// Background color of disabled and checked checkbox.
@@ -7278,7 +8017,7 @@ $kendo-checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
 /// Color of disabled and checked checkbox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: contrast-wcag( $kendo-checkbox-disabled-checked-bg ) !default;
+$kendo-checkbox-disabled-checked-text: k-contrast-color( $kendo-checkbox-disabled-checked-bg ) !default;
 /// Border color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
@@ -7323,14 +8062,14 @@ $kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xm
 
 /// The horizontal margin of the checkbox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+$kendo-checkbox-label-margin-x: k-map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: k-map-get( $spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
@@ -7702,6 +8441,17 @@ $kendo-checkbox-ripple-opacity: .2 !default;
 // #region @import "~@progress/kendo-theme-default/scss/list/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/list/_layout.scss
 @include exports( "list/layout" ) {
 
+    // List container
+    .k-list-container {
+        display: flex;
+        flex-flow: column nowrap;
+
+        > .k-list {
+            flex: 1;
+            height: 100%;
+        }
+    }
+
     // List
     .k-list {
         margin: 0;
@@ -7882,7 +8632,7 @@ $kendo-checkbox-ripple-opacity: .2 !default;
         position: relative;
         padding: $padding-x;
         box-sizing: border-box;
-        flex: 0 0 auto;
+        flex: none;
     }
 
 
@@ -8074,14 +8824,14 @@ $listgroup-border-width: 1px !default;
 $listgroup-border-radius: $kendo-border-radius-md !default;
 
 $listgroup-font-size: $font-size !default;
-$listgroup-line-height: (20 / 14) !default;
+$listgroup-line-height: k-math-div( 20, 14 ) !default;
 
 $listgroup-bg: $component-bg !default;
 $listgroup-text: $component-text !default;
 $listgroup-border: $component-border !default;
 
-$listgroup-item-padding-x: map-get( $spacing, 2 ) !default;
-$listgroup-item-padding-y: map-get( $spacing, 2 ) !default;
+$listgroup-item-padding-x: k-map-get( $spacing, 2 ) !default;
+$listgroup-item-padding-y: k-map-get( $spacing, 2 ) !default;
 $listgroup-item-border-width: 1px !default;
 
 // #endregion
@@ -8393,8 +9143,8 @@ $popup-border-radius: null !default;
 $popup-font-size: $font-size !default;
 $popup-line-height: $line-height !default;
 
-$popup-content-padding-x: map-get( $spacing, 2 ) !default;
-$popup-content-padding-y: map-get( $spacing, 2 ) !default;
+$popup-content-padding-x: k-map-get( $spacing, 2 ) !default;
+$popup-content-padding-y: k-map-get( $spacing, 2 ) !default;
 
 $popup-bg: $component-bg !default;
 $popup-text: $component-text !default;
@@ -8631,17 +9381,17 @@ $kendo-badge-border-radius: $kendo-border-radius-md !default;
 
 /// Horizontal padding of the badge.
 /// @group badge
-$kendo-badge-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-x-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
-$kendo-badge-padding-x-md: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-badge-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-x-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin ) !default;
+$kendo-badge-padding-x-md: k-map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-x-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
 
 /// Vertical padding of the badge.
 /// @group badge
-$kendo-badge-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
-$kendo-badge-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-badge-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-y-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin )  !default;
+$kendo-badge-padding-y-md: k-map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-y-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
 
 /// Font sizes of the badge.
 /// @group badge
@@ -8894,10 +9644,10 @@ $kendo-button-border-radius: null !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$kendo-button-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x: k-map-get( $spacing, 4 ) !default;
 /// Vertical padding of the button.
 /// @group button
-$kendo-button-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y: k-map-get( $spacing, 2 ) !default;
 /// Font family of the button.
 /// @group button
 $kendo-button-font-family: $font-family !default;
@@ -8908,18 +9658,18 @@ $kendo-button-font-size: $font-size-md !default;
 /// @group button
 $kendo-button-line-height: ( 20 / 14 ) !default;
 
-$kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
 $kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-line-height-sm: ( 20 / 14 ) !default;
 
-$kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-md: k-map-get( $spacing, 2 ) !default;
 $kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: ( 20 / 14 ) !default;
 
-$kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-button-padding-x-lg: k-map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
 $kendo-button-font-size-lg: $font-size-md !default;
 $kendo-button-line-height-lg: ( 20 / 14 ) !default;
 
@@ -8954,7 +9704,7 @@ $kendo-button-sizes: (
 
 /// Theme colors map for the button.
 /// @group button
-$kendo-button-theme-colors: map-merge(
+$kendo-button-theme-colors: k-map-merge(
     $kendo-theme-colors,
     ( "base": $base-bg )
 ) !default;
@@ -9041,7 +9791,7 @@ $kendo-button-focus-shadow: null !default;
 
 /// The base background color of disabled button.
 /// @group button
-$kendo-button-disabled-bg: try-shade( $body-bg, 12% ) !default;
+$kendo-button-disabled-bg: k-try-shade( $body-bg, 12% ) !default;
 /// The base text color of disabled button.
 /// @group button
 $kendo-button-disabled-text: $disabled-text !default;
@@ -9057,7 +9807,7 @@ $kendo-button-disabled-shadow: none !default;
 
 // Solid button
 $kendo-solid-button-gradient: null !default;
-$kendo-solid-button-shade-function: "try-shade" !default;
+$kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: null !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
 $kendo-solid-button-shade-border-amount: 0 !default;
@@ -9806,7 +10556,7 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-solid-#{$name} {
             @include box-shadow( $kendo-button-shadow );
-            color: if( $name == "base", $kendo-button-text, contrast-wcag( $color ) );
+            color: if( $name == "base", $kendo-button-text, k-contrast-color( $color ) );
             background-color: if( $name == "base", $kendo-button-bg, $color );
             border-color: if( $name == "base", $kendo-button-bg, $color );
 
@@ -9932,10 +10682,10 @@ $kendo-input-border-radius: null !default;
 
 /// Horizontal padding of input components.
 /// @group input
-$kendo-input-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-input-padding-x: k-map-get( $spacing, 4 ) !default;
 /// Vertical padding of input components.
 /// @group input
-$kendo-input-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y: k-map-get( $spacing, 2 ) !default;
 ///Font family of input components.
 /// @group input
 $kendo-input-font-family: $font-family !default;
@@ -9946,18 +10696,18 @@ $kendo-input-font-size: $font-size-lg !default;
 /// @group input
 $kendo-input-line-height: 1.25 !default;
 
-$kendo-input-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-input-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-input-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-input-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
 $kendo-input-font-size-sm: $font-size-lg !default;
 $kendo-input-line-height-sm: 1.25 !default;
 
-$kendo-input-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-input-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-input-padding-y-md: k-map-get( $spacing, 2 ) !default;
 $kendo-input-font-size-md: $font-size-lg !default;
 $kendo-input-line-height-md: 1.25 !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 4 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-x-lg: k-map-get( $spacing, 4 ) !default;
+$kendo-input-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 $kendo-input-font-size-lg: $font-size-lg !default;
 $kendo-input-line-height-lg: 1.5 !default;
 
@@ -9968,8 +10718,8 @@ $kendo-input-sizes: (
         font-size: $kendo-input-font-size-sm,
         line-height: $kendo-input-line-height-sm,
         icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} ),
-        button-padding-x: map-get( $spacing, 1 ),
-        button-padding-y: map-get( $spacing, 1 )
+        button-padding-x: k-map-get( $spacing, 1 ),
+        button-padding-y: k-map-get( $spacing, 1 )
     ),
     md: (
         padding-x: $kendo-input-padding-x-md,
@@ -9977,8 +10727,8 @@ $kendo-input-sizes: (
         font-size: $kendo-input-font-size-md,
         line-height: $kendo-input-line-height-md,
         icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} ),
-        button-padding-x: map-get( $spacing, 1 ),
-        button-padding-y: map-get( $spacing, 1 )
+        button-padding-x: k-map-get( $spacing, 1 ),
+        button-padding-y: k-map-get( $spacing, 1 )
     ),
     lg: (
         padding-x: $kendo-input-padding-x-lg,
@@ -9986,12 +10736,12 @@ $kendo-input-sizes: (
         font-size: $kendo-input-font-size-lg,
         line-height: $kendo-input-line-height-lg,
         icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} ),
-        button-padding-x: map-get( $spacing, 1 ),
-        button-padding-y: map-get( $spacing, 1 )
+        button-padding-x: k-map-get( $spacing, 1 ),
+        button-padding-y: k-map-get( $spacing, 1 )
     )
 ) !default;
 
-$kendo-input-bg: try-shade( $component-bg, .5 ) !default;
+$kendo-input-bg: k-try-shade( $component-bg, .5 ) !default;
 $kendo-input-text: $component-text !default;
 $kendo-input-border: rgba( $component-border, .38 ) !default;
 $kendo-input-shadow: null !default;
@@ -10006,7 +10756,7 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $primary !default;
 $kendo-input-focus-shadow: null !default;
 
-$kendo-input-disabled-bg: try-shade( $component-bg, .25 ) !default;
+$kendo-input-disabled-bg: k-try-shade( $component-bg, .25 ) !default;
 $kendo-input-disabled-text: $disabled-text !default;
 $kendo-input-disabled-border: rgba( $component-border, (alpha( $component-border ) / 2) ) !default;
 $kendo-input-disabled-gradient: null !default;
@@ -10107,7 +10857,7 @@ $kendo-input-clear-value-opacity: .5 !default;
 $kendo-input-clear-value-hover-text: null !default;
 $kendo-input-clear-value-hover-opacity: 1 !default;
 
-$kendo-input-values-margin-y: map-get( $spacing, thin ) !default;
+$kendo-input-values-margin-y: k-map-get( $spacing, thin ) !default;
 $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
 
 
@@ -11448,17 +12198,17 @@ $floating-label-focus-text: $primary !default;
 
 /// The horizontal padding of the container.
 /// @group toolbar
-$toolbar-padding-x: map-get( $spacing, 2 ) !default;
+$toolbar-padding-x: k-map-get( $spacing, 2 ) !default;
 /// The vertical padding of the container.
 /// @group toolbar
-$toolbar-padding-y: map-get( $spacing, 2 ) !default;
+$toolbar-padding-y: k-map-get( $spacing, 2 ) !default;
 $toolbar-border-width: 0 !default;
 $toolbar-border-radius: null !default;
 $toolbar-spacing: $toolbar-padding-x !default;
 
 $toolbar-font-family: $font-family !default;
 $toolbar-font-size: $font-size !default;
-$toolbar-line-height: (20 / 14) !default;
+$toolbar-line-height: k-math-div( 20, 14 ) !default;
 
 $toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
 
@@ -11472,6 +12222,8 @@ $toolbar-separator-border: $component-border !default;
 
 $toolbar-input-width: 10em !default;
 
+$toolbar-item-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
+
 // #endregion
 // #region @import "../menu/_variables.scss"; -> packages/material/scss/menu/_variables.scss
 // Menu
@@ -11509,7 +12261,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: null !default;
 
-$menu-separator-spacing: map-get( $spacing, 1 ) !default;
+$menu-separator-spacing: k-map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $subtle-text !default;
@@ -11568,17 +12320,17 @@ $kendo-menu-popup-gradient: null !default;
 
 /// Horizontal padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-y: map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-menu-popup-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-menu-popup-item-padding-y: k-map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-menu-popup-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-y-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
 
 /// The end padding of the menu item in popup.
 /// @group menu
@@ -11728,7 +12480,7 @@ $grid-alt-border: null !default;
 
 /// Background color of hovered rows in grid
 /// @group grid
-$grid-hovered-bg: rgba( contrast-wcag( $grid-bg ), .07 ) !default;
+$grid-hovered-bg: rgba( k-contrast-color( $grid-bg ), .07 ) !default;
 /// Text color of hovered rows in grid
 /// @group grid
 $grid-hovered-text: null !default;
@@ -11738,7 +12490,7 @@ $grid-hovered-border: $grid-border !default;
 
 /// Background color of selected rows in grid
 /// @group grid
-$grid-selected-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
+$grid-selected-bg: rgba( k-contrast-color( $grid-bg ), .04 ) !default;
 /// Text color of selected rows in grid
 /// @group grid
 $grid-selected-text: null !default;
@@ -11749,11 +12501,11 @@ $grid-selected-border: $grid-border !default;
 $grid-grouping-row-bg: transparent !default;
 $grid-grouping-row-text: $grid-text !default;
 
-$grid-sorted-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
+$grid-sorted-bg: rgba( k-contrast-color( $grid-bg ), .04 ) !default;
 $grid-sorting-indicator-text: $grid-header-text !default;
 $grid-sorting-index-font-size: $font-size-sm !default;
 $grid-sorting-index-height: $icon-size !default;
-$grid-sorting-index-spacing-y: $icon-spacing / 2 !default;
+$grid-sorting-index-spacing-y: k-math-div( $icon-spacing, 2 ) !default;
 $grid-sorting-index-spacing-x: -$grid-sorting-index-spacing-y !default;
 
 
@@ -11762,11 +12514,11 @@ $grid-focused-shadow: $kendo-list-item-focus-shadow !default;
 $grid-edit-cell-padding-x: $grid-cell-padding-x !default;
 $grid-edit-cell-padding-y: 6px !default;
 
-$grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
+$grid-command-cell-button-spacing: k-map-get( $spacing, 2 ) !default;
 
 $grid-sticky-bg: $grid-bg !default;
 $grid-sticky-text: $grid-text !default;
-$grid-sticky-border: rgba( contrast-wcag( $grid-bg ), .5 ) !default;
+$grid-sticky-border: rgba( k-contrast-color( $grid-bg ), .5 ) !default;
 
 $grid-sticky-alt-bg: $grid-sticky-bg !default;
 
@@ -11777,18 +12529,18 @@ $grid-sticky-header-border: $grid-sticky-border !default;
 $grid-sticky-footer-bg: $grid-sticky-header-bg !default;
 $grid-sticky-footer-hovered-bg: $grid-sticky-footer-bg !default;
 
-$grid-sticky-selected-bg: try-shade($grid-bg, 4%) !default;
+$grid-sticky-selected-bg: k-try-shade($grid-bg, 4%) !default;
 $grid-sticky-selected-alt-bg: $grid-sticky-selected-bg !default;
 
-$grid-sticky-hovered-bg: try-shade($grid-bg, 7%) !default;
-$grid-sticky-selected-hovered-bg: try-shade($grid-sticky-selected-bg, .87) !default;
+$grid-sticky-hovered-bg: k-try-shade($grid-bg, 7%) !default;
+$grid-sticky-selected-hovered-bg: k-try-shade($grid-sticky-selected-bg, .87) !default;
 
 $grid-column-menu-width: 250px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 0 !default;
 
-$grid-filter-menu-item-spacing-x: map-get( $spacing, 4 ) !default;
-$grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
+$grid-filter-menu-item-spacing-x: k-map-get( $spacing, 4 ) !default;
+$grid-filter-menu-item-spacing-y: k-map-get( $spacing, 2 ) !default;
 
 $grid-column-menu-popup-padding-x: null !default;
 $grid-column-menu-popup-padding-y: null !default;
@@ -11800,7 +12552,7 @@ $grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
 $grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
-$grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
+$grid-column-menu-items-wrap-padding-y: k-map-get( $spacing, 2 ) !default;
 
 $grid-column-menu-filter-container-padding-x: $padding-x !default;
 $grid-column-menu-filter-container-padding-y: $padding-y !default;
@@ -11858,20 +12610,20 @@ $kendo-table-sizes: (
     sm: (
         font-size: $font-size-md,
         line-height: ( 20 / 14 ),
-        cell-padding-x: map-get( $spacing, 4 ),
-        cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
+        cell-padding-x: k-map-get( $spacing, 4 ),
+        cell-padding-y: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin )
     ),
     md: (
         font-size: $font-size-md,
         line-height: ( 20 / 14 ),
-        cell-padding-x: map-get( $spacing, 4 ),
-        cell-padding-y: map-get( $spacing, 2 )
+        cell-padding-x: k-map-get( $spacing, 4 ),
+        cell-padding-y: k-map-get( $spacing, 2 )
     ),
     lg: (
         font-size: $font-size-md,
         line-height: ( 20 / 14 ),
-        cell-padding-x: map-get( $spacing, 4 ),
-        cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
+        cell-padding-x: k-map-get( $spacing, 4 ),
+        cell-padding-y: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin )
     )
 ) !default;
 
@@ -12441,9 +13193,9 @@ $kendo-avatar-line-height: $line-height !default;
 /// The sizes of the avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: map-get( $spacing, 4 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
+    sm: k-map-get( $spacing, 4 ),
+    md: k-map-get( $spacing, 8 ),
+    lg: k-map-get( $spacing, 16 )
 ) !default;
 
 /// Theme colors map of the avatar.
@@ -12592,21 +13344,21 @@ $kendo-avatar-theme-colors: $kendo-theme-colors !default;
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the chip.
 /// @group chip
-$kendo-chip-spacing: map-get( $spacing, 1 ) !default;
+$kendo-chip-spacing: k-map-get( $spacing, 1 ) !default;
 
 /// Horizontal padding of the chip.
 /// @group chip
-$kendo-chip-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-sm: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-md: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-lg: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-md: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-lg: k-map-get( $spacing, 1 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
-$kendo-chip-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-chip-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-y-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin )  !default;
+$kendo-chip-padding-y-md: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-y-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
@@ -12653,42 +13405,42 @@ $kendo-chip-base-bg: $base-text !default;
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $kendo-theme-colors, "error" ),
-    "info": map-get( $kendo-theme-colors, "info" ),
-    "warning": map-get( $kendo-theme-colors, "warning" ),
-    "success": map-get( $kendo-theme-colors, "success" )
+    "error": k-map-get( $kendo-theme-colors, "error" ),
+    "info": k-map-get( $kendo-theme-colors, "info" ),
+    "warning": k-map-get( $kendo-theme-colors, "warning" ),
+    "success": k-map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: try-tint( $kendo-chip-base-bg, 90% ) !default;
+$kendo-chip-solid-bg: k-try-tint( $kendo-chip-base-bg, 90% ) !default;
 /// The base text color of solid chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-chip-base-bg !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: try-tint( $kendo-chip-base-bg, 70% ) !default;
+$kendo-chip-solid-border: k-try-tint( $kendo-chip-base-bg, 70% ) !default;
 /// The base shadow of solid chip.
 /// @group chip
 $kendo-chip-solid-shadow: null !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of focused solid chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of hovered solid chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: try-tint( $kendo-chip-base-bg, 84% ) !default;
+$kendo-chip-solid-hover-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
 /// The base text color of hovered solid chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
 /// The base background color of selected solid chip.
 /// @group chip
-$kendo-chip-solid-selected-bg: try-tint( $kendo-chip-base-bg, 76% ) !default;
+$kendo-chip-solid-selected-bg: k-try-tint( $kendo-chip-base-bg, 76% ) !default;
 /// The base text color of selected solid chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
@@ -12711,7 +13463,7 @@ $kendo-chip-outline-shadow: null !default;
 $kendo-chip-outline-hover-bg: $kendo-chip-base-bg !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-base-bg ) !default;
+$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-base-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip
@@ -12725,9 +13477,9 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 /// The sizes of the chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: map-get( $spacing, 1 ),
-    md: map-get( $spacing, 1 ),
-    lg: map-get( $spacing, 1 )
+    sm: k-map-get( $spacing, 1 ),
+    md: k-map-get( $spacing, 1 ),
+    lg: k-map-get( $spacing, 1 )
 ) !default;
 
 // #endregion
@@ -13039,7 +13791,7 @@ $kendo-chip-list-sizes: (
             &:hover,
             &.k-hover {
                 @include fill(
-                    $bg: rgba($color, .16 ),
+                    $bg: rgba( $color, .16 ),
                     $color: $color
                 );
             }
@@ -13048,7 +13800,7 @@ $kendo-chip-list-sizes: (
             &.k-focus {
                 @include box-shadow( none );
                 @include fill(
-                    $bg: rgba($color, .24),
+                    $bg: rgba( $color, .24),
                     $color: $color
                 );
             }
@@ -13074,7 +13826,7 @@ $kendo-chip-list-sizes: (
             &:hover,
             &.k-hover {
                 @include fill(
-                    $bg: rgba($color, .08 ),
+                    $bg: rgba( $color, .08 ),
                     $color: $color
                 );
             }
@@ -13252,13 +14004,13 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
 // #region @import "_variables.scss"; -> packages/material/scss/loader/_variables.scss
 // Loader
 $loader-segment-border-radius: 50% !default;
-$loader-segment-size-sm: map-get( $spacing, 1 ) !default;
-$loader-segment-size-md: map-get( $spacing, 2 ) !default;
-$loader-segment-size-lg: map-get( $spacing, 4 ) !default;
+$loader-segment-size-sm: k-map-get( $spacing, 1 ) !default;
+$loader-segment-size-md: k-map-get( $spacing, 2 ) !default;
+$loader-segment-size-lg: k-map-get( $spacing, 4 ) !default;
 
-$loader-padding-sm: ( $loader-segment-size-sm / 2 ) !default;
-$loader-padding-md: ( $loader-segment-size-md / 2 ) !default;
-$loader-padding-lg: ( $loader-segment-size-lg / 2 ) !default;
+$loader-padding-sm: k-math-div( $loader-segment-size-sm, 2 ) !default;
+$loader-padding-md: k-math-div( $loader-segment-size-md, 2 ) !default;
+$loader-padding-lg: k-math-div( $loader-segment-size-lg, 2 ) !default;
 
 $loader-spinner-3-width-sm: ( $loader-segment-size-sm * 4 ) !default;
 $loader-spinner-3-height-sm: ( $loader-spinner-3-width-sm * $equilateral-height ) !default;
@@ -13282,16 +14034,16 @@ $loader-container-panel-border-color: $component-border !default;
 $loader-container-panel-border-radius: $kendo-border-radius-md !default;
 $loader-container-panel-bg: $white !default;
 
-$loader-container-padding-sm: map-get( $spacing, 4 ) !default;
-$loader-container-gap-sm: map-get( $spacing, 1 ) !default;
+$loader-container-padding-sm: k-map-get( $spacing, 4 ) !default;
+$loader-container-gap-sm: k-map-get( $spacing, 1 ) !default;
 $loader-container-font-size-sm: $font-size-sm !default;
 
-$loader-container-padding-md: map-get( $spacing, 5 ) !default;
-$loader-container-gap-md: map-get( $spacing, 2 ) !default;
+$loader-container-padding-md: k-map-get( $spacing, 5 ) !default;
+$loader-container-gap-md: k-map-get( $spacing, 2 ) !default;
 $loader-container-font-size-md: $font-size-md !default;
 
-$loader-container-padding-lg: map-get( $spacing, 6 ) !default;
-$loader-container-gap-lg: map-get( $spacing, 3 ) !default;
+$loader-container-padding-lg: k-map-get( $spacing, 6 ) !default;
+$loader-container-gap-lg: k-map-get( $spacing, 3 ) !default;
 $loader-container-font-size-lg: $font-size-lg !default;
 
 // #endregion
@@ -13981,19 +14733,19 @@ $tooltip-text: get-base-contrast( gray, 700 ) !default;
 $tooltip-border: $tooltip-bg !default;
 
 $tooltip-primary-bg: $primary !default;
-$tooltip-primary-text: contrast-wcag( $tooltip-primary-bg ) !default;
+$tooltip-primary-text: k-contrast-color( $tooltip-primary-bg ) !default;
 $tooltip-primary-border: $tooltip-primary-bg !default;
 $tooltip-info-bg: $info !default;
-$tooltip-info-text: contrast-wcag( $tooltip-info-bg ) !default;
+$tooltip-info-text: k-contrast-color( $tooltip-info-bg ) !default;
 $tooltip-info-border: $tooltip-info-bg !default;
 $tooltip-success-bg: $success !default;
-$tooltip-success-text: contrast-wcag( $tooltip-success-bg ) !default;
+$tooltip-success-text: k-contrast-color( $tooltip-success-bg ) !default;
 $tooltip-success-border: $tooltip-success-bg !default;
 $tooltip-warning-bg: $warning !default;
-$tooltip-warning-text: contrast-wcag( $tooltip-warning-bg ) !default;
+$tooltip-warning-text: k-contrast-color( $tooltip-warning-bg ) !default;
 $tooltip-warning-border: $tooltip-warning-bg !default;
 $tooltip-error-bg: $error !default;
-$tooltip-error-text: contrast-wcag( $tooltip-error-bg ) !default;
+$tooltip-error-text: k-contrast-color( $tooltip-error-bg ) !default;
 $tooltip-error-border: $tooltip-error-bg !default;
 
 // #endregion
@@ -14759,7 +15511,8 @@ $tooltip-error-border: $tooltip-error-bg !default;
         }
 
         // Template item
-        .k-toolbar-item:focus {
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
             text-decoration: none;
             outline: 0;
         }
@@ -14977,7 +15730,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
-            @include box-shadow( $kendo-button-focus-shadow );
+            @include box-shadow( $toolbar-item-shadow );
         }
 
 
@@ -15054,8 +15807,8 @@ $tooltip-error-border: $tooltip-error-bg !default;
     .k-toolbar {
 
         .k-button-solid-base {
-            background-color: try-shade( $kendo-button-bg );
-            border-color: try-shade( $kendo-button-bg );
+            background-color: k-try-shade( $kendo-button-bg );
+            border-color: k-try-shade( $kendo-button-bg );
 
             &.k-input-button,
             &.k-input-spinner .k-spinner-increase,
@@ -15090,11 +15843,11 @@ $tooltip-error-border: $tooltip-error-bg !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/action-buttons/_variables.scss
 // Actions
-$actions-margin-top: map-get( $spacing, 4 ) !default;
-$actions-padding-x: map-get( $spacing, 2 ) !default;
-$actions-padding-y: map-get( $spacing, 2 ) !default;
+$actions-margin-top: k-map-get( $spacing, 4 ) !default;
+$actions-padding-x: k-map-get( $spacing, 2 ) !default;
+$actions-padding-y: k-map-get( $spacing, 2 ) !default;
 $actions-border-width: 0px !default;
-$actions-button-spacing: map-get( $spacing, 2 ) !default;
+$actions-button-spacing: k-map-get( $spacing, 2 ) !default;
 
 $actions-bg: null !default;
 $actions-text: null !default;
@@ -15231,8 +15984,8 @@ $actions-gradient: null !default;
     .k-actions {
 
         .k-button-solid-base {
-            background-color: try-shade( $kendo-button-bg );
-            border-color: try-shade( $kendo-button-bg );
+            background-color: k-try-shade( $kendo-button-bg );
+            border-color: k-try-shade( $kendo-button-bg );
         }
 
     }
@@ -16144,10 +16897,10 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 
 /// Horizontal padding of the arrow button.
 /// @group split-button
-$kendo-split-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-sm: map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-md: map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-lg: map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-md: k-map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-lg: k-map-get( $spacing, 1 ) !default;
 
 /// Vertical padding of the arrow button.
 /// @group split-button
@@ -16241,8 +16994,7 @@ $kendo-split-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
 
 /// Horizontal padding of the arrow button.
 /// @group menu-button
-$kendo-menu-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
-
+$kendo-menu-button-arrow-padding-x: k-map-get( $spacing, 1 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/menu-button/_layout.scss
@@ -16636,7 +17388,7 @@ $progressbar-font-family: $font-family !default;
 $progressbar-font-size: $font-size-sm !default;
 $progressbar-line-height: 1 !default;
 
-$progressbar-bg: try-tint( $primary, 8 ) !default;
+$progressbar-bg: k-try-tint( $primary, 8 ) !default;
 $progressbar-text: $component-text !default;
 $progressbar-border: null !default;
 $progressbar-gradient: null !default;
@@ -17170,19 +17922,19 @@ $kendo-radio-border-width: 2px !default;
 // Radio button sizes
 $kendo-radio-sizes: (
     sm: (
-        size: map-get( $spacing, 3 ),
-        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 3 ) * 3
+        size: k-map-get( $spacing, 3 ),
+        glyph-size: ( k-map-get( $spacing, 3 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 3 ) * 3
     ),
     md: (
-        size: map-get( $spacing, 4 ),
-        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 4 ) * 3
+        size: k-map-get( $spacing, 4 ),
+        glyph-size: ( k-map-get( $spacing, 4 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 4 ) * 3
     ),
     lg: (
-        size: map-get( $spacing, 5 ),
-        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 5 ) * 3
+        size: k-map-get( $spacing, 5 ),
+        glyph-size: ( k-map-get( $spacing, 5 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 5 ) * 3
     )
 ) !default;
 
@@ -17285,14 +18037,14 @@ $kendo-radio-disabled-checked-image: escape-svg( url("data:image/svg+xml,<svg xm
 
 /// The horizontal margin of the radio button inside of a label.
 /// @group radio
-$kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
+$kendo-radio-label-margin-x: k-map-get( $spacing, 1 ) !default;
 
 
 // Radio list
 
 /// Spacing between items of horizontal radio button list.
 /// @group radio
-$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-radio-list-spacing: k-map-get( $spacing, 4 ) !default;
 /// Horizontal padding of radio button list items.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;
@@ -17705,14 +18457,14 @@ $slider-draghandle-pressed-text: null !default;
 $slider-draghandle-pressed-border: null !default;
 $slider-draghandle-pressed-gradient: null !default;
 
-$slider-draghandle-focused-shadow: 0 0 0 11px rgba($primary, .25) !default;
+$slider-draghandle-focused-shadow: 0 0 0 11px rgba( $primary, .25 ) !default;
 
 $slider-transition-speed: .3s !default;
 $slider-transition-function: ease-out !default;
 $slider-draghandle-transition-speed: .4s !default;
 $slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
 
-$slider-track-bg: try-tint( $primary, 8 ) !default;
+$slider-track-bg: k-try-tint( $primary, 8 ) !default;
 $slider-selection-bg: $primary !default;
 $slider-disabled-opacity: .65 !default;
 
@@ -18376,8 +19128,8 @@ $calendar-bg: $component-bg !default;
 $calendar-text: $component-text !default;
 $calendar-border: $component-border !default;
 
-$calendar-header-padding-x: map-get( $spacing, 1 ) !default;
-$calendar-header-padding-y: map-get( $spacing, 1 ) !default;
+$calendar-header-padding-x: k-map-get( $spacing, 1 ) !default;
+$calendar-header-padding-y: k-map-get( $spacing, 1 ) !default;
 $calendar-header-border-width: 0px !default;
 
 $calendar-header-bg: null !default;
@@ -18386,13 +19138,13 @@ $calendar-header-border: $header-border !default;
 $calendar-header-gradient: null !default;
 $calendar-header-shadow: null !default;
 
-$calendar-nav-gap: map-get( $spacing, 1 ) !default;
+$calendar-nav-gap: k-map-get( $spacing, 1 ) !default;
 
 $calendar-today-nav-text: $link-text !default;
 $calendar-today-nav-hover-text: $link-hover-text !default;
 
-$calendar-footer-padding-x: map-get( $spacing, 4 ) !default;
-$calendar-footer-padding-y: map-get( $spacing, 2 ) !default;
+$calendar-footer-padding-x: k-map-get( $spacing, 4 ) !default;
+$calendar-footer-padding-y: k-map-get( $spacing, 2 ) !default;
 
 $calendar-cell-padding-x: .25em !default;
 $calendar-cell-padding-y: $calendar-cell-padding-x !default;
@@ -18409,8 +19161,8 @@ $calendar-header-cell-bg: null !default;
 $calendar-header-cell-text: $subtle-text !default;
 $calendar-header-cell-opacity: null !default;
 
-$calendar-caption-padding-x: map-get( $spacing, 4 ) !default;
-$calendar-caption-padding-y: map-get( $spacing, 1 ) !default;
+$calendar-caption-padding-x: k-map-get( $spacing, 4 ) !default;
+$calendar-caption-padding-y: k-map-get( $spacing, 1 ) !default;
 $calendar-caption-height: $calendar-cell-size !default;
 $calendar-caption-font-size: null !default;
 $calendar-caption-line-height: null !default;
@@ -18418,7 +19170,7 @@ $calendar-caption-font-weight: bold !default;
 
 $calendar-view-width: ($calendar-cell-size * 7) !default;
 $calendar-view-height: ($calendar-cell-size * 7) !default;
-$calendar-view-gap: map-get( $spacing, 4 ) !default;
+$calendar-view-gap: k-map-get( $spacing, 4 ) !default;
 
 $calendar-weekend-bg: null !default;
 $calendar-weekend-text: null !default;
@@ -18443,11 +19195,11 @@ $calendar-cell-hover-border: $hovered-border !default;
 $calendar-cell-hover-gradient: null !default;
 
 $calendar-cell-selected-bg: $primary !default;
-$calendar-cell-selected-text: contrast-wcag( $calendar-cell-selected-bg ) !default;
+$calendar-cell-selected-text: k-contrast-color( $calendar-cell-selected-bg ) !default;
 $calendar-cell-selected-border: $calendar-cell-selected-bg !default;
 $calendar-cell-selected-gradient: null !default;
 
-$calendar-cell-selected-hover-bg: try-shade( $calendar-cell-selected-bg, .5 ) !default;
+$calendar-cell-selected-hover-bg: k-try-shade( $calendar-cell-selected-bg, .5 ) !default;
 $calendar-cell-selected-hover-text: $calendar-cell-selected-text !default;
 $calendar-cell-selected-hover-border: null !default;
 $calendar-cell-selected-hover-gradient: null !default;
@@ -18460,16 +19212,16 @@ $calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
 $calendar-navigation-width: 5em !default;
 $calendar-navigation-item-height: 2em !default;
 
-$calendar-navigation-bg: true-mix( $calendar-text, $calendar-bg, 3) !default;
+$calendar-navigation-bg: k-true-mix( $calendar-text, $calendar-bg, 3) !default;
 $calendar-navigation-text: $calendar-text !default;
 $calendar-navigation-border: $calendar-border !default;
 
 
 // Infinite calendar
-$infinite-calendar-header-padding-x: map-get( $spacing, 4 ) !default;
-$infinite-calendar-header-padding-y: map-get( $spacing, 2 ) !default;
+$infinite-calendar-header-padding-x: k-map-get( $spacing, 4 ) !default;
+$infinite-calendar-header-padding-y: k-map-get( $spacing, 2 ) !default;
 
-$infinite-calendar-view-padding-x: map-get( $spacing, 4 ) !default;
+$infinite-calendar-view-padding-x: k-map-get( $spacing, 4 ) !default;
 $infinite-calendar-view-padding-y: 0px !default;
 $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
@@ -18487,14 +19239,14 @@ $kendo-calendar-sm-cell-padding-y: .125rem !default;
 $kendo-calendar-md-font-size: $font-size-md !default;
 $kendo-calendar-md-line-height: $line-height-md !default;
 $kendo-calendar-md-cell-size: 36px !default;
-$kendo-calendar-md-cell-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-calendar-md-cell-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: k-map-get( $spacing, 1 ) !default;
 
 $kendo-calendar-lg-font-size: $font-size-lg !default;
 $kendo-calendar-lg-line-height: $line-height-lg !default;
 $kendo-calendar-lg-cell-size: 40px !default;
-$kendo-calendar-lg-cell-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-calendar-lg-cell-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-map-get( $spacing, 1 ) !default;
 
 $kendo-calendar-sizes: (
     sm: (
@@ -19345,7 +20097,7 @@ $kendo-calendar-sizes: (
         .k-selected.k-focus .k-link {
             @include fill(
                 $calendar-cell-selected-text,
-                try-tint($calendar-cell-selected-bg),
+                k-try-tint($calendar-cell-selected-bg),
                 $calendar-cell-selected-border
             );
         }
@@ -19380,14 +20132,14 @@ $kendo-calendar-sizes: (
 $time-selector-border-width: 1px !default;
 $time-selector-font-family: $font-family !default;
 $time-selector-font-size: $font-size !default;
-$time-selector-line-height: (20 / 14) !default;
+$time-selector-line-height: k-math-div( 20, 14 ) !default;
 
 $time-selector-bg: $component-bg !default;
 $time-selector-text: $component-text !default;
 $time-selector-border: $component-border !default;
 
-$time-selector-header-padding-x: map-get( $spacing, 1 ) !default;
-$time-selector-header-padding-y: map-get( $spacing, 1 ) !default;
+$time-selector-header-padding-x: k-map-get( $spacing, 1 ) !default;
+$time-selector-header-padding-y: k-map-get( $spacing, 1 ) !default;
 $time-selector-header-border-width: 0px !default;
 
 $time-list-width: 4em !default;
@@ -19510,6 +20262,7 @@ $kendo-time-selector-sizes: (
         display: flex;
         position: relative;
         flex: 1 1 auto;
+        overflow: hidden;
     }
 
 
@@ -19882,7 +20635,7 @@ $kendo-time-selector-sizes: (
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/captcha/_variables.scss
 // Captcha
-$captcha-spacer: map-get( $spacing, 2 ) !default;
+$captcha-spacer: k-map-get( $spacing, 2 ) !default;
 
 $captcha-width: 335px !default;
 $captcha-font-family: $font-family !default;
@@ -20012,7 +20765,7 @@ $colorpalette-font-family: $font-family !default;
 $colorpalette-font-size: $font-size !default;
 $colorpalette-line-height: 0 !default;
 
-$colorpalette-tile-width: map-get( $spacing, 6 ) !default;
+$colorpalette-tile-width: k-map-get( $spacing, 6 ) !default;
 $colorpalette-tile-height: $colorpalette-tile-width !default;
 $colorpalette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
 $colorpalette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
@@ -20203,7 +20956,7 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 // #endregion
 // #region @import "_variables.scss"; -> packages/material/scss/colorgradient/_variables.scss
 // ColorGradient
-$colorgradient-spacer: map-get( $spacing, 3 ) !default;
+$colorgradient-spacer: k-map-get( $spacing, 3 ) !default;
 
 $colorgradient-width: 294px !default;
 $colorgradient-border-width: 1px !default;
@@ -20238,21 +20991,21 @@ $colorgradient-draghandle-border-width: 1px !default;
 $colorgradient-draghandle-border-radius: 50% !default;
 $colorgradient-draghandle-bg: transparent !default;
 $colorgradient-draghandle-text: null !default;
-$colorgradient-draghandle-border: rgba( $white, .8) !default;
-$colorgradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
+$colorgradient-draghandle-border: rgba( white, .8 ) !default;
+$colorgradient-draghandle-shadow: 0 1px 4px rgba( black, .5 ) !default;
 $colorgradient-draghandle-focus-shadow: 0 1px 4px black !default;
 $colorgradient-draghandle-hover-shadow: $colorgradient-draghandle-focus-shadow !default;
 
-$colorgradient-canvas-draghandle-margin-y: -( $colorgradient-draghandle-height / 2 ) !default;
-$colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width / 2 ) !default;
+$colorgradient-canvas-draghandle-margin-y: - k-math-div( $colorgradient-draghandle-height, 2 ) !default;
+$colorgradient-canvas-draghandle-margin-x: - k-math-div( $colorgradient-draghandle-width, 2 ) !default;
 
 $colorgradient-input-width: 50px !default;
-$colorgradient-input-gap: map-get( $spacing, 2 ) !default;
-$colorgradient-input-label-gap: map-get( $spacing, 1 ) !default;
+$colorgradient-input-gap: k-map-get( $spacing, 2 ) !default;
+$colorgradient-input-label-gap: k-map-get( $spacing, 1 ) !default;
 $colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
-$colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
+$colorgradient-contrast-spacer: k-map-get( $spacing, 2 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/colorgradient/_layout.scss
@@ -20575,7 +21328,7 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/coloreditor/_variables.scss
 // Coloreditor/FlatColorPicker
-$coloreditor-spacer: map-get( $spacing, 3 ) !default;
+$coloreditor-spacer: k-map-get( $spacing, 3 ) !default;
 
 $coloreditor-min-width: 294px !default;
 $coloreditor-border-width: 1px !default;
@@ -20592,9 +21345,9 @@ $coloreditor-focus-shadow: $box-shadow-depth-2 !default;
 
 $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
-$coloreditor-header-actions-gap: map-get( $spacing, 2 ) !default;
+$coloreditor-header-actions-gap: k-map-get( $spacing, 2 ) !default;
 
-$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-preview-gap: k-map-get( $spacing, 1 ) !default;
 $coloreditor-color-preview-width: 32px !default;
 $coloreditor-color-preview-height: 12px !default;
 
@@ -21419,8 +22172,8 @@ $kendo-treeview-font-size-lg: $font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: 1.25 !default;
-$kendo-treeview-line-height-sm: ( 20 / 14 ) !default;
-$kendo-treeview-line-height-md: ( 20 / 14 ) !default;
+$kendo-treeview-line-height-sm: k-math-div( 20, 14 ) !default;
+$kendo-treeview-line-height-md: k-math-div( 20, 14 ) !default;
 $kendo-treeview-line-height-lg: 1.5 !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
@@ -21428,16 +22181,16 @@ $kendo-treeview-indent: 16px !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-x: map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-y: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-treeview-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y: k-map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -21877,8 +22630,8 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/dropdowntree/_variables.scss
 // Dropdowntree
-$dropdowntree-popup-padding-x: map-get( $spacing, 2 ) !default;
-$dropdowntree-popup-padding-y: map-get( $spacing, 2 ) !default;
+$dropdowntree-popup-padding-x: k-map-get( $spacing, 2 ) !default;
+$dropdowntree-popup-padding-y: k-map-get( $spacing, 2 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/dropdowntree/_layout.scss
@@ -22016,8 +22769,8 @@ $rating-icon-selected-text: $primary-darker !default;
 $rating-icon-hover-text: $primary-darker !default;
 $rating-icon-focused-text: $primary-darker !default;
 
-$rating-icon-focused-shadow: 0 2px 4px rgba( $black, .1 ) !default;
-$rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
+$rating-icon-focused-shadow: 0 2px 4px rgba( black, .1 ) !default;
+$rating-icon-focused-selected-shadow: 0 2px 4px rgba( black, .1) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/rating/_layout.scss
@@ -22842,26 +23595,26 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/dropzone/_variables.scss
 // Dropzone
-$dropzone-padding-x: map-get( $spacing, 2 ) !default;
-$dropzone-padding-y: map-get( $spacing, 2 ) !default;
+$dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
+$dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
 $dropzone-border-width: 1px !default;
 $dropzone-min-height: 220px !default;
 
 $dropzone-font-family: $font-family !default;
 $dropzone-font-size: $font-size !default;
-$dropzone-line-height: ( 20 / 14 ) !default;
+$dropzone-line-height: k-math-div( 20, 14 ) !default;
 
-$dropzone-bg: try-shade( $base-bg, 1 ) !default;
+$dropzone-bg: k-try-shade( $base-bg, 1 ) !default;
 $dropzone-text: $base-text !default;
 $dropzone-border: $base-border !default;
 
 $dropzone-icon-size: ( $icon-size * 3 ) !default;
-$dropzone-icon-spacing: map-get( $spacing, 6 ) !default;
-$dropzone-icon-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-icon-spacing: k-map-get( $spacing, 6 ) !default;
+$dropzone-icon-text: k-try-tint( $dropzone-text, 4 ) !default;
 $dropzone-icon-hover-text: $primary !default;
 
 $dropzone-hint-font-size: null !default;
-$dropzone-hint-spacing: map-get( $spacing, 2 ) !default;
+$dropzone-hint-spacing: k-map-get( $spacing, 2 ) !default;
 $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;
@@ -22971,15 +23724,15 @@ $dropzone-note-text: $subtle-text !default;
 $upload-border-width: 1px !default;
 $upload-font-family: $font-family !default;
 $upload-font-size: $font-size !default;
-$upload-line-height: ( 20 / 14 ) !default;
+$upload-line-height: k-math-div( 20, 14 ) !default;
 $upload-max-height: 300px !default;
 
 $upload-bg: $component-bg !default;
 $upload-text: $component-text !default;
 $upload-border: $component-border !default;
 
-$upload-dropzone-padding-x: map-get( $spacing, 2 ) !default;
-$upload-dropzone-padding-y: map-get( $spacing, 2 ) !default;
+$upload-dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
+$upload-dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
 $upload-dropzone-bg: $header-bg !default;
 $upload-dropzone-text: $header-text !default;
 $upload-dropzone-border: $upload-border !default;
@@ -22988,8 +23741,8 @@ $upload-dropzone-hover-bg: $hovered-bg !default;
 $upload-status-text: $subtle-text !default;
 $upload-status-text-opacity: null !default;
 
-$upload-item-padding-x: map-get( $spacing, 4 ) !default;
-$upload-item-padding-y: map-get( $spacing, 4 ) !default;
+$upload-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$upload-item-padding-y: k-map-get( $spacing, 4 ) !default;
 
 $upload-multiple-items-spacing: 12px !default;
 
@@ -23014,7 +23767,7 @@ $upload-error-bg: $error !default;
 $upload-error-text: $error !default;
 $upload-error-border: $error !default;
 
-$upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$upload-focused-shadow: 0 0 0 2px rgba( black, .13 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/upload/_layout.scss
@@ -23602,7 +24355,7 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
     .k-upload {
         .k-upload-button {
             @include box-shadow( none );
-            background-color: try-shade( $upload-dropzone-bg );
+            background-color: k-try-shade( $upload-dropzone-bg );
         }
     }
 }
@@ -23636,8 +24389,8 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // Appbar
 $appbar-margin-y: null !default;
 $appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 2 ) !default;
+$appbar-padding-y: k-map-get( $spacing, 2 ) !default;
+$appbar-padding-x: k-map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;
@@ -23645,16 +24398,16 @@ $appbar-zindex: 1000 !default;
 $appbar-font-size: $font-size !default;
 $appbar-line-height: $line-height !default;
 $appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
+$appbar-gap: k-map-get( $spacing, 2 ) !default;
 
 $appbar-light-bg: $light !default;
-$appbar-light-text: contrast-wcag( $light ) !default;
+$appbar-light-text: k-contrast-color( $light ) !default;
 
 $appbar-dark-bg: $dark !default;
-$appbar-dark-text: contrast-wcag( $dark ) !default;
+$appbar-dark-text: k-contrast-color( $dark ) !default;
 
-$appbar-box-shadow: 0px 2px 3px rgba(0, 0, 0, .24) !default;
-$appbar-bottom-box-shadow: 0px -2px 3px rgba(0, 0, 0, .24) !default;
+$appbar-box-shadow: 0px 2px 3px rgba( black, .24 ) !default;
+$appbar-bottom-box-shadow: 0px -2px 3px rgba( black, .24 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/appbar/_layout.scss
@@ -23876,18 +24629,18 @@ $kendo-fab-icon-width: 20px !default;
 $kendo-fab-icon-height: $kendo-fab-icon-width !default;
 /// FAB icon spacing.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: map-get( $spacing, 1 ) * 1.5 !default;
+$kendo-fab-icon-spacing: k-map-get( $spacing, 1 ) * 1.5 !default;
 
 /// FAB items horizontal padding.
 /// @group floating-action-button
 $kendo-fab-items-padding-x: 0px !default;
 /// FAB items vertical padding.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
+$kendo-fab-items-padding-y: k-map-get( $spacing, 4 ) !default;
 
 /// FAB item text horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-fab-item-text-padding-x: k-map-get( $spacing, 1 ) !default;
 /// FAB item text vertical padding.
 /// @group floating-action-button
 $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
@@ -23906,7 +24659,7 @@ $kendo-fab-item-text-line-height: 1.2 !default;
 
 /// FAB item icon horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-x: k-map-get( $spacing, 2 ) !default;
 /// FAB item icon vertical padding.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
@@ -23929,13 +24682,13 @@ $kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12) !default;
+$kendo-fab-shadow: 0px 3px 5px -1px rgba( black, .2 ), 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 ) !default;
 /// The disabled shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: 0px 3px 5px -1px try-tint(rgba(0, 0, 0, .2), .5), 0px 6px 10px try-tint(rgba(0, 0, 0, .14), .5), 0px 1px 18px try-tint(rgba(0, 0, 0, .12), .5) !default;
+$kendo-fab-disabled-shadow: 0px 3px 5px -1px k-try-tint( rgba( black, .2 ), .5 ), 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 ) !default;
 /// The active shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-active-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12) !default;
+$kendo-fab-active-shadow: 0px 5px 5px -3px rgba( black, .2 ), 0px 8px 10px 1px rgba( black, .14 ), 0px 3px 14px 2px rgba( black, .12 ) !default;
 
 /// The base text color of the FAB item.
 /// @group floating-action-button
@@ -24152,7 +24905,7 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
         .k-fab-solid-#{$name} {
             @include box-shadow($kendo-fab-shadow);
             border-color: $color;
-            color: contrast-wcag( $color );
+            color: k-contrast-color( $color );
             background-color: $color;
         }
     }
@@ -24161,8 +24914,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: true-mix( #ffffff, $color, 8%);
-            background-color: true-mix( #ffffff, $color, 8%);
+            border-color: k-true-mix( #ffffff, $color, 8%);
+            background-color: k-true-mix( #ffffff, $color, 8%);
         }
     }
 
@@ -24170,8 +24923,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     @each $name, $color in $kendo-fab-theme-colors {
         .k-focus.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:focus {
-            border-color: true-mix( #ffffff, $color, 12%);
-            background-color: true-mix( #ffffff, $color, 12%);
+            border-color: k-true-mix( #ffffff, $color, 12%);
+            background-color: k-true-mix( #ffffff, $color, 12%);
         }
     }
 
@@ -24180,8 +24933,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
         .k-active.k-fab-solid-#{$name},
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
-            border-color: true-mix( #ffffff, $color, 16%);
-            background-color: true-mix( #ffffff, $color, 16%);
+            border-color: k-true-mix( #ffffff, $color, 16%);
+            background-color: k-true-mix( #ffffff, $color, 16%);
             box-shadow: $kendo-fab-active-shadow;
         }
     }
@@ -24191,9 +24944,9 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            border-color: try-tint( try-shade( $body-bg, 12% ), 5);
-            background-color: try-tint( try-shade( $body-bg, 12% ), 5);
-            color: tint( $disabled-text, 4);
+            border-color: k-try-tint( k-try-shade( $body-bg, 12% ), 5);
+            background-color: k-try-tint( k-try-shade( $body-bg, 12% ), 5);
+            color: k-color-tint( $disabled-text, 4);
             opacity: 1;
         }
     }
@@ -24219,25 +24972,25 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: true-mix( #000000, $kendo-fab-item-icon-border, 8%);
-        background-color: true-mix( #000000, $kendo-fab-item-icon-bg, 8%);
-        color: true-mix( #000000, $kendo-fab-item-icon-text, 8%);
+        border-color: k-true-mix( #000000, $kendo-fab-item-icon-border, 8%);
+        background-color: k-true-mix( #000000, $kendo-fab-item-icon-bg, 8%);
+        color: k-true-mix( #000000, $kendo-fab-item-icon-text, 8%);
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        border-color: true-mix( #000000, $kendo-fab-item-icon-border, 12%);
-        background-color: true-mix( #000000, $kendo-fab-item-icon-bg, 12%);
-        color: true-mix( #000000, $kendo-fab-item-icon-text, 12%);
+        border-color: k-true-mix( #000000, $kendo-fab-item-icon-border, 12%);
+        background-color: k-true-mix( #000000, $kendo-fab-item-icon-bg, 12%);
+        color: k-true-mix( #000000, $kendo-fab-item-icon-text, 12%);
     }
 
     // Active state
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: true-mix( #ffffff, $kendo-fab-item-icon-border, 12%);
-        background-color: true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%);
+        border-color: k-true-mix( #ffffff, $kendo-fab-item-icon-border, 12%);
+        background-color: k-true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%);
     }
 
     // Disabled state
@@ -24248,8 +25001,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: try-tint( $kendo-fab-item-bg, 8 );
-            color: try-tint( $kendo-fab-item-text, 8 );
+            background-color: k-try-tint( $kendo-fab-item-bg, 8 );
+            color: k-try-tint( $kendo-fab-item-text, 8 );
         }
     }
 
@@ -24302,14 +25055,15 @@ $actionsheet-padding-x: null !default;
 $actionsheet-padding-y: null !default;
 $actionsheet-width: 360px !default;
 $actionsheet-max-width: 100% !default;
-$actionsheet-max-height: 50vh !default;
+$actionsheet-height: 60vh !default;
+$actionsheet-max-height: 60vh !default;
 
 $actionsheet-border-width: 0px !default;
 $actionsheet-border-radius: 0px !default;
 
 $actionsheet-font-size: $font-size !default;
 $actionsheet-font-family: $font-family !default;
-$actionsheet-line-height: ( 20 / 14 ) !default;
+$actionsheet-line-height: k-math-div( 20, 14 ) !default;
 
 $actionsheet-bg: $component-bg !default;
 $actionsheet-text: $component-text !default;
@@ -24318,24 +25072,29 @@ $actionsheet-shadow: $box-shadow-depth-4 !default;
 
 
 // Actionsheet header
-$actionsheet-header-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-header-padding-y: map-get( $spacing, 2 ) !default;
-$actionsheet-header-border-width: null !default;
-$actionsheet-header-font-size: null !default;
-$actionsheet-header-font-family: null !default;
-$actionsheet-header-line-height: null !default;
+$actionsheet-titlebar-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-titlebar-padding-y: k-map-get( $spacing, 2 ) !default;
+$actionsheet-titlebar-border-width: null !default;
+$actionsheet-titlebar-font-size: null !default;
+$actionsheet-titlebar-font-family: null !default;
+$actionsheet-titlebar-line-height: null !default;
+$actionsheet-titlebar-gap: k-map-get( $spacing, 4 ) !default;
+
+$actionsheet-titlebar-bg: null !default;
+$actionsheet-titlebar-text: null !default;
+$actionsheet-titlebar-border: null !default;
+$actionsheet-titlebar-gradient: null !default;
+$actionsheet-titlebar-shadow: null !default;
 
-$actionsheet-header-bg: null !default;
-$actionsheet-header-text: null !default;
-$actionsheet-header-border: null !default;
-$actionsheet-header-gradient: null !default;
-$actionsheet-header-shadow: null !default;
+$actionsheet-subtitle-font-size: $font-size-sm !default;
+$actionsheet-subtitle-line-height: $line-height-sm !default;
+$actionsheet-subtitle-text: $subtle-text !default;
 
 
 // Actionsheet item
 $actionsheet-item-min-height: 40px !default;
-$actionsheet-item-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-item-padding-y: map-get( $spacing, 2 ) !default;
+$actionsheet-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-item-padding-y: k-map-get( $spacing, 2 ) !default;
 $actionsheet-item-border-width: 1px !default;
 $actionsheet-item-spacing: 12px !default;
 
@@ -24365,32 +25124,91 @@ $actionsheet-item-disabled-border: null !default;
 $actionsheet-item-disabled-gradient: null !default;
 $actionsheet-item-disabled-shadow: null !default;
 
-$actionsheet-item-hover-background: rgba(0, 0, 0, .04) !default;
-$actionsheet-item-focus-background: rgba(0, 0, 0, .12) !default;
+$actionsheet-item-hover-background: rgba( black, .04 ) !default;
+$actionsheet-item-focus-background: rgba( black, .12 ) !default;
 $actionsheet-item-focus-shadow: null !default;
 $actionsheet-item-disabled-opacity: .42 !default;
 
+
+// Adaptive Actionsheet
+$adaptive-actionsheet-titlebar-border-width: 1px !default;
+$adaptive-actionsheet-titlebar-padding-y: k-map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-titlebar-padding-x: $adaptive-actionsheet-titlebar-padding-y !default;
+$adaptive-actionsheet-titlebar-border: $component-border !default;
+
+$adaptive-actionsheet-content-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-content-padding-x: k-map-get( $spacing, 4 ) !default;
+
+$adaptive-actionsheet-footer-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-footer-padding-x: k-map-get( $spacing, 4 ) !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/action-sheet/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/action-sheet/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/action-sheet/_layout.scss
 @include exports("action-sheet/layout") {
 
+    // Action sheet container
     .k-actionsheet-container {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
+        max-width: unquote("max(100%, 100vw)");
+        max-height: unquote("max(100%, 100vh)");
         position: fixed;
         top: 0;
         left: 0;
         z-index: 9999;
         overflow: hidden;
+        transform: translateZ(0);
     }
 
+
+    // Animation container
+    .k-actionsheet-container {
+
+        // Overlay
+        > .k-overlay {
+            position: absolute;
+            z-index: 1;
+        }
+
+        // Nested animation container
+        > .k-animation-container {
+            width: 100%;
+            height: 100%;
+            border-radius: 0;
+            overflow: hidden;
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+
+            > .k-child-animation-container {
+                position: absolute;
+            }
+        }
+
+        // No animation container
+        > .k-actionsheet {
+            position: absolute;
+            z-index: 2;
+        }
+
+        // Enable mouse events for action sheet
+        .k-actionsheet {
+            pointer-events: all;
+        }
+    }
+
+
     // Actionsheet
     .k-actionsheet {
-        padding: $actionsheet-padding-y $actionsheet-padding-y;
-        width: $actionsheet-width;
-        max-width: $actionsheet-max-width;
-        max-height: $actionsheet-max-height;
+        padding-block: $actionsheet-padding-y;
+        padding-inline: $actionsheet-padding-y;
+        width: var( --kendo-actionsheet-width, #{$actionsheet-width} );
+        height: var( --kendo-actionsheet-height, #{$actionsheet-height} );
+        max-width: var( --kendo-actionsheet-max-width, #{$actionsheet-max-width} );
+        max-height: var( --kendo-actionsheet-max-height, #{$actionsheet-max-height} );
         border-width: 0;
         border-style: solid;
         border-color: transparent;
@@ -24398,10 +25216,8 @@ $actionsheet-item-disabled-opacity: .42 !default;
         font-size: $actionsheet-font-size;
         font-family: $actionsheet-font-family;
         line-height: $actionsheet-line-height;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: fixed;
-        z-index: 10002;
+        overflow: hidden;
+        position: relative;
 
         *,
         *::before,
@@ -24409,37 +25225,37 @@ $actionsheet-item-disabled-opacity: .42 !default;
             box-sizing: border-box;
         }
     }
-    .k-actionsheet-fullscreen {
-        max-height: 100%;
-        height: 100%;
-    }
 
 
-    // Actionsheet header
-    .k-actionsheet-header {
-        padding: $actionsheet-header-padding-y $actionsheet-header-padding-x;
+    // Actionsheet titlebar
+    .k-actionsheet-titlebar {
+        padding: $actionsheet-titlebar-padding-y $actionsheet-titlebar-padding-x;
         border-width: 0;
-        border-bottom-width: if( $actionsheet-header-border-width, $actionsheet-header-border-width, null );
+        border-bottom-width: if( $actionsheet-titlebar-border-width, $actionsheet-titlebar-border-width, null );
         border-style: solid;
         border-color: transparent;
-        box-sizing: border-box;
-        font-size: $actionsheet-header-font-size;
-        font-family: $actionsheet-header-font-family;
-        line-height: $actionsheet-header-line-height;
+        font-size: $actionsheet-titlebar-font-size;
+        font-family: $actionsheet-titlebar-font-family;
+        line-height: $actionsheet-titlebar-line-height;
         flex: none;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        gap: $actionsheet-titlebar-gap;
     }
-
-
-    // Actionsheet titlebar
-    .k-actionsheet-titlebar {
-        @extend .k-actionsheet-header !optional;
+    .k-actionsheet-titlebar-group {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
+        width: 100%;
     }
     .k-actionsheet-title {
         flex: 1;
     }
+    .k-actionsheet-subtitle {
+        font-size: $actionsheet-subtitle-font-size;
+        line-height: $actionsheet-subtitle-line-height;
+    }
     .k-actionsheet-actions {
         flex: none;
     }
@@ -24449,6 +25265,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
     .k-actionsheet-content {
         flex: 1;
         overflow: auto;
+        position: relative;
     }
 
 
@@ -24463,6 +25280,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
         margin: 0;
         padding: 0;
         list-style: none;
+        flex: none;
     }
 
 
@@ -24481,7 +25299,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
         outline: 0;
         display: flex;
         flex-flow: row nowrap;
-        align-items: center;
+        align-items: flex-start;
         gap: $actionsheet-item-spacing;
     }
     .k-actionsheet-item-icon {
@@ -24504,6 +25322,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
     .k-actionsheet > .k-hr {
         margin: 0;
         border-color: inherit;
+        flex: none;
     }
 
 
@@ -24540,6 +25359,12 @@ $actionsheet-item-disabled-opacity: .42 !default;
         top: 50%;
         transform: translateY( -50% );
     }
+    .k-actionsheet-fullscreen {
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        height: 100%;
+    }
 
 
     // Action sheet in popup
@@ -24561,6 +25386,28 @@ $actionsheet-item-disabled-opacity: .42 !default;
         display: flex;
         flex-flow: column nowrap;
 
+        .k-actionsheet-titlebar {
+            padding: $adaptive-actionsheet-titlebar-padding-y $adaptive-actionsheet-titlebar-padding-x;
+            border-bottom-width: $adaptive-actionsheet-titlebar-border-width;
+        }
+
+        .k-actionsheet-content {
+            padding: $adaptive-actionsheet-content-padding-y $adaptive-actionsheet-content-padding-x;
+        }
+
+        .k-actionsheet-footer {
+            padding: $adaptive-actionsheet-footer-padding-y $adaptive-actionsheet-footer-padding-x;
+        }
+
+        .k-list-container,
+        .k-treeview {
+            height: 100%;
+        }
+        .k-list-filter {
+            width: 100%;
+            padding-inline: 0;
+        }
+
         .k-calendar {
             margin-inline: auto;
             border-width: 0;
@@ -24580,6 +25427,58 @@ $actionsheet-item-disabled-opacity: .42 !default;
                 height: 100%;
             }
         }
+
+        .k-datetime-wrap {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-flow: column nowrap;
+        }
+        .k-datetime-selector {
+            flex: 1 1 auto;
+        }
+
+        .k-datetime-calendar-wrap {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            flex: 0 0 100%;
+        }
+
+        .k-datetime-time-wrap {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 100%;
+            bottom: 0;
+            flex: 0 0 100%;
+        }
+
+        .k-scrollable-wrap {
+            height: 100%;
+            overflow-y: auto;
+        }
+    }
+
+}
+
+@include exports("action-sheet/layout/legacy") {
+
+    .k-actionsheet-jq {
+        &.k-actionsheet {
+            height: auto;
+        }
+
+        .k-actionsheet-header {
+            @extend .k-actionsheet-titlebar !optional;
+            align-items: flex-start;
+        }
+
+        .k-actionsheet-action {
+            align-items: center;
+        }
     }
 
 }
@@ -24603,14 +25502,17 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
 
     // Actionsheet header
-    .k-actionsheet-header {
+    .k-actionsheet-titlebar {
         @include fill(
-            $actionsheet-header-text,
-            $actionsheet-header-bg,
-            $actionsheet-header-border,
-            $actionsheet-header-gradient
+            $actionsheet-titlebar-text,
+            $actionsheet-titlebar-bg,
+            $actionsheet-titlebar-border,
+            $actionsheet-titlebar-gradient
         );
-        @include box-shadow( $actionsheet-header-shadow );
+        @include box-shadow( $actionsheet-titlebar-shadow );
+    }
+    .k-actionsheet-subtitle {
+        @include fill( $color: $actionsheet-subtitle-text );
     }
 
 
@@ -24619,17 +25521,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
 
     // Actionsheet item
-    .k-actionsheet-item {}
-
-
-    // Actionsheet item description
-    .k-actionsheet-item-description {
-        @include fill( $color: $actionsheet-item-description-text );
-    }
-
-
-    // Actionsheet action
-    .k-actionsheet-action {
+    .k-actionsheet-item {
 
 
         // Hover state
@@ -24658,7 +25550,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
         }
 
 
-        // Disabed state
+        // Disabled state
         &:disabled,
         &.k-disabled {
             @include fill(
@@ -24671,6 +25563,22 @@ $actionsheet-item-disabled-opacity: .42 !default;
         }
     }
 
+
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+        @include fill( $color: $actionsheet-item-description-text );
+    }
+
+
+    // Actionsheet action
+    .k-actionsheet-action {}
+
+
+    // Adaptive Actionsheet
+    .k-adaptive-actionsheet .k-actionsheet-titlebar {
+        @include fill( $border: $adaptive-actionsheet-titlebar-border );
+    }
+
 }
 
 // #endregion
@@ -25117,15 +26025,15 @@ $drawer-font-size: $font-size !default;
 $drawer-line-height: $line-height !default;
 $drawer-content-padding-x: $padding-x !default;
 $drawer-content-padding-y: $padding-y !default;
-$drawer-item-level-padding-x: map-get( $spacing, 4 ) !default;
+$drawer-item-level-padding-x: k-map-get( $spacing, 4 ) !default;
 
 $drawer-item-level-count: 5 !default;
 
 $drawer-scrollbar-width: 7px !default;
-$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
+$drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
 $drawer-scrollbar-bg: #dedede !default;
 $drawer-scrollbar-radius: 20px !default;
-$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
+$drawer-scrollbar-hovered-color: rgba( 156, 156, 156, 1 ) !default;
 
 $drawer-item-padding-x: $padding-x !default;
 $drawer-item-padding-y: 12px !default;
@@ -25526,13 +26434,13 @@ $drawer-selected-hover-text: $secondary !default;
 $notification-padding-x: 16px !default;
 $notification-padding-y: 14px !default;
 $notification-border-width: 0px !default;
-$notification-border-radius: map-get( $spacing, 1 ) !default;
+$notification-border-radius: k-map-get( $spacing, 1 ) !default;
 
 $notification-shadow: $popup-shadow !default;
 
 $notification-font-family: $font-family !default;
 $notification-font-size: $font-size !default;
-$notification-line-height: ( 20 / 14 ) !default;
+$notification-line-height: k-math-div( 20, 14 ) !default;
 
 $notification-icon-offset: 2px !default;
 $notification-icon-spacing: $icon-spacing !default;
@@ -25546,8 +26454,8 @@ $notification-border: $component-border !default;
 
     // sass-lint:disable-block indentation
     @each $name, $color in $colors {
-        $_theme: map-merge(( $name: (
-            color: contrast-wcag( $color ),
+        $_theme: k-map-merge(( $name: (
+            color: k-contrast-color( $color ),
             background-color: $color,
             border: $color,
         )), $_theme );
@@ -25737,16 +26645,16 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/card/_variables.scss
 // Card
-$card-padding-x: map-get( $spacing, lg ) !default;
-$card-padding-y: map-get( $spacing, md ) !default;
+$card-padding-x: k-map-get( $spacing, lg ) !default;
+$card-padding-y: k-map-get( $spacing, md ) !default;
 $card-border-width: 0px !default;
 $card-border-radius: $kendo-border-radius-md !default;
 $card-inner-border-radius: calc( #{$card-border-radius} - #{$card-border-width} ) !default;
 $card-font-family: $font-family !default;
 $card-font-size: $font-size !default;
-$card-line-height: (20 / 14) !default;
+$card-line-height: k-math-div( 20, 14 ) !default;
 
-$card-deck-gap: map-get( $spacing, lg ) !default;
+$card-deck-gap: k-map-get( $spacing, lg ) !default;
 
 $card-bg: $component-bg !default;
 $card-text: $component-text !default;
@@ -25765,8 +26673,8 @@ $card-header-bg: null !default;
 $card-header-text: null !default;
 $card-header-border: $card-border !default;
 
-$card-body-padding-x: map-get( $spacing, lg ) !default;
-$card-body-padding-y: map-get( $spacing, lg ) !default;
+$card-body-padding-x: k-map-get( $spacing, lg ) !default;
+$card-body-padding-y: k-map-get( $spacing, lg ) !default;
 
 $card-footer-padding-x: $card-padding-x !default;
 $card-footer-padding-y: $card-padding-y !default;
@@ -25794,10 +26702,10 @@ $card-img-max-width: 100px !default;
 $card-avatar-size: 45px !default;
 $card-avatar-spacing: $card-header-padding-x !default;
 
-$card-actions-padding-x: map-get( $spacing, 2 ) !default;
-$card-actions-padding-y: map-get( $spacing, 2 ) !default;
+$card-actions-padding-x: k-map-get( $spacing, 2 ) !default;
+$card-actions-padding-y: k-map-get( $spacing, 2 ) !default;
 $card-actions-border-width: 1px !default;
-$card-actions-gap: map-get( $spacing, 2 ) !default;
+$card-actions-gap: k-map-get( $spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 50% !default;
 $card-deck-scroll-button-offset: ( $card-deck-gap / 2 ) !default;
@@ -26619,20 +27527,20 @@ $bottom-nav-font-size: $font-size !default;
 $bottom-nav-line-height: normal !default;
 $bottom-nav-letter-spacing: .2px !default;
 
-$bottom-nav-item-padding-x: map-get( $spacing, 2 ) !default;
+$bottom-nav-item-padding-x: k-map-get( $spacing, 2 ) !default;
 $bottom-nav-item-padding-y: 0 !default;
 $bottom-nav-item-min-width: 72px !default;
 $bottom-nav-item-max-width: null !default;
 $bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{$padding-x-sm * 2} - #{$bottom-nav-padding-x * 2} ) !default;
 $bottom-nav-item-border-radius: null !default;
-$bottom-nav-item-gap: 0 map-get( $spacing, 1 ) !default;
+$bottom-nav-item-gap: 0 k-map-get( $spacing, 1 ) !default;
 
-$bottom-nav-item-icon-margin-y: map-get( $spacing, 2 ) !default;
+$bottom-nav-item-icon-margin-y: k-map-get( $spacing, 2 ) !default;
 $bottom-nav-item-icon-margin-x: $bottom-nav-item-icon-margin-y !default;
-$bottom-nav-item-icon-size: map-get( $spacing, 6 ) !default;
+$bottom-nav-item-icon-size: k-map-get( $spacing, 6 ) !default;
 $bottom-nav-item-disabled-opacity: .5 !default;
 
-$bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
+$bottom-nav-shadow: 0px 0px 5px rgba( black, .12 ) !default;
 
 $bottom-nav-flat-bg: $component-bg !default;
 $bottom-nav-flat-text: $component-text !default;
@@ -26878,7 +27786,7 @@ $breadcrumb-link-hovered-bg: $hovered-bg !default;
 $breadcrumb-link-hovered-text: null !default;
 $breadcrumb-link-hovered-border: null !default;
 
-$breadcrumb-link-focused-bg: map-get( $theme, focus-bg ) !default;
+$breadcrumb-link-focused-bg: k-map-get( $theme, focus-bg ) !default;
 $breadcrumb-link-focused-text: null !default;
 $breadcrumb-link-focused-border: null !default;
 $breadcrumb-link-focused-shadow: null !default;
@@ -26891,12 +27799,12 @@ $breadcrumb-root-link-hovered-bg: $hovered-bg !default;
 $breadcrumb-root-link-hovered-text: null !default;
 $breadcrumb-root-link-hovered-border: null !default;
 
-$breadcrumb-root-link-focused-bg: map-get( $theme, focus-bg ) !default;
+$breadcrumb-root-link-focused-bg: k-map-get( $theme, focus-bg ) !default;
 $breadcrumb-root-link-focused-text: null !default;
 $breadcrumb-root-link-focused-border: null !default;
 $breadcrumb-root-link-focused-shadow: null !default;
 
-$breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+$breadcrumb-focused-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/breadcrumb/_layout.scss
@@ -27155,8 +28063,8 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/pager/_variables.scss
 // Pager
-$pager-padding-x: map-get( $spacing, 2 ) !default;
-$pager-padding-y: map-get( $spacing, 2 ) !default;
+$pager-padding-x: k-map-get( $spacing, 2 ) !default;
+$pager-padding-y: k-map-get( $spacing, 2 ) !default;
 $pager-border-width: 1px !default;
 
 $pager-font-family: $font-family !default;
@@ -27167,7 +28075,7 @@ $pager-bg: $component-bg !default;
 $pager-text: if($dark-theme, $light-secondary-text, $dark-secondary-text) !default;
 $pager-border: $component-border !default;
 
-$pager-focus-bg: try-shade( $pager-bg, .5 ) !default;
+$pager-focus-bg: k-try-shade( $pager-bg, .5 ) !default;
 $pager-focus-shadow: null !default;
 
 $pager-section-spacing: $pager-padding-x !default;
@@ -27197,7 +28105,7 @@ $pager-number-border-radius: $pager-item-border-radius !default;
 $pager-number-spacing: $pager-item-spacing !default;
 
 $pager-item-focus-opacity: .12 !default;
-$pager-item-focus-bg: rgba($kendo-list-item-hover-bg, $pager-item-focus-opacity) !default;
+$pager-item-focus-bg: rgba( $kendo-list-item-hover-bg, $pager-item-focus-opacity ) !default;
 $pager-item-focus-shadow: null !default;
 
 $pager-number-bg: null !default;
@@ -27205,17 +28113,17 @@ $pager-number-text: $body-text !default;
 $pager-number-border: null !default;
 
 $pager-number-hover-opacity: .04 !default;
-$pager-number-hover-bg: rgba($pager-number-text, $pager-number-hover-opacity) !default;
+$pager-number-hover-bg: rgba( $pager-number-text, $pager-number-hover-opacity ) !default;
 $pager-number-hover-text: $pager-number-text !default;
 $pager-number-hover-border: null !default;
 
 $pager-number-selected-opacity: .22 !default;
-$pager-number-selected-bg: rgba($primary, $pager-number-selected-opacity) !default;
+$pager-number-selected-bg: rgba( $primary, $pager-number-selected-opacity ) !default;
 $pager-number-selected-text: $primary !default;
 $pager-number-selected-border: null !default;
 
 $pager-number-focus-opacity: .12 !default;
-$pager-number-focus-bg: rgba($pager-number-text, $pager-number-focus-opacity) !default;
+$pager-number-focus-bg: rgba( $pager-number-text, $pager-number-focus-opacity ) !default;
 $pager-number-focus-shadow: null !default;
 
 $pager-input-width: 5em !default;
@@ -27747,7 +28655,7 @@ $stepper-indicator-bg: $component-bg !default;
 $stepper-indicator-text: $component-text !default;
 $stepper-indicator-border: $component-border !default;
 
-$stepper-indicator-hover-bg: try-shade( $stepper-indicator-bg ) !default;
+$stepper-indicator-hover-bg: k-try-shade( $stepper-indicator-bg ) !default;
 $stepper-indicator-hover-text: null !default;
 $stepper-indicator-hover-border: null !default;
 
@@ -27756,15 +28664,15 @@ $stepper-indicator-disabled-text: $disabled-text !default;
 $stepper-indicator-disabled-border: null !default;
 
 $stepper-indicator-done-bg: $primary !default;
-$stepper-indicator-done-text: contrast-wcag( $stepper-indicator-done-bg ) !default;
+$stepper-indicator-done-text: k-contrast-color( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-border: $stepper-indicator-done-bg !default;
 
-$stepper-indicator-done-hover-bg: try-shade( $stepper-indicator-done-bg ) !default;
+$stepper-indicator-done-hover-bg: k-try-shade( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-hover-text: null !default;
 $stepper-indicator-done-hover-border: null !default;
 
-$stepper-indicator-done-disabled-bg: mix( $stepper-indicator-done-bg, $component-bg, 60%) !default;
-$stepper-indicator-done-disabled-text: contrast-wcag( $stepper-indicator-done-bg ) !default;
+$stepper-indicator-done-disabled-bg: k-color-mix( $stepper-indicator-done-bg, $component-bg, 60%) !default;
+$stepper-indicator-done-disabled-text: k-contrast-color( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-disabled-border: $stepper-indicator-done-disabled-bg !default;
 
 $stepper-indicator-current-bg: $stepper-indicator-done-bg !default;
@@ -27783,7 +28691,7 @@ $stepper-label-text: null !default;
 $stepper-label-success-text: $success !default;
 $stepper-label-error-text: $error !default;
 $stepper-label-hover-text: null !default;
-$stepper-label-disabled-text: map-get( $theme, disabled-text ) !default;
+$stepper-label-disabled-text: k-map-get( $theme, disabled-text ) !default;
 
 $stepper-optional-label-text: $subtle-text !default;
 $stepper-optional-label-opacity: null !default;
@@ -28389,7 +29297,7 @@ $tabstrip-item-hovered-text: $body-text !default;
 /// Border color of hovered tabs
 /// @group tabstrip
 $tabstrip-item-hovered-border: null !default;
-/// Background gradent of hovered tabs
+/// Background gradient of hovered tabs
 /// @group tabstrip
 $tabstrip-item-hovered-gradient: null !default;
 
@@ -28408,17 +29316,17 @@ $tabstrip-item-selected-gradient: null !default;
 
 $tabstrip-item-focused-shadow: $kendo-list-item-focus-shadow !default;
 
-$tabstrip-item-dragging-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2) !default;
+$tabstrip-item-dragging-shadow: 0 4px 5px 0 rgba( black, .14 ), 0 1px 10px 0 rgba( black, .12 ), 0 2px 4px -1px rgba( black, .2 ) !default;
 
 $tabstrip-indicator-size: 2px !default;
 $tabstrip-indicator-color: $primary !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-x: map-get( $spacing, 4 ) !default;
+$tabstrip-content-padding-x: k-map-get( $spacing, 4 ) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-y: map-get( $spacing, 4 ) !default;
+$tabstrip-content-padding-y: k-map-get( $spacing, 4 ) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $tabstrip-content-border-width: 0px !default;
@@ -28935,7 +29843,7 @@ $tabstrip-content-border-focused: $component-text !default;
     .k-tabstrip-items {
 
         .k-disabled {
-            color: map-get( $theme, disabled-text );
+            color: k-map-get( $theme, disabled-text );
         }
 
     }
@@ -28987,7 +29895,7 @@ $wizard-line-height: $line-height !default;
 $wizard-font-family: $font-family !default;
 
 $wizard-step-border-focused: #656565 !default;
-$wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$wizard-focused-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/wizard/_layout.scss
@@ -29188,13 +30096,13 @@ $expander-bg: $component-bg !default;
 $expander-text: $component-text !default;
 $expander-border: $component-border !default;
 
-$expander-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$expander-focus-shadow: inset 0 0 0 2px rgba( black, .08 ) !default;
 
 $expander-header-bg: transparent !default;
 $expander-header-text: $expander-text !default;
 $expander-header-border: null !default;
 
-$expander-header-hover-bg: rgba(0, 0, 0, .04) !default;
+$expander-header-hover-bg: rgba( black, .04 ) !default;
 
 $expander-header-focused-bg: rgba( black, .12 ) !default;
 $expander-header-focused-shadow: none !default;
@@ -29361,17 +30269,17 @@ $panelbar-padding-x: 0px !default;
 $panelbar-padding-y: 0px !default;
 $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
-$panelbar-line-height: (20 / 14) !default;
+$panelbar-line-height: k-math-div( 20, 14 ) !default;
 $panelbar-border-width: 1px !default;
 $panelbar-border-style: solid !default;
 $panelbar-item-border-width: 1px !default;
 $panelbar-item-border-style: solid !default;
 
-$panelbar-header-padding-x: map-get( $spacing, 6 ) !default;
-$panelbar-header-padding-y: map-get( $spacing, 3 ) !default;
+$panelbar-header-padding-x: k-map-get( $spacing, 6 ) !default;
+$panelbar-header-padding-y: k-map-get( $spacing, 3 ) !default;
 
-$panelbar-item-padding-x: map-get( $spacing, 6 ) !default;
-$panelbar-item-padding-y: map-get( $spacing, 3 ) !default;
+$panelbar-item-padding-x: k-map-get( $spacing, 6 ) !default;
+$panelbar-item-padding-y: k-map-get( $spacing, 3 ) !default;
 
 $panelbar-item-level-count: 4 !default;
 
@@ -29384,18 +30292,18 @@ $panelbar-header-text: $link-text !default;
 $panelbar-header-border: null !default;
 $panelbar-header-gradient: null !default;
 
-$panelbar-header-hovered-bg: try-shade( $panelbar-header-bg, .5 ) !default;
+$panelbar-header-hovered-bg: k-try-shade( $panelbar-header-bg, .5 ) !default;
 $panelbar-header-hovered-text: null !default;
 $panelbar-header-hovered-border: null !default;
 $panelbar-header-hovered-gradient: null !default;
 
-$panelbar-header-focused-bg: try-shade( $panelbar-header-bg, 1.5 ) !default;
+$panelbar-header-focused-bg: k-try-shade( $panelbar-header-bg, 1.5 ) !default;
 $panelbar-header-focused-text: null !default;
 $panelbar-header-focused-border: null !default;
 $panelbar-header-focused-gradient: null !default;
 $panelbar-header-focused-shadow: null !default;
 
-$panelbar-header-hovered-focused-bg: try-shade( $panelbar-header-bg, 2 ) !default;
+$panelbar-header-hovered-focused-bg: k-try-shade( $panelbar-header-bg, 2 ) !default;
 $panelbar-header-hovered-focused-text: null !default;
 $panelbar-header-hovered-focused-border: null !default;
 $panelbar-header-hovered-focused-gradient: null !default;
@@ -29405,34 +30313,34 @@ $panelbar-header-selected-text: $selected-text !default;
 $panelbar-header-selected-border: null !default;
 $panelbar-header-selected-gradient: null !default;
 
-$panelbar-header-selected-hovered-bg: try-tint($panelbar-header-selected-bg, .95) !default;
+$panelbar-header-selected-hovered-bg: k-try-tint($panelbar-header-selected-bg, .95) !default;
 $panelbar-header-selected-hovered-text: null !default;
 $panelbar-header-selected-hovered-border: null !default;
 $panelbar-header-selected-hovered-gradient: null !default;
 
-$panelbar-header-selected-focused-bg: try-tint($panelbar-header-selected-bg, 3) !default;
+$panelbar-header-selected-focused-bg: k-try-tint($panelbar-header-selected-bg, 3) !default;
 $panelbar-header-selected-focused-text: null !default;
 $panelbar-header-selected-focused-border: null !default;
 $panelbar-header-selected-focused-gradient: null !default;
 
-$panelbar-header-selected-hovered-focused-bg: try-tint($panelbar-header-selected-bg, 3.95) !default;
+$panelbar-header-selected-hovered-focused-bg: k-try-tint($panelbar-header-selected-bg, 3.95) !default;
 $panelbar-header-selected-hovered-focused-text: null !default;
 $panelbar-header-selected-hovered-focused-border: null !default;
 $panelbar-header-selected-hovered-focused-gradient: null !default;
 
 
-$panelbar-item-hovered-bg: try-shade( $panelbar-bg, .5 ) !default;
+$panelbar-item-hovered-bg: k-try-shade( $panelbar-bg, .5 ) !default;
 $panelbar-item-hovered-text: null !default;
 $panelbar-item-hovered-border: null !default;
 $panelbar-item-hovered-gradient: null !default;
 
-$panelbar-item-focused-bg: try-shade( $panelbar-header-bg, 1.5 ) !default;
+$panelbar-item-focused-bg: k-try-shade( $panelbar-header-bg, 1.5 ) !default;
 $panelbar-item-focused-text: null !default;
 $panelbar-item-focused-border: null !default;
 $panelbar-item-focused-gradient: null !default;
 $panelbar-item-focused-shadow: null !default;
 
-$panelbar-item-hovered-focused-bg: try-shade( $panelbar-header-bg, 2 ) !default;
+$panelbar-item-hovered-focused-bg: k-try-shade( $panelbar-header-bg, 2 ) !default;
 $panelbar-item-hovered-focused-text: null !default;
 $panelbar-item-hovered-focused-border: null !default;
 $panelbar-item-hovered-focused-gradient: null !default;
@@ -29442,17 +30350,17 @@ $panelbar-item-selected-text: $selected-text !default;
 $panelbar-item-selected-border: null !default;
 $panelbar-item-selected-gradient: null !default;
 
-$panelbar-item-selected-hovered-bg: try-tint($panelbar-item-selected-bg, .95) !default;
+$panelbar-item-selected-hovered-bg: k-try-tint($panelbar-item-selected-bg, .95) !default;
 $panelbar-item-selected-hovered-text: null !default;
 $panelbar-item-selected-hovered-border: null !default;
 $panelbar-item-selected-hovered-gradient: null !default;
 
-$panelbar-item-selected-focused-bg: try-tint($panelbar-item-selected-bg, 3) !default;
+$panelbar-item-selected-focused-bg: k-try-tint($panelbar-item-selected-bg, 3) !default;
 $panelbar-item-selected-focused-text: null !default;
 $panelbar-item-selected-focused-border: null !default;
 $panelbar-item-selected-focused-gradient: null !default;
 
-$panelbar-item-selected-hovered-focused-bg: try-tint($panelbar-item-selected-bg, 3.95) !default;
+$panelbar-item-selected-hovered-focused-bg: k-try-tint($panelbar-item-selected-bg, 3.95) !default;
 $panelbar-item-selected-hovered-focused-text: null !default;
 $panelbar-item-selected-hovered-focused-border: null !default;
 $panelbar-item-selected-hovered-focused-gradient: null !default;
@@ -29912,10 +30820,10 @@ $splitter-drag-handle-length: 20px !default;
 $splitter-drag-handle-thickness: 2px !default;
 $splitter-drag-icon-margin: 7px !default;
 
-$splitbar-bg: try-shade( $splitter-bg, 1 ) !default;
+$splitbar-bg: k-try-shade( $splitter-bg, 1 ) !default;
 $splitbar-text: $subtle-text !default;
 
-$splitbar-hover-bg: try-shade( $splitbar-bg, .5 ) !default;
+$splitbar-hover-bg: k-try-shade( $splitbar-bg, .5 ) !default;
 $splitbar-hover-text: $splitbar-text !default;
 
 $splitbar-selected-bg: $primary !default;
@@ -30201,7 +31109,7 @@ $tilelayout-hint-border-radius: $kendo-border-radius-md !default;
 
 $tilelayout-bg: if( $dark-theme, $dark, $light) !default;
 
-$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
+$tilelayout-hint-bg: rgba( white, .2 ) !default;
 $tilelayout-hint-border: $component-border !default;
 
 // #endregion
@@ -30330,7 +31238,7 @@ $adaptive-content-bg: $app-bg !default;
 $adaptive-content-text: $app-text !default;
 
 $adaptive-menu-bg: $primary !default;
-$adaptive-menu-text: contrast-wcag( $adaptive-menu-bg ) !default;
+$adaptive-menu-text: k-contrast-color( $adaptive-menu-bg ) !default;
 
 $adaptive-menu-clear-text: $primary !default;
 
@@ -33079,7 +33987,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 // #endregion
 
 @include exports ("grid/theme/material") {
-    $grid-filter-button-focus: rgba(0, 0, 0, .12) !default;
+    $grid-filter-button-focus: rgba( black, .12 ) !default;
 
     .k-grid {
 
@@ -33371,8 +34279,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/listview/_variables.scss
 // Listview
-$listview-padding-x: map-get( $spacing, 1 ) !default;
-$listview-padding-y: map-get( $spacing, 1 ) !default;
+$listview-padding-x: k-map-get( $spacing, 1 ) !default;
+$listview-padding-y: k-map-get( $spacing, 1 ) !default;
 $listview-border-width: 1px !default;
 $listview-font-family: $font-family !default;
 $listview-font-size: $font-size !default;
@@ -33384,14 +34292,14 @@ $listview-border: $component-border !default;
 
 $listview-grid-gap: 10px !default;
 
-$listview-item-padding-x: map-get( $spacing, 1 ) !default;
-$listview-item-padding-y: map-get( $spacing, 1 ) !default;
+$listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
+$listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
 
-$listview-item-selected-bg: rgba( contrast-wcag( $listview-bg ), .04 ) !default;
+$listview-item-selected-bg: rgba( k-contrast-color( $listview-bg ), .04 ) !default;
 $listview-item-selected-text: null !default;
 $listview-item-selected-border: null !default;
 
-$listview-item-focus-bg: rgba( contrast-wcag( $listview-bg ), .08 ) !default;
+$listview-item-focus-bg: rgba( k-contrast-color( $listview-bg ), .08 ) !default;
 $listview-item-focus-text: null !default;
 $listview-item-focus-border: null !default;
 $listview-item-focus-shadow: null !default;
@@ -33586,7 +34494,7 @@ $listview-item-focus-shadow: null !default;
     // Listview content
     .k-listview-content {}
     .k-listview-content > .k-selected.k-focus {
-        background-color: rgba( contrast-wcag( $listview-bg ), .12 );
+        background-color: rgba( k-contrast-color( $listview-bg ), .12 );
     }
 
 }
@@ -33671,7 +34579,7 @@ $spreadsheet-insert-image-dialog-preview-height: 230px !default;
 $spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
 $spreadsheet-insert-image-dialog-preview-border: $component-border !default;
 $spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
-$spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
+$spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba( black, .5 ) !default;
 $spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-overlay-hovered-text: $component-bg !default;
 
@@ -34620,7 +35528,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
 
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
-        padding: map-get( $spacing, 1 );
+        padding: k-map-get( $spacing, 1 );
 
         .k-button {
             border-radius: 50%;
@@ -34643,7 +35551,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         padding: 0;
 
         .k-spreadsheet-sheets-bar-add {
-            margin: map-get( $spacing, 1 );
+            margin: k-map-get( $spacing, 1 );
             border-radius: 50%;
             color: inherit;
             background: none;
@@ -34720,7 +35628,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
     .k-spreadsheet-sheets-bar {
         @include fill(
             $toolbar-text,
-            try-shade( $toolbar-bg, .5 ),
+            k-try-shade( $toolbar-bg, .5 ),
             inherit,
             $toolbar-gradient
         );
@@ -34736,7 +35644,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
     .k-spreadsheet-row-header,
     .k-spreadsheet-column-header {
         border-color: $component-border;
-        background-color: try-shade( $component-bg, 1 );
+        background-color: k-try-shade( $component-bg, 1 );
     }
 
 
@@ -35015,7 +35923,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/pivotgrid/_variables.scss
 // Pivot grid
-$pivotgrid-spacer: map-get( $spacing, 4 ) !default;
+$pivotgrid-spacer: k-map-get( $spacing, 4 ) !default;
 $pivotgrid-padding-x: null !default;
 $pivotgrid-padding-y: null !default;
 $pivotgrid-font-family: $font-family !default;
@@ -35035,21 +35943,21 @@ $pivotgrid-bg: $component-bg !default;
 $pivotgrid-text: $component-text !default;
 $pivotgrid-border: $component-border !default;
 
-$pivotgrid-alt-border: try-shade($pivotgrid-border, 2) !default;
+$pivotgrid-alt-border: k-try-shade( $pivotgrid-border, 2 ) !default;
 
-$pivotgrid-headers-bg: rgba($header-bg, .02) !default;
+$pivotgrid-headers-bg: rgba( $header-bg, .02 ) !default;
 $pivotgrid-headers-text: $header-text !default;
 $pivotgrid-headers-border: $header-border !default;
 
-$pivotgrid-total-bg: try-shade( $pivotgrid-bg, 1 ) !default;
+$pivotgrid-total-bg: k-try-shade( $pivotgrid-bg, 1 ) !default;
 $pivotgrid-total-text: $header-text !default;
 $pivotgrid-total-border: $header-border !default;
 
-$pivotgrid-hover-bg: darken($pivotgrid-bg, 7%) !default;
+$pivotgrid-hover-bg: darken( $pivotgrid-bg, 7% ) !default;
 $pivotgrid-hover-text: null !default;
 $pivotgrid-hover-border: null !default;
 
-$pivotgrid-selected-bg: rgba( contrast-wcag( $pivotgrid-bg ), .04 ) !default;
+$pivotgrid-selected-bg: rgba( k-contrast-color( $pivotgrid-bg ), .04 ) !default;
 $pivotgrid-selected-text: null !default;
 $pivotgrid-selected-border: null !default;
 
@@ -35082,13 +35990,13 @@ $pivotgrid-configurator-header-bg: null !default;
 $pivotgrid-configurator-header-text: $header-text !default;
 $pivotgrid-configurator-header-border: null !default;
 
-$pivotgrid-configurator-end-shadow: -3px 0px 6px rgba(0, 0, 0, .16) !default;
-$pivotgrid-configurator-start-shadow: 3px 0px 6px rgba(0, 0, 0, .16) !default;
-$pivotgrid-configurator-top-shadow: 0px -3px 6px rgba(0, 0, 0, .16) !default;
-$pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba(0, 0, 0, .16) !default;
+$pivotgrid-configurator-end-shadow: -3px 0px 6px rgba( black, .16 ) !default;
+$pivotgrid-configurator-start-shadow: 3px 0px 6px rgba( black, .16 ) !default;
+$pivotgrid-configurator-top-shadow: 0px -3px 6px rgba( black, .16 ) !default;
+$pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba( black, .16 ) !default;
 
-$pivotgrid-configurator-button-padding-x: map-get($spacing, 1) !default;
-$pivotgrid-configurator-button-padding-y: map-get($spacing, 1) !default;
+$pivotgrid-configurator-button-padding-x: k-map-get( $spacing, 1 ) !default;
+$pivotgrid-configurator-button-padding-y: k-map-get( $spacing, 1 ) !default;
 $pivotgrid-configurator-button-border-width: 1px !default;
 $pivotgrid-configurator-button-size: calc( #{$pivotgrid-line-height * 1em} + #{$pivotgrid-configurator-button-padding-y * 2} + #{$pivotgrid-configurator-button-border-width * 2} ) !default;
 
@@ -35118,11 +36026,11 @@ $pivotgrid-chrome-border: $grid-border !default;
 $pivotgrid-container-bg: $grid-header-bg !default;
 $pivotgrid-row-headers-bg: null !default;
 
-$pivotgrid-button-bg: try-shade($kendo-button-bg, 1) !default;
+$pivotgrid-button-bg: k-try-shade($kendo-button-bg, 1) !default;
 $pivotgrid-button-text: $kendo-button-text !default;
-$pivotgrid-button-hover-bg: try-shade($kendo-button-bg, 2) !default;
+$pivotgrid-button-hover-bg: k-try-shade($kendo-button-bg, 2) !default;
 $pivotgrid-button-hover-text: $kendo-button-text !default;
-$pivotgrid-button-active-bg: try-shade($kendo-button-bg, 2) !default;
+$pivotgrid-button-active-bg: k-try-shade($kendo-button-bg, 2) !default;
 $pivotgrid-button-active-text: $kendo-button-text !default;
 
 $pivotgrid-remove-bg: $pivotgrid-button-text !default;
@@ -36362,6 +37270,8 @@ $filter-operator-dropdown-width: 15em !default;
 $filter-preview-field-text: $primary !default;
 $filter-preview-operator-text: $subtle-text !default;
 
+$filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/filter/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/filter/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/filter/_layout.scss
@@ -36513,6 +37423,12 @@ $filter-preview-operator-text: $subtle-text !default;
         .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             background-color: $component-border;
         }
+
+        // Focus
+        .k-toolbar:focus,
+        .k-toolbar.k-focus {
+            @include box-shadow( $filter-toolbar-focus-shadow );
+        }
     }
 
 }
@@ -36570,7 +37486,7 @@ $filter-preview-operator-text: $subtle-text !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/filemanager/_variables.scss
 // File manager
-$filemanager-spacer: map-get( $spacing, 4 ) !default;
+$filemanager-spacer: k-map-get( $spacing, 4 ) !default;
 $filemanager-border-width: 1px !default;
 $filemanager-font-family: $font-family !default;
 $filemanager-font-size: $font-size !default;
@@ -36580,7 +37496,7 @@ $filemanager-text: $component-text !default;
 $filemanager-border: $component-border !default;
 
 $filemanager-toolbar-border-width: $filemanager-border-width !default;
-$filemanager-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$filemanager-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $filemanager-toolbar-text: null !default;
 $filemanager-toolbar-border: null !default;
 $filemanager-toolbar-gradient: null !default;
@@ -36593,8 +37509,8 @@ $filemanager-navigation-bg: null !default;
 $filemanager-navigation-text: null !default;
 $filemanager-navigation-border: null !default;
 
-$filemanager-breadcrumb-padding-x: map-get( $spacing, 2 ) !default;
-$filemanager-breadcrumb-padding-y: map-get( $spacing, 2 ) !default;
+$filemanager-breadcrumb-padding-x: k-map-get( $spacing, 2 ) !default;
+$filemanager-breadcrumb-padding-y: k-map-get( $spacing, 2 ) !default;
 $filemanager-breadcrumb-border-width: $filemanager-border-width !default;
 $filemanager-breadcrumb-bg: $filemanager-toolbar-bg !default;
 $filemanager-breadcrumb-text: null !default;
@@ -36604,8 +37520,8 @@ $filemanager-listview-bg: null !default;
 $filemanager-listview-text: null !default;
 $filemanager-listview-border: null !default;
 
-$filemanager-listview-item-padding-x: map-get( $spacing, 4 ) !default;
-$filemanager-listview-item-padding-y: map-get( $spacing, 4 ) !default;
+$filemanager-listview-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$filemanager-listview-item-padding-y: k-map-get( $spacing, 4 ) !default;
 $filemanager-listview-item-width: 120px !default;
 $filemanager-listview-item-height: 120px !default;
 $filemanager-listview-item-bg: null !default;
@@ -36614,7 +37530,7 @@ $filemanager-listview-item-border: null !default;
 
 $filemanager-listview-item-icon-size: ($icon-size * 3) !default;
 $filemanager-listview-item-icon-bg: null !default;
-$filemanager-listview-item-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-listview-item-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-listview-item-icon-border: null !default;
 $filemanager-listview-item-icon-selected-bg: null !default;
 $filemanager-listview-item-icon-selected-text: inherit !default;
@@ -36635,7 +37551,7 @@ $filemanager-preview-border: null !default;
 
 $filemanager-preview-icon-size: ($icon-size * 6) !default;
 $filemanager-preview-icon-bg: null !default;
-$filemanager-preview-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-preview-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-preview-icon-border: null !default;
 
 // #endregion
@@ -37039,7 +37955,7 @@ $filemanager-preview-icon-border: null !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/taskboard/_variables.scss
 // TaskBoard
-$taskboard-spacer: map-get( $spacing, 4 ) !default;
+$taskboard-spacer: k-map-get( $spacing, 4 ) !default;
 $taskboard-padding-y: null !default;
 $taskboard-padding-x: null !default;
 $taskboard-font-family: $font-family !default;
@@ -37059,9 +37975,9 @@ $taskboard-toolbar-gradient: null !default;
 $taskboard-content-padding-y: $taskboard-spacer !default;
 $taskboard-content-padding-x: $taskboard-content-padding-y !default;
 
-$taskboard-column-container-spacing-y: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-container-spacing-y: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-column-container-padding-y: 0px !default;
-$taskboard-column-container-padding-x: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-container-padding-x: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-columns-container-gap: $taskboard-spacer !default;
 
 $taskboard-column-width: 320px !default;
@@ -37073,7 +37989,7 @@ $taskboard-column-border: transparent !default;
 
 $taskboard-column-focus-bg: null !default;
 $taskboard-column-focus-text: null !default;
-$taskboard-column-focus-border: try-shade( $base-border, 2.5 ) !default;
+$taskboard-column-focus-border: k-try-shade( $base-border, 2.5 ) !default;
 
 $taskboard-column-header-padding-y: ( $taskboard-spacer / 2 ) !default;
 $taskboard-column-header-padding-x: $taskboard-column-header-padding-y !default;
@@ -37116,10 +38032,10 @@ $taskboard-card-shadow: none !default;
 
 $taskboard-card-category-border-width: 4px !default;
 
-$taskboard-card-focus-border: try-shade( $taskboard-card-border, 9% ) !default;
+$taskboard-card-focus-border: k-try-shade( $taskboard-card-border, 9% ) !default;
 $taskboard-card-focus-shadow: none !default;
 
-$taskboard-card-hover-border: try-shade( $taskboard-card-border, 10% ) !default;
+$taskboard-card-hover-border: k-try-shade( $taskboard-card-border, 10% ) !default;
 
 $taskboard-card-selected-border: $primary-lighter !default;
 $taskboard-card-selected-shadow: none !default;
@@ -37130,7 +38046,7 @@ $taskboard-card-header-hover-text: $primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;
-$taskboard-drag-placeholder-bg: rgba(255, 255, 255, .2) !default;
+$taskboard-drag-placeholder-bg: rgba( white, .2 ) !default;
 $taskboard-drag-placeholder-border: $component-border !default;
 
 // #endregion
@@ -37550,7 +38466,7 @@ $editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 $editor-selected-text: $primary-contrast !default;
 $editor-selected-bg: $primary !default;
 
-$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
+$editor-highlighted-bg: k-color-mix($primary, #ffffff, 20%) !default;
 
 $editor-export-tool-icon-margin-x: .5em !default;
 
@@ -38462,8 +39378,8 @@ $imageeditor-font-family: $font-family !default;
 
 $imageeditor-content-border-width: 1px !default;
 
-$imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
-$imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
+$imageeditor-action-pane-padding-y: k-map-get( $spacing, 8 ) !default;
+$imageeditor-action-pane-padding-x: k-map-get( $spacing, 4 ) !default;
 $imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
 
 $imageeditor-crop-border-width: 1px !default;
@@ -38490,7 +39406,7 @@ $imageeditor-crop-bg: null !default;
 $imageeditor-crop-text: null !default;
 $imageeditor-crop-border: white !default;
 
-$imageeditor-crop-overlay-bg: rgba(black, .3) !default;
+$imageeditor-crop-overlay-bg: rgba( black, .3 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/imageeditor/_layout.scss
@@ -38779,12 +39695,12 @@ $gantt-treelist-bg: null !default;
 $gantt-treelist-text: null !default;
 $gantt-treelist-border: null !default;
 
-$gantt-nonwork-bg: rgba( contrast-wcag( $gantt-bg ), .025 ) !default;
+$gantt-nonwork-bg: rgba( k-contrast-color( $gantt-bg ), .025 ) !default;
 $gantt-nonwork-text: null !default;
 $gantt-nonwork-border: null !default;
 
 $gantt-line-size: 2px !default;
-$gantt-line-fill: mix( $panel-text, $panel-bg ) !default;
+$gantt-line-fill: k-color-mix( $panel-text, $panel-bg ) !default;
 $gantt-line-selected-fill: $selected-bg !default;
 
 $gantt-dot-size: 8px !default;
@@ -38799,19 +39715,19 @@ $gantt-milestone-border: $primary !default;
 $gantt-milestone-selected-bg: $secondary !default;
 $gantt-milestone-selected-border: $secondary !default;
 
-$gantt-summary-bg: mix( $primary, $gantt-bg ) !default;
+$gantt-summary-bg: k-color-mix( $primary, $gantt-bg ) !default;
 $gantt-summary-progress-bg: $primary !default;
-$gantt-summary-selected-bg: mix( $secondary, $gantt-bg ) !default;
+$gantt-summary-selected-bg: k-color-mix( $secondary, $gantt-bg ) !default;
 $gantt-summary-progress-selected-bg: $secondary !default;
 
-$gantt-task-padding-x: map-get( $spacing, 2 ) !default;
-$gantt-task-padding-y: map-get( $spacing, 1 ) !default;
+$gantt-task-padding-x: k-map-get( $spacing, 2 ) !default;
+$gantt-task-padding-y: k-map-get( $spacing, 1 ) !default;
 $gantt-task-border-width: 0px !default;
-$gantt-task-bg: mix( $primary, $gantt-bg ) !default;
+$gantt-task-bg: k-color-mix( $primary, $gantt-bg ) !default;
 $gantt-task-text: $primary-contrast !default;
 $gantt-task-border: null !default;
 $gantt-task-progress-bg: $primary !default;
-$gantt-task-selected-bg: mix( $secondary, $gantt-bg ) !default;
+$gantt-task-selected-bg: k-color-mix( $secondary, $gantt-bg ) !default;
 $gantt-task-selected-text: $secondary-contrast !default;
 $gantt-task-selected-border: null !default;
 $gantt-task-progress-selected-bg: $secondary !default;
@@ -38845,10 +39761,10 @@ $gantt-planned-bg: $primary !default;
 $gantt-planned-border: $gantt-planned-bg !default;
 
 $gantt-delayed-bg: $error !default;
-$gantt-delayed-bg-lighter: tint($gantt-delayed-bg, 5) !default;
+$gantt-delayed-bg-lighter: k-color-tint($gantt-delayed-bg, 5) !default;
 
 $gantt-advanced-bg: $success !default;
-$gantt-advanced-bg-lighter: tint($gantt-advanced-bg, 5) !default;
+$gantt-advanced-bg-lighter: k-color-tint($gantt-advanced-bg, 5) !default;
 
 $gantt-action-on-offset-text: #000000 !default;
 $gantt-offset-resize-handler-top: 50% !default;
@@ -40105,12 +41021,12 @@ $scheduler-bg: $component-bg !default;
 $scheduler-text: $component-text !default;
 $scheduler-border: $component-border !default;
 
-$scheduler-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$scheduler-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $scheduler-toolbar-text: null !default;
 $scheduler-toolbar-border: null !default;
 $scheduler-toolbar-gradient: null !default;
 
-$scheduler-footer-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$scheduler-footer-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $scheduler-footer-text: null !default;
 $scheduler-footer-border: null !default;
 $scheduler-footer-gradient: null !default;
@@ -40120,7 +41036,7 @@ $scheduler-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y-sm}) ) !default;
 
 $scheduler-event-bg: $primary !default;
-$scheduler-event-text: contrast-wcag( $scheduler-event-bg ) !default;
+$scheduler-event-text: k-contrast-color( $scheduler-event-bg ) !default;
 $scheduler-event-border: null !default;
 $scheduler-event-gradient: null !default;
 $scheduler-event-shadow: null !default;
@@ -40131,35 +41047,35 @@ $scheduler-event-hover-border: null !default;
 $scheduler-event-hover-gradient: null !default;
 $scheduler-event-hover-shadow: null !default;
 
-$scheduler-event-selected-bg: try-tint( $primary, 1 ) !default;
-$scheduler-event-selected-text: contrast-wcag( $scheduler-event-selected-bg ) !default;
+$scheduler-event-selected-bg: k-try-tint( $primary, 1 ) !default;
+$scheduler-event-selected-text: k-contrast-color( $scheduler-event-selected-bg ) !default;
 $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: $box-shadow-depth-3 !default;
 
 $scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
-$scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
-$scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
+$scheduler-cell-padding-x: k-map-get( $spacing, 2 ) !default;
+$scheduler-cell-padding-y: k-map-get( $spacing, 2 ) !default;
 $scheduler-cell-height: $line-height * 1rem !default;
 $scheduler-datecolumn-width: 12rem !default;
 $scheduler-timecolumn-width: 11rem !default;
 
 $scheduler-current-time-color: #ff0000 !default;
 
-$scheduler-nonwork-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-nonwork-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-nonwork-text: null !default;
 
 $scheduler-weekend-bg: null !default;
 $scheduler-weekend-text: null !default;
 
-$scheduler-othermonth-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-othermonth-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-othermonth-text: null !default;
 
-$scheduler-yearview-padding-x: map-get( $spacing, 5 ) !default;
+$scheduler-yearview-padding-x: k-map-get( $spacing, 5 ) !default;
 $scheduler-yearview-padding-y: $scheduler-yearview-padding-x !default;
 
-$scheduler-yearview-calendar-gap: map-get( $spacing, 5 ) !default;
+$scheduler-yearview-calendar-gap: k-map-get( $spacing, 5 ) !default;
 
 $scheduler-yearview-indicator-size: 3px !default;
 $scheduler-yearview-indicator-calc-offset-top: calc( #{$calendar-cell-size} - (#{$calendar-cell-padding-y} * 2)) !default;
@@ -40174,9 +41090,9 @@ $scheduler-tooltip-border-width: 0 !default;
 $scheduler-tooltip-bg: $primary-contrast !default;
 $scheduler-tooltip-text: $base-text !default;
 $scheduler-tooltip-border: null !default;
-$scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2) !default;
+$scheduler-tooltip-shadow: 0px 0px 10px rgba( black, .2 ) !default;
 
-$scheduler-tooltip-title-margin-y: map-get( $spacing, 2 ) !default;
+$scheduler-tooltip-title-margin-y: k-map-get( $spacing, 2 ) !default;
 $scheduler-tooltip-month-font-size: $font-size-sm !default;
 $scheduler-tooltip-day-font-size: $scheduler-tooltip-month-font-size * 2 !default;
 
@@ -40184,7 +41100,7 @@ $scheduler-tooltip-events-max-height: 250px !default;
 $scheduler-tooltip-events-gap: $padding-y !default;
 
 $scheduler-tooltip-event-padding-x: $padding-x-sm !default;
-$scheduler-tooltip-event-padding-y: map-get( $spacing, 2 ) !default;
+$scheduler-tooltip-event-padding-y: k-map-get( $spacing, 2 ) !default;
 $scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-tooltip-event-gap: $padding-x-sm !default;
 
@@ -41836,7 +42752,7 @@ $chat-avatar-spacing: $chat-item-spacing-x !default;
 $chat-toolbar-padding-x: $toolbar-padding-x !default;
 $chat-toolbar-padding-y: $toolbar-padding-y !default;
 $chat-toolbar-spacing: $toolbar-spacing !default;
-$chat-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$chat-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
@@ -41853,12 +42769,12 @@ $chat-border: $component-border !default;
 $chat-bubble-bg: $component-bg !default;
 $chat-bubble-text: $component-text !default;
 $chat-bubble-border: $chat-bubble-bg !default;
-$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default;
-$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default;
-$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default;
+$chat-bubble-shadow: 0 1px 2px rgba( black, .08 ) !default;
+$chat-bubble-hover-shadow: 0 1px 2px rgba( black, .16 ) !default;
+$chat-bubble-selected-shadow: 0 3px 10px rgba( black, .16 ) !default;
 
 $chat-alt-bubble-bg: $primary !default;
-$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default;
+$chat-alt-bubble-text: k-contrast-color( $chat-alt-bubble-bg ) !default;
 $chat-alt-bubble-border: $chat-alt-bubble-bg !default;
 $chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
 $chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
@@ -42562,8 +43478,8 @@ $mediaplayer-bg: $component-bg !default;
 $mediaplayer-text: $component-text !default;
 $mediaplayer-border: $component-border !default;
 
-$mediaplayer-titlebar-padding-x: map-get( $spacing, 2 ) !default;
-$mediaplayer-titlebar-padding-y: map-get( $spacing, 2 ) !default;
+$mediaplayer-titlebar-padding-x: k-map-get( $spacing, 2 ) !default;
+$mediaplayer-titlebar-padding-y: k-map-get( $spacing, 2 ) !default;
 $mediaplayer-titlebar-bg: null !default;
 $mediaplayer-titlebar-text: $mediaplayer-bg !default;
 $mediaplayer-titlebar-border: null !default;
@@ -42748,12 +43664,12 @@ $timeline-mobile-spacing-y: $padding-x !default;
 $timeline-track-arrow-width: 36px !default;
 $timeline-track-arrow-height: 36px !default;
 
-$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-bg: true-mix(#000000, $body-bg, 8%) !default;
-$timeline-track-arrow-disabled-border: true-mix($kendo-button-border, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-bg: k-true-mix(#000000, $body-bg, 8%) !default;
+$timeline-track-arrow-disabled-border: k-true-mix($kendo-button-border, $body-bg, 65%) !default;
 
 $timeline-track-size: 6px !default;
-$timeline-track-wrap-padding-bottom: $timeline-track-size / 2 !default;
+$timeline-track-wrap-padding-bottom: k-math-div( $timeline-track-size, 2 ) !default;
 $timeline-track-border-width: 1px !default;
 $timeline-track-margin-bottom: 18px !default;
 $timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
@@ -42774,7 +43690,7 @@ $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spa
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
 $timeline-horizontal-flag-min-width: 60px !default;
 $timeline-flag-bg: $primary !default;
-$timeline-flag-text: contrast-wcag( $timeline-flag-bg ) !default;
+$timeline-flag-text: k-contrast-color( $timeline-flag-bg ) !default;
 
 $timeline-flag-callout-width: 10px !default;
 $timeline-flag-callout-height: 10px !default;
@@ -43383,7 +44299,7 @@ $pdf-viewer-bg: $component-bg !default;
 $pdf-viewer-text: $component-text !default;
 $pdf-viewer-border: $component-border !default;
 
-$pdf-viewer-toolbar-bg: try-shade( $kendo-button-bg, .25 ) !default;
+$pdf-viewer-toolbar-bg: k-try-shade( $kendo-button-bg, .25 ) !default;
 $pdf-viewer-toolbar-text: null !default;
 $pdf-viewer-toolbar-border: null !default;
 $pdf-viewer-toolbar-gradient: null !default;
@@ -43400,7 +44316,7 @@ $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
 $pdf-viewer-search-panel-border-width: 1px !default;
-$pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
+$pdf-viewer-search-panel-border-radius: k-map-get( $spacing, 1 ) !default;
 $pdf-viewer-search-panel-bg: $component-bg !default;
 $pdf-viewer-search-panel-text: $component-text !default;
 $pdf-viewer-search-panel-border: $component-border !default;
@@ -43845,7 +44761,7 @@ $scrollview-pagebutton-bg: $kendo-button-bg !default;
 $scrollview-pagebutton-border: $kendo-button-border !default;
 $scrollview-pagebutton-primary-bg: $primary !default;
 $scrollview-pagebutton-primary-border: $primary !default;
-$scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;
 
 $scrollview-pager-offset: 0 !default;
 $scrollview-pager-item-spacing: 20px !default;
@@ -43859,14 +44775,14 @@ $scrollview-pager-multidot-step: 1px !default;
 $scrollview-arrow-icon-size: 4.5em !default;
 $scrollview-arrow-tap-highlight-color: $rgba-transparent !default;
 $scrollview-navigation-color: white !default;
-$scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
-$scrollview-navigation-bg: rgba(0, 0, 0, 0) !default;
+$scrollview-navigation-icon-shadow: rgba( black, .3 ) 0 0 15px !default;
+$scrollview-navigation-bg: rgba( black, 0 ) !default;
 $scrollview-navigation-default-opacity: .7 !default;
 $scrollview-navigation-hover-opacity: 1 !default;
 $scrollview-navigation-hover-span-bg: null !default;
 
-$scrollview-light-bg: rgba(255, 255, 255, .4) !default;
-$scrollview-dark-bg: rgba(0, 0, 0, .4) !default;
+$scrollview-light-bg: rgba( white, .4 ) !default;
+$scrollview-dark-bg: rgba( black, .4 ) !default;
 
 $scrollview-transition-duration: .3s !default;
 $scrollview-transition-timing-function: ease-in-out !default;
@@ -44211,50 +45127,50 @@ $scrollview-transition-timing-function: ease-in-out !default;
 /// The first base series color and its light and dark shades.
 /// @group charts
 $series-a: get-base-hue( purple, 500 ) !default;
-$series-a-dark: mix(black, $series-a, 25%) !default;
-$series-a-darker: mix(black, $series-a, 50%) !default;
-$series-a-light: mix(white, $series-a, 25%) !default;
-$series-a-lighter: mix(white, $series-a, 50%) !default;
+$series-a-dark: k-color-mix(black, $series-a, 25%) !default;
+$series-a-darker: k-color-mix(black, $series-a, 50%) !default;
+$series-a-light: k-color-mix(white, $series-a, 25%) !default;
+$series-a-lighter: k-color-mix(white, $series-a, 50%) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
 $series-b: get-base-hue( blue, 500 ) !default;
-$series-b-dark: mix(black, $series-b, 25%) !default;
-$series-b-darker: mix(black, $series-b, 50%) !default;
-$series-b-light: mix(white, $series-b, 25%) !default;
-$series-b-lighter: mix(white, $series-b, 50%) !default;
+$series-b-dark: k-color-mix(black, $series-b, 25%) !default;
+$series-b-darker: k-color-mix(black, $series-b, 50%) !default;
+$series-b-light: k-color-mix(white, $series-b, 25%) !default;
+$series-b-lighter: k-color-mix(white, $series-b, 50%) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
 $series-c: get-base-hue( teal, 500 ) !default;
-$series-c-dark: mix(black, $series-c, 25%) !default;
-$series-c-darker: mix(black, $series-c, 50%) !default;
-$series-c-light: mix(white, $series-c, 25%) !default;
-$series-c-lighter: mix(white, $series-c, 50%) !default;
+$series-c-dark: k-color-mix(black, $series-c, 25%) !default;
+$series-c-darker: k-color-mix(black, $series-c, 50%) !default;
+$series-c-light: k-color-mix(white, $series-c, 25%) !default;
+$series-c-lighter: k-color-mix(white, $series-c, 50%) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
 $series-d: get-base-hue( yellow, 500 ) !default;
-$series-d-dark: mix(black, $series-d, 25%) !default;
-$series-d-darker: mix(black, $series-d, 50%) !default;
-$series-d-light: mix(white, $series-d, 25%) !default;
-$series-d-lighter: mix(white, $series-d, 50%) !default;
+$series-d-dark: k-color-mix(black, $series-d, 25%) !default;
+$series-d-darker: k-color-mix(black, $series-d, 50%) !default;
+$series-d-light: k-color-mix(white, $series-d, 25%) !default;
+$series-d-lighter: k-color-mix(white, $series-d, 50%) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
 $series-e: get-base-hue( red, 500 ) !default;
-$series-e-dark: mix(black, $series-e, 25%) !default;
-$series-e-darker: mix(black, $series-e, 50%) !default;
-$series-e-light: mix(white, $series-e, 25%) !default;
-$series-e-lighter: mix(white, $series-e, 50%) !default;
+$series-e-dark: k-color-mix(black, $series-e, 25%) !default;
+$series-e-darker: k-color-mix(black, $series-e, 50%) !default;
+$series-e-light: k-color-mix(white, $series-e, 25%) !default;
+$series-e-lighter: k-color-mix(white, $series-e, 50%) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
 $series-f: get-base-hue( green, 500 ) !default;
-$series-f-dark: mix(black, $series-f, 25%) !default;
-$series-f-darker: mix(black, $series-f, 50%) !default;
-$series-f-light: mix(white, $series-f, 25%) !default;
-$series-f-lighter: mix(white, $series-f, 50%) !default;
+$series-f-dark: k-color-mix(black, $series-f, 25%) !default;
+$series-f-darker: k-color-mix(black, $series-f, 50%) !default;
+$series-f-light: k-color-mix(white, $series-f, 25%) !default;
+$series-f-lighter: k-color-mix(white, $series-f, 50%) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -44323,7 +45239,7 @@ $chart-border: $component-border !default;
 
 $chart-crosshair-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 $chart-crosshair-shared-tooltip-color: $chart-text !default;
-$chart-crosshair-shared-tooltip-background: try-shade( $chart-bg, 1 ) !default;
+$chart-crosshair-shared-tooltip-background: k-try-shade( $chart-bg, 1 ) !default;
 $chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $white, $black ), .08) !default;
 
 $chart-notes-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
@@ -45275,7 +46191,7 @@ $map-marker-fill: $primary !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/orgchart/_variables.scss
 // Orgchart
-$orgchart-spacer: map-get( $spacing, 6 ) !default;
+$orgchart-spacer: k-map-get( $spacing, 6 ) !default;
 $orgchart-padding-y: $orgchart-spacer !default;
 $orgchart-padding-x: $orgchart-padding-y !default;
 $orgchart-font-family: $font-family !default;
@@ -45306,7 +46222,7 @@ $orgchart-node-group-title-line-height: $line-height-sm !default;
 
 $orgchart-node-group-subtitle-font-size: $font-size !default;
 $orgchart-node-group-subtitle-margin-bottom: $orgchart-spacer !default;
-$orgchart-node-group-subtitle-text: rgba( 0, 0, 0, .54 ) !default;
+$orgchart-node-group-subtitle-text: rgba( black, .54 ) !default;
 
 $orgchart-card-width: 300px !default;
 $orgchart-card-padding-y: $card-padding-y !default;
@@ -45525,10 +46441,10 @@ $kendo-signature-lg-min-height: 110px;
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
-$kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-signature-padding-x-sm: map-get( $spacing, thin ) !default;
+$kendo-signature-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: k-map-get( $spacing, thin ) !default;
 $kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
-$kendo-signature-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-signature-padding-x-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
 
 $kendo-signature-padding-y: $kendo-signature-padding-x !default;
 $kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
@@ -45564,8 +46480,8 @@ $kendo-signature-sizes: (
     )
 ) !default;
 
-$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
-$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
+$kendo-signature-actions-gap: k-map-get( $spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: k-map-get( $spacing, 1 ) - k-map-get( $spacing, hair ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/signature/_layout.scss
@@ -45607,6 +46523,7 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
         height: 100%;
         display: block;
         z-index: 1;
+        outline: none;
     }
 
     .k-signature-line {