@progress/kendo-theme-utils 5.12.1-dev.0 → 5.12.1-dev.1

package/dist/all.scss

@@ -3,76 +3,988 @@
 
 // #region @import "./index.import.scss"; -> packages/utils/scss/index.import.scss
 // #region @import "./_functions.scss"; -> packages/utils/scss/_functions.scss
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
+// #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
+// #region @import "../_variables.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/_variables.scss
+// Equilateral triangle variables
+$equilateral-index: 1.7320508076 !default;
+$equilateral-height: .8660254038 !default;
+
+// #endregion
+
+// #region @import "./_color.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
+@function k-color-alpha( $color ) {
+    @return alpha( $color );
+}
+
+@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-hue( $color ) {
+    @return hue( $color );
+}
+
+@function k-color-saturation( $color ) {
+    @return saturation( $color );
+}
+
+@function k-color-lightness( $color ) {
+    @return lightness( $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 );
+}
+
+@function k-color-adjust-hue( $color, $degrees ) {
+    @return adjust-hue( $color, $degrees );
+}
+
+@function k-color-saturate( $color, $amount ) {
+    @return saturate( $color, $amount );
+}
+
+@function k-color-desaturate( $color, $amount ) {
+    @return desaturate( $color, $amount );
+}
+
+@function k-color-grayscale( $color ) {
+    @return grayscale( $color );
+}
+
+@function k-color-complement( $color ) {
+    @return complement( $color );
+}
+
+@function k-color-invert( $color ) {
+    @return invert( $color );
+}
+
+// #endregion
+// #region @import "./_color-contrast.import.scss"; -> packages/utils/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
 //
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
-    @if type-of( $string ) == number {
-        $string: $string + "";
+//  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;
+        }
     }
 
-    $index: str-index($string, $search);
+    // sass-lint:disable-block no-warn
+    @warn "Found no color leading to #{$min-ratio}:1 contrast ratio against #{$background}...";
 
-    @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return $max-ratio-color;
+}
+
+
+// Legacy functions
+@function k-yiq-luma-information($color) {
+    $r: k-color-red($color);
+    $g: k-color-green($color);
+    $b: k-color-blue($color);
+
+    $yiq: k-math-div( (($r * 299) + ($g * 587) + ($b * 114)), 1000 );
+
+    @return $yiq;
+}
+@function k-contrast-yiq($color, $dark: $yiq-dark, $light: $yiq-light) {
+    $yiq: k-yiq-luma-information($color);
+    $out: if($yiq >= $yiq-threshold, $dark, $light);
+    // @debug yiq;
+    @return $out;
+}
+@function k-contrast-legacy($color, $dark: $wcag-dark, $light: $wcag-light) {
+    $luma: k-color-luminance($color);
+    $out: if($luma < .5, $light, $dark);
+    // @debug $luma;
+    @return $out;
+}
+
+// #endregion
+// #region @import "./_color-manipulation.import.scss"; -> packages/utils/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( k-meta-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( k-meta-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( k-meta-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( k-meta-variable-exists( dark-theme ), $dark-theme, false );
+
+    @if $_dark-theme {
+        @return k-color-darken( $color, $amount );
+    }
+    @return k-color-lighten( $color, $amount );
+}
+
+@function k-rgba-to-mix( $color, $bg ) {
+    $percent: k-color-alpha( $color ) * 100%;
+
+    @return k-color-mix( rgba( $color, 1 ), $bg, $percent );
+}
+
+// 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 "./_custom-properties.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
+@function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
+    $_prefix: $prefix;
+    $_var: $var;
+    $_fallback: $fallback;
+
+    @if ( k-string-index( $prefix, "--" ) == 1 ) {
+        $_prefix: "";
+        $_var: k-string-slice( $prefix, 3 );
+        $_fallback: $var;
+    }
+
+    @if not $_var {
+        @return null;
+    }
+
+    @if $_prefix == null {
+        $_prefix: "";
+    }
+
+    @if ($_fallback != null and $_fallback != "") {
+        @return var( --#{$_prefix}#{$_var}, #{$_fallback} );
+    }
+
+    @return var( --#{$_prefix}#{$_var} );
+}
+
+@function k-vars( $prefix: kendo-, $vars... ) {
+    $vars: k-list-reverse( $vars );
+    $result: null;
+
+    // @debug $prefix;
+    @each $var in $vars {
+        $result: k-var( $prefix, $var, $result );
+    }
+
+    @return $result;
+}
+
+// #endregion
+// #region @import "./_escape-string.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_escape-string.import.scss
+$_kendo-svg-escaped-characters: (
+    ("%", "%25"),
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+) !default;
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function k-escape-svg($string) {
+    @if k-string-index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $_kendo-svg-escaped-characters {
+            // Do not escape the url brackets
+            @if k-string-index($string, "url(") == 1 {
+                $string: url("#{k-string-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: k-string-replace($string, $char, $encoded);
+            }
+        }
     }
 
     @return $string;
 }
 
 
+
 $_kendo-escape-class-name: (
     ".": "\\.",
     "/": "\\/"
 );
 
-@function escape-class-name( $text ) {
+@function k-escape-class-name( $text ) {
     $_text: $text;
 
     @each $char, $rep in $_kendo-escape-class-name {
-        $_text: str-replace( $_text, unquote( $char ), unquote( $rep ) );
+        $_text: k-string-replace( $_text, k-string-unquote( $char ), k-string-unquote( $rep ) );
     }
 
     @return $_text;
 }
 
+// #endregion
+// #region @import "./_lang.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_lang.import.scss
+@function k-if-var( $var, $fallback ) {
+    @return if( $var != null, $var, $fallback );
+}
+
+// #endregion
+// #region @import "./_list.import.scss"; -> packages/utils/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-includes( $list, $value ) {
+    @return k-list-index( $list, $value ) != null;
+}
+
+@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-reverse( $list: null ) {
+    $result: ();
+
+    @if ($list) {
+        $len: k-list-length( $list );
+
+        @for $i from $len through 1 {
+            $result: k-list-append( $result, k-list-nth( $list, $i ) );
+        }
+
+        @return $result;
+    }
+
+    // sass-lint:disable-block no-warn
+    @warn "No list passed.";
+    @return $result;
+}
+
+@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/utils/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-percentage( $number ) {
+    @return percentage( $number );
+}
+
+@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/utils/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/utils/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-call( $function, $args... ) {
+    @return call( $function, $args... );
+}
+
+@function k-meta-function-exists( $name ) {
+    @return function-exists( $name );
+}
+
+@function k-meta-get-function( $name, $args... ) {
+    @return get-function( $name, $args... );
+}
+
+@function k-meta-inspect( $value ) {
+    @return inspect( $value );
+}
+
+@function k-meta-keywords( $args ) {
+    @return keywords( $args );
+}
+
+@function k-meta-type-of( $value ) {
+    @return type-of( $value );
+}
+
+@function k-meta-variable-exists( $name ) {
+    @return variable-exists( $name );
+}
+
+@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/utils/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: "" ) {
+    @if k-meta-type-of( $string ) == number {
+        $string: $string + "";
+    }
+
+    $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
+
 // #endregion
 // #region @import "./_variables.scss"; -> packages/utils/scss/_variables.scss
 $kendo-prefix: k- !default;
 $kendo-important: true !default;
 $kendo-colors: () !default;
 $kendo-spacing: (
+    // sass-lint:disable-block leading-zero
     0: 0,
-    0.5: .125rem, // sass-lint:disable-line leading-zero
+    1px: 1px,
+    0.5: .125rem,
     1: .25rem,
     1.5: .375rem,
     2: .5rem,
-    2.5: 6.25rem,
+    2.5: .625rem,
     3: .75rem,
     3.5: .875rem,
     4: 1rem,
+    4.5: 1.125rem,
     5: 1.25rem,
+    5.5: 1.375rem,
     6: 1.5rem,
+    6.5: 1.625rem,
     7: 1.75rem,
+    7.5: 1.875rem,
     8: 2rem,
     9: 2.25rem,
     10: 2.5rem,
     11: 2.75rem,
     12: 3rem,
+    13: 3.25rem,
     14: 3.5rem,
+    15: 3.75rem,
     16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
     20: 5rem,
-    24: 6rem,
-    px: 1px,
-    thin: .125rem,
-    hair: .0625rem
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem
 ) !default;
-$kendo-sizing: map-merge( $kendo-spacing, (
+
+$kendo-sizing: k-map-merge( $kendo-spacing, (
     // sass-lint:disable-block indentation
     "auto": auto,
     "1/2": 50%,
@@ -117,8 +1029,9 @@ $kendo-utils: (
     // Layout
     "aspect-ratio": (
         auto: auto,
-        square: unquote("1 / 1"),
-        video: unquote("16 / 9")
+        1: 1,
+        square: k-string-unquote("1 / 1"),
+        video: k-string-unquote("16 / 9")
     ),
     "container": (),
     "columns": (),
@@ -317,7 +1230,7 @@ $kendo-utils: (
         10: span 10 / span 10,
         11: span 11 / span 11,
         12: span 12 / span 12,
-        full: unquote("1 / -1"),
+        full: k-string-unquote("1 / -1"),
         auto: auto
     ),
     "grid-row-start": (
@@ -469,7 +1382,7 @@ $kendo-utils: (
     "space-between": (),
 
     // Sizing
-    "width": map-merge( $kendo-sizing, (
+    "width": k-map-merge( $kendo-sizing, (
         // sass-lint:disable-block indentation
         screen: 100vw
     )),
@@ -490,7 +1403,7 @@ $kendo-utils: (
         max: max-content,
         fit: fit-content
     ),
-    "height": map-merge( $kendo-sizing, (
+    "height": k-map-merge( $kendo-sizing, (
         // sass-lint:disable-block indentation
         screen: 100vh
     )),
@@ -641,13 +1554,15 @@ $kendo-utils: (
     // Transform
     "flip": true,
     "scale": (
-        "0",
-        ".25",
-        ".5",
-        ".75",
-        "1",
-        "1.25",
-        "1.5"
+        // sass-lint:disable-block leading-zero
+        0: 0,
+        0.25: .25,
+        0.5: .5,
+        0.75: .75,
+        1: 1,
+        1.25: 1.25,
+        1.5: 1.5,
+        2: 2
     ),
     "rotate": (
         0: 0deg,
@@ -659,7 +1574,7 @@ $kendo-utils: (
         270: 270deg,
         315: 315deg
     ),
-    "translate": map-remove( $kendo-sizing, "auto", "min", "max", "fit" ),
+    "translate": k-map-remove( $kendo-sizing, "auto", "min", "max", "fit" ),
     "skew": (
         0: 0deg,
         1: 1deg,
@@ -796,26 +1711,26 @@ $kendo-utils: (
 // #region @import "./_mixins.scss"; -> packages/utils/scss/_mixins.scss
 @mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important ) {
     @if $values {
-        $_props: if( type-of($props) == list, $props, ( $props ) );
-        $_fn: if( function-exists( $function ), get-function( $function ), null );
+        $_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
+        $_fn: if( k-meta-function-exists( $function ), k-meta-get-function( $function ), null );
 
         @each $key, $val in $values {
-            $_key: escape-class-name( $key );
-            $_val: if( type-of($values) == list, $key, $val );
-            $_name: escape-class-name( $name );
+            $_key: k-escape-class-name( $key );
+            $_val: if( k-meta-type-of($values) == list, $key, $val );
+            $_name: k-escape-class-name( $name );
             $_selector: if( $_key == DEFAULT, #{$kendo-prefix}#{$_name}, #{$kendo-prefix}#{$_name}-#{$_key});
 
             @if $important != only {
                 .#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}: if( $_fn, call($_fn, $_val), $_val );
+                        #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
                     }
                 }
             }
             @if $important {
                 .\!#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}:  if( $_fn, call($_fn, $_val), $_val ) !important; // sass-lint:disable-line no-important
+                        #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // sass-lint:disable-line no-important
                     }
                 }
             }
@@ -827,11 +1742,11 @@ $kendo-utils: (
 
 // #region @import "./accessibility/index.import.scss"; -> packages/utils/scss/accessibility/index.import.scss
 // #region @import "./_screen-readers.scss"; -> packages/utils/scss/accessibility/_screen-readers.scss
-$kendo-utils-accessibility: map-get( $kendo-utils, "accessibility" ) !default;
+$kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
 
 @if $kendo-utils-accessibility {
+    /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
     /// @name .k-sr-only
-    /// @description This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
     /// @group accessibility
     .#{$kendo-prefix}sr-only {
         margin: -1px;
@@ -861,149 +1776,260 @@ $kendo-utils-accessibility: map-get( $kendo-utils, "accessibility" ) !default;
 // #endregion
 // #region @import "./layout/index.import.scss"; -> packages/utils/scss/layout/index.import.scss
 // #region @import "./_aspect-ratio.scss"; -> packages/utils/scss/layout/_aspect-ratio.scss
-// TODO DOCS
+// Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
+
+/// This is equivalent to `aspect-ratio: auto;`. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
+/// @name .k-aspect-ratio-auto
+/// @group aspect-ratio
+/// @contextType css
 
-$kendo-utils-aspect-ratio: map-get( $kendo-utils, "aspect-ratio" ) !default;
+/// This is equivalent to `aspect-ratio: 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+/// @name .k-aspect-ratio-1
+/// @group aspect-ratio
+/// @contextType css
+
+/// This is equivalent to `aspect-ratio: 1 / 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+/// @name .k-aspect-ratio-square
+/// @group aspect-ratio
+/// @contextType css
+
+/// This is equivalent to `aspect-ratio: 16 / 9;`. The box's preferred aspect ratio is the specified ratio of 16 : 9. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+/// @name .k-aspect-ratio-video
+/// @group aspect-ratio
+/// @contextType css
+
+$kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
 
 @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
 
 // #endregion
 // #region @import "./_display.scss"; -> packages/utils/scss/layout/_display.scss
+/// This is equivalent to `display: none;`. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
 /// @name .k-d-none
-/// @description This is equivalent to `display: none;`. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: block;`. The element generates a block element box, generating line breaks both before and after the element when in the normal flow.
 /// @name .k-d-block
-/// @description This is equivalent to `display: block;`. The element generates a block element box, generating line breaks both before and after the element when in the normal flow.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: inline;`. The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
 /// @name .k-d-inline
-/// @description This is equivalent to `display: inline;`. The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: inline-block;`. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
 /// @name .k-d-inline-block
-/// @description This is equivalent to `display: inline-block;`. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: flex;`. The element behaves like a block element and lays out its content according to the flexbox model.
 /// @name .k-d-flex
-/// @description This is equivalent to `display: flex;`. The element behaves like a block element and lays out its content according to the flexbox model.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: inline-flex;`. The element behaves like an inline element and lays out its content according to the flexbox model.
 /// @name .k-d-inline-flex
-/// @description This is equivalent to `display: inline-flex;`. The element behaves like an inline element and lays out its content according to the flexbox model.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
 /// @name .k-d-grid
-/// @description This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
 /// @name .k-d-inline-grid
-/// @description This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: table;`. These elements behave like HTML `<table>` elements. It defines a block-level box.
 /// @name .k-d-table
-/// @description This is equivalent to `display: table;`. These elements behave like HTML `<table>` elements. It defines a block-level box.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: inline-table;`. The inline-table value does not have a direct mapping in HTML. It behaves like an HTML `<table>` element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
 /// @name .k-d-inline-table
-/// @description This is equivalent to `display: inline-table;`. The inline-table value does not have a direct mapping in HTML. It behaves like an HTML `<table>` element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
 /// @group display
+/// @contextType css
 
+/// This is equivalent to `display: list-item;`. These elements behave like HTML `<LI>` elements. It defines a block-level box.
 /// @name .k-d-list-item
-/// @description This is equivalent to `display: list-item;`. These elements behave like HTML `<LI>` elements. It defines a block-level box.
 /// @group display
+/// @contextType css
 
-$kendo-utils-display: map-get( $kendo-utils, "display" ) !default;
+// Display utility classes
+$kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
 
 @include generate-utils( d, display, $kendo-utils-display );
 
+// Legacy alias
+@include generate-utils( display, display, $kendo-utils-display );
+
 // #endregion
 // #region @import "./_float.scss"; -> packages/utils/scss/layout/_float.scss
-// TODO DOCS
+// Float documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/float.
+
+/// This is equivalent to `float: left;`. The element must float on the left side of its containing block.
+/// @name .k-float-left
+/// @group float
+/// @contextType css
 
-$kendo-utils-float: map-get( $kendo-utils, "float" ) !default;
+/// This is equivalent to `float: right;`. The element must float on the right side of its containing block.
+/// @name .k-float-right
+/// @group float
+/// @contextType css
+
+/// This is equivalent to `float: none;`. The element must not float.
+/// @name .k-float-none
+/// @group float
+/// @contextType css
+
+$kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
 
 @include generate-utils( float, float, $kendo-utils-float );
 
 // #endregion
 // #region @import "./_clear.scss"; -> packages/utils/scss/layout/_clear.scss
-// TODO DOCS
+// Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.
+
+/// This is equivalent to `clear: left;`. Is a keyword indicating that the element is moved down to clear past left floats.
+/// @name .k-clear-left
+/// @group float
+/// @contextType css
+
+/// This is equivalent to `clear: right;`. Is a keyword indicating that the element is moved down to clear past right floats.
+/// @name .k-clear-right
+/// @group float
+/// @contextType css
+
+/// This is equivalent to `clear: both;`. Is a keyword indicating that the element is moved down to clear past both left and right floats.
+/// @name .k-clear-both
+/// @group float
+/// @contextType css
 
-$kendo-utils-clear: map-get( $kendo-utils, "clear" ) !default;
+/// This is equivalent to `clear: none;`. Is a keyword indicating that the element is not moved down to clear past floating elements.
+/// @name .k-clear-none
+/// @group float
+/// @contextType css
+
+$kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
 
 @include generate-utils( clear, clear, $kendo-utils-clear );
 
 // #endregion
 // #region @import "./_overflow.scss"; -> packages/utils/scss/layout/_overflow.scss
+/// This is equivalent to `overflow: auto;`. Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. Desktop browsers provide scrollbar if content overflows.
 /// @name .k-overflow-auto
-/// @description This is equivalent to `overflow: auto;`. Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. Desktop browsers provide scrollbar if content overflows.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow: hidden;`. Content is clipped if necessary to fit the padding box. No scrollbar is provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container.
 /// @name .k-overflow-hidden
-/// @description This is equivalent to `overflow: hidden;`. Content is clipped if necessary to fit the padding box. No scrollbar is provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow: visible;`. Content is not clipped and may be rendered outside the padding box.
 /// @name .k-overflow-visible
-/// @description This is equivalent to `overflow: visible;`. Content is not clipped and may be rendered outside the padding box.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow: scroll;`. Content is clipped if necessary to fit the padding box. Browsers always display scrollbar whether or not any content is actually clipped, preventing scrollbar from appearing or disappearing as content changes. Printers may still print overflowing content.
 /// @name .k-overflow-scroll
-/// @description This is equivalent to `overflow: scroll;`. Content is clipped if necessary to fit the padding box. Browsers always display scrollbar whether or not any content is actually clipped, preventing scrollbar from appearing or disappearing as content changes. Printers may still print overflowing content.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow: clip;`. Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
 /// @name .k-overflow-clip
-/// @description This is equivalent to `overflow: clip;`. Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-x: auto;`.
 /// @name .k-overflow-x-auto
-/// @description This is equivalent to `overflow-x: auto;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-x: hidden;`.
 /// @name .k-overflow-x-hidden
-/// @description This is equivalent to `overflow-x: hidden;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-x: visible;`.
 /// @name .k-overflow-x-visible
-/// @description This is equivalent to `overflow-x: visible;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-x: scroll;`.
 /// @name .k-overflow-x-scroll
-/// @description This is equivalent to `overflow-x: scroll;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-x: clip;`.
 /// @name .k-overflow-x-clip
-/// @description This is equivalent to `overflow-x: clip;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-y: auto;`.
 /// @name .k-overflow-y-auto
-/// @description This is equivalent to `overflow-y: auto;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-y: hidden;`.
 /// @name .k-overflow-y-hidden
-/// @description This is equivalent to `overflow-y: hidden;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-y: visible;`.
 /// @name .k-overflow-y-visible
-/// @description This is equivalent to `overflow-y: visible;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-y: scroll;`.
 /// @name .k-overflow-y-scroll
-/// @description This is equivalent to `overflow-y: scroll;`.
 /// @group overflow
+/// @contextType css
 
+/// This is equivalent to `overflow-y: clip;`.
 /// @name .k-overflow-y-clip
-/// @description This is equivalent to `overflow-y: clip;`.
 /// @group overflow
+/// @contextType css
 
-$kendo-utils-overflow: map-get( $kendo-utils, "overflow" ) !default;
+// Overflow utility classes
+$kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
 
 @include generate-utils( overflow, overflow, $kendo-utils-overflow );
 
 // #endregion
 // #region @import "./_position.scss"; -> packages/utils/scss/layout/_position.scss
-// TODO DOCS
+// Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
+
+/// This is equivalent to `position: static;`. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
+/// @name .k-pos-static
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `position: relative;`. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
+/// @name .k-pos-relative
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `position: absolute;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
+/// @name .k-pos-absolute
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `position: fixed;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
+/// @name .k-pos-fixed
+/// @group position
+/// @contextType css
 
-$kendo-utils-position: map-get( $kendo-utils, "position" ) !default;
+/// This is equivalent to `position: sticky;`. The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
+/// @name .k-pos-sticky
+/// @group position
+/// @contextType css
+
+$kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
 
 @include generate-utils( pos, position, $kendo-utils-position );
 
@@ -1022,7 +2048,7 @@ $kendo-utils-position: map-get( $kendo-utils, "position" ) !default;
 
 // TODO DOCS
 
-$kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
+$kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
 
 @include generate-utils( inset, inset, $kendo-utils-inset );
 @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
@@ -1034,7 +2060,7 @@ $kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
 @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
 @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
 @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
-@include generate-utils( bottom-right, ( bottom, right), $kendo-utils-inset );
+@include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
 
 .#{$kendo-prefix}top-start,
 .#{$kendo-prefix}pos-top-start {
@@ -1093,6 +2119,26 @@ $kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
 }
 
 
+/// This is equivalent to `top: 0;`.
+/// @name .k-pos-top
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `right: 0;`.
+/// @name .k-pos-right
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `bottom: 0;`.
+/// @name .k-pos-bottom
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `left: 0;`.
+/// @name .k-pos-left
+/// @group position
+/// @contextType css
+
 @each $side in (top, right, bottom, left) {
     .#{$kendo-prefix}#{$side},
     .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
@@ -1102,7 +2148,7 @@ $kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
 // #region @import "./_visibility.scss"; -> packages/utils/scss/layout/_visibility.scss
 // TODO DOCS
 
-$kendo-utils-visibility: map-get( $kendo-utils, "visibility" ) !default;
+$kendo-utils-visibility: k-map-get( $kendo-utils, "visibility" ) !default;
 
 @include generate-utils( visibility, visibility, $kendo-utils-visibility );
 
@@ -1116,7 +2162,7 @@ $kendo-utils-visibility: map-get( $kendo-utils, "visibility" ) !default;
 // #region @import "./_zindex.scss"; -> packages/utils/scss/layout/_zindex.scss
 // TODO DOCS
 
-$kendo-utils-zindex: map-get( $kendo-utils, "zindex" ) !default;
+$kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
 
 @include generate-utils( z, z-index, $kendo-utils-zindex );
 
@@ -1125,118 +2171,157 @@ $kendo-utils-zindex: map-get( $kendo-utils, "zindex" ) !default;
 // #endregion
 // #region @import "./flex-grid/index.import.scss"; -> packages/utils/scss/flex-grid/index.import.scss
 // #region @import "./_flex-direction.scss"; -> packages/utils/scss/flex-grid/_flex-direction.scss
+/// This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
 /// @name .k-flex-row
-/// @description This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
 /// @group flex-direction
+/// @contextType css
 
+/// This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
 /// @name .k-flex-row-reverse
-/// @description This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
 /// @group flex-direction
+/// @contextType css
 
+/// This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
 /// @name .k-flex-col
-/// @description This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
 /// @group flex-direction
+/// @contextType css
 
+/// This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
 /// @name .k-flex-col-reverse
-/// @description This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
 /// @group flex-direction
+/// @contextType css
 
-$kendo-utils-flex-direction: map-get( $kendo-utils, "flex-direction" ) !default;
+// Flex direction utility classes
+$kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
 
 @include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );
 
 // #endregion
 // #region @import "./_flex-wrap.scss"; -> packages/utils/scss/flex-grid/_flex-wrap.scss
+/// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
 /// @name .k-flex-wrap
-/// @description This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
 /// @group flex-wrap
+/// @contextType css
 
+/// This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
 /// @name .k-flex-nowrap
-/// @description This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
 /// @group flex-wrap
+/// @contextType css
 
+/// This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
 /// @name .k-flex-wrap-reverse
-/// @description This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
 /// @group flex-wrap
+/// @contextType css
 
-$kendo-utils-flex-wrap: map-get( $kendo-utils, "flex-wrap" ) !default;
+// Flex wrap utility classes
+$kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
 
 @include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );
 
 // #endregion
 // #region @import "./_flex.scss"; -> packages/utils/scss/flex-grid/_flex.scss
+/// This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` except it is allowed to shrink beyond its initial size.
 /// @name .k-flex-1
-/// @description This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` except it is allowed to shrink beyond its initial size.
 /// @group flex
+/// @contextType css
 
+/// This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
 /// @name .k-flex-auto
-/// @description This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
 /// @group flex
+/// @contextType css
 
+/// This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
 /// @name .k-flex-initial
-/// @description This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
 /// @group flex
+/// @contextType css
 
+/// This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
 /// @name .k-flex-none
-/// @description This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
 /// @group flex
+/// @contextType css
 
-$kendo-utils-flex: map-get( $kendo-utils, "flex" ) !default;
+// Flex utility classes
+$kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
 
 @include generate-utils( flex, flex, $kendo-utils-flex );
 
 // #endregion
 // #region @import "./_flex-grow.scss"; -> packages/utils/scss/flex-grid/_flex-grow.scss
+/// This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
 /// @name .k-flex-grow
-/// @description This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
 /// @group flex-grow
+/// @contextType css
 
+/// This is equivalent to `flex-grow: 0`. The item will not grow.
 /// @name .k-flex-grow-0
-/// @description This is equivalent to `flex-grow: 0`. The item will not grow.
 /// @group flex-grow
+/// @contextType css
 
-$kendo-utils-flex-grow: map-get( $kendo-utils, "flex-grow" ) !default;
+// Flex grow utility classes
+$kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
 
 @include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
 @include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );
 
 // #endregion
 // #region @import "./_flex-shrink.scss"; -> packages/utils/scss/flex-grid/_flex-shrink.scss
+/// This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
 /// @name .k-flex-shrink
-/// @description This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
 /// @group flex-shrink
+/// @contextType css
 
+/// This is equivalent to `flex-shrink: 0`. The item will not shrink.
 /// @name .k-flex-shrink-0
-/// @description This is equivalent to `flex-shrink: 0`. The item will not shrink.
 /// @group flex-shrink
+/// @contextType css
 
-$kendo-utils-flex-shrink: map-get( $kendo-utils, "flex-shrink" ) !default;
+// Flex shrink utility classes
+$kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
 
 @include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
 @include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );
 
 // #endregion
 // #region @import "./_flex-basis.scss"; -> packages/utils/scss/flex-grid/_flex-basis.scss
+/// This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
 /// @name .k-flex-basis-auto
-/// @description This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
 /// @group flex-basis
+/// @contextType css
 
-// TODO DOCS
-
+/// This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
 /// @name .k-flex-basis-0
-/// @description This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
 /// @group flex-basis
+/// @contextType css
 
-$kendo-utils-flex-basis: map-get( $kendo-utils, "flex-basis" ) !default;
+// Flex basis utility classes
+$kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
 
 @include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
 @include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );
 
 // #endregion
 // #region @import "./_order.scss"; -> packages/utils/scss/flex-grid/_order.scss
-// TODO DOCS
+/// This is equivalent to `order: -9999;`.
+/// @name .k-order-first
+/// @group order
+/// @contextType css
+
+/// This is equivalent to `order: 9999;`.
+/// @name .k-order-last
+/// @group order
+/// @contextType css
+
+/// This is equivalent to `order: 0;`.
+/// @name .k-order-none
+/// @group order
+/// @contextType css
+
+/// This is equivalent to `order: 1;`, `order: 2;`, `order: 12;`, etc.
+/// @name .from k-order-1 to k-order-12
+/// @group order
+/// @contextType css
 
-$kendo-utils-order: map-get( $kendo-utils, "order" ) !default;
+$kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
 
 @include generate-utils( order, order, $kendo-utils-order );
 
@@ -1244,7 +2329,7 @@ $kendo-utils-order: map-get( $kendo-utils, "order" ) !default;
 // #region @import "./_grid-template-columns.scss"; -> packages/utils/scss/flex-grid/_grid-template-columns.scss
 // TODO DOCS
 
-$kendo-utils-grid-template-columns: map-get( $kendo-utils, "grid-template-columns" ) !default;
+$kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
 
 @include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );
 
@@ -1252,7 +2337,7 @@ $kendo-utils-grid-template-columns: map-get( $kendo-utils, "grid-template-column
 // #region @import "./_grid-template-rows.scss"; -> packages/utils/scss/flex-grid/_grid-template-rows.scss
 // TODO DOCS
 
-$kendo-utils-grid-template-rows: map-get( $kendo-utils, "grid-template-rows" ) !default;
+$kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
 
 @include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );
 
@@ -1260,17 +2345,17 @@ $kendo-utils-grid-template-rows: map-get( $kendo-utils, "grid-template-rows" ) !
 // #region @import "./_grid-column-start-end.scss"; -> packages/utils/scss/flex-grid/_grid-column-start-end.scss
 // TODO DOCS
 
-$kendo-utils-grid-column-start: map-get( $kendo-utils, "grid-column-start" ) !default;
+$kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
 
 @include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
 
 
-$kendo-utils-grid-column-end: map-get( $kendo-utils, "grid-column-end" ) !default;
+$kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
 
 @include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
 
 
-$kendo-utils-grid-column-span: map-get( $kendo-utils, "grid-column-span" ) !default;
+$kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
 
 @include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
 @include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
@@ -1279,25 +2364,26 @@ $kendo-utils-grid-column-span: map-get( $kendo-utils, "grid-column-span" ) !defa
 // #region @import "./_grid-row-start-end.scss"; -> packages/utils/scss/flex-grid/_grid-row-start-end.scss
 // TODO DOCS
 
-$kendo-utils-grid-row-start: map-get( $kendo-utils, "grid-row-start" ) !default;
+$kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
 
 @include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
 
 
-$kendo-utils-grid-row-end: map-get( $kendo-utils, "grid-row-end" ) !default;
+$kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
 
 @include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
 
 
-$kendo-utils-grid-row-span: map-get( $kendo-utils, "grid-row-span" ) !default;
+$kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
 
 @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
+@include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
 
 // #endregion
 // #region @import "./_grid-auto-flow.scss"; -> packages/utils/scss/flex-grid/_grid-auto-flow.scss
 // TODO DOCS
 
-$kendo-utils-grid-auto-flow: map-get( $kendo-utils, "grid-auto-flow" ) !default;
+$kendo-utils-grid-auto-flow: k-map-get( $kendo-utils, "grid-auto-flow" ) !default;
 
 @include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );
 
@@ -1305,7 +2391,7 @@ $kendo-utils-grid-auto-flow: map-get( $kendo-utils, "grid-auto-flow" ) !default;
 // #region @import "./_grid-auto-columns.scss"; -> packages/utils/scss/flex-grid/_grid-auto-columns.scss
 // TODO DOCS
 
-$kendo-utils-grid-auto-columns: map-get( $kendo-utils, "grid-auto-columns" ) !default;
+$kendo-utils-grid-auto-columns: k-map-get( $kendo-utils, "grid-auto-columns" ) !default;
 
 @include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );
 
@@ -1313,7 +2399,7 @@ $kendo-utils-grid-auto-columns: map-get( $kendo-utils, "grid-auto-columns" ) !de
 // #region @import "./_grid-auto-rows.scss"; -> packages/utils/scss/flex-grid/_grid-auto-rows.scss
 // TODO DOCS
 
-$kendo-utils-grid-auto-rows: map-get( $kendo-utils, "grid-auto-rows" ) !default;
+$kendo-utils-grid-auto-rows: k-map-get( $kendo-utils, "grid-auto-rows" ) !default;
 
 @include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );
 
@@ -1321,7 +2407,7 @@ $kendo-utils-grid-auto-rows: map-get( $kendo-utils, "grid-auto-rows" ) !default;
 // #region @import "./_gap.scss"; -> packages/utils/scss/flex-grid/_gap.scss
 // TODO DOCS
 
-$kendo-utils-gap: map-get( $kendo-utils, "gap" ) !default;
+$kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
 
 @include generate-utils( gap, gap, $kendo-utils-gap );
 @include generate-utils( gap-x, column-gap, $kendo-utils-gap );
@@ -1331,7 +2417,7 @@ $kendo-utils-gap: map-get( $kendo-utils, "gap" ) !default;
 // #region @import "./_align-content.scss"; -> packages/utils/scss/flex-grid/_align-content.scss
 // TODO DOCS
 
-$kendo-utils-align-content: map-get( $kendo-utils, "align-content" ) !default;
+$kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
 
 @include generate-utils( align-content, align-content, $kendo-utils-align-content );
 
@@ -1339,7 +2425,7 @@ $kendo-utils-align-content: map-get( $kendo-utils, "align-content" ) !default;
 // #region @import "./_align-items.scss"; -> packages/utils/scss/flex-grid/_align-items.scss
 // TODO DOCS
 
-$kendo-utils-align-items: map-get( $kendo-utils, "align-items" ) !default;
+$kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
 
 @include generate-utils( align-items, align-items, $kendo-utils-align-items );
 
@@ -1347,7 +2433,7 @@ $kendo-utils-align-items: map-get( $kendo-utils, "align-items" ) !default;
 // #region @import "./_align-self.scss"; -> packages/utils/scss/flex-grid/_align-self.scss
 // TODO DOCS
 
-$kendo-utils-align-self: map-get( $kendo-utils, "align-self" ) !default;
+$kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
 
 @include generate-utils( align-self, align-self, $kendo-utils-align-self );
 
@@ -1355,7 +2441,7 @@ $kendo-utils-align-self: map-get( $kendo-utils, "align-self" ) !default;
 // #region @import "./_justify-content.scss"; -> packages/utils/scss/flex-grid/_justify-content.scss
 // TODO DOCS
 
-$kendo-utils-justify-content: map-get( $kendo-utils, "justify-content" ) !default;
+$kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
 
 @include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
 
@@ -1366,7 +2452,7 @@ $kendo-utils-justify-content: map-get( $kendo-utils, "justify-content" ) !defaul
 // #region @import "./_justify-items.scss"; -> packages/utils/scss/flex-grid/_justify-items.scss
 // TODO DOCS
 
-$kendo-utils-justify-items: map-get( $kendo-utils, "justify-items" ) !default;
+$kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
 
 @include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );
 
@@ -1374,7 +2460,7 @@ $kendo-utils-justify-items: map-get( $kendo-utils, "justify-items" ) !default;
 // #region @import "./_justify-self.scss"; -> packages/utils/scss/flex-grid/_justify-self.scss
 // TODO DOCS
 
-$kendo-utils-justify-self: map-get( $kendo-utils, "justify-self" ) !default;
+$kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
 
 @include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );
 
@@ -1382,7 +2468,7 @@ $kendo-utils-justify-self: map-get( $kendo-utils, "justify-self" ) !default;
 // #region @import "./_place-content.scss"; -> packages/utils/scss/flex-grid/_place-content.scss
 // TODO DOCS
 
-$kendo-utils-place-content: map-get( $kendo-utils, "place-content" ) !default;
+$kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
 
 @include generate-utils( place-content, place-content, $kendo-utils-place-content );
 
@@ -1390,7 +2476,7 @@ $kendo-utils-place-content: map-get( $kendo-utils, "place-content" ) !default;
 // #region @import "./_place-items.scss"; -> packages/utils/scss/flex-grid/_place-items.scss
 // TODO DOCS
 
-$kendo-utils-place-items: map-get( $kendo-utils, "place-items" ) !default;
+$kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
 
 @include generate-utils( place-items, place-items, $kendo-utils-place-items );
 
@@ -1398,7 +2484,7 @@ $kendo-utils-place-items: map-get( $kendo-utils, "place-items" ) !default;
 // #region @import "./_place-self.scss"; -> packages/utils/scss/flex-grid/_place-self.scss
 // TODO DOCS
 
-$kendo-utils-place-self: map-get( $kendo-utils, "place-self" ) !default;
+$kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
 
 @include generate-utils( place-self, place-self, $kendo-utils-place-self );
 
@@ -1409,7 +2495,7 @@ $kendo-utils-place-self: map-get( $kendo-utils, "place-self" ) !default;
 // #region @import "./_margin.scss"; -> packages/utils/scss/spacing/_margin.scss
 // TODO DOCS
 
-$kendo-utils-margin: map-get( $kendo-utils, "margin" ) !default;
+$kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
 
 @include generate-utils( m, margin, $kendo-utils-margin );
 @include generate-utils( mt, margin-top, $kendo-utils-margin );
@@ -1423,7 +2509,7 @@ $kendo-utils-margin: map-get( $kendo-utils, "margin" ) !default;
 // #region @import "./_padding.scss"; -> packages/utils/scss/spacing/_padding.scss
 // TODO DOCS
 
-$kendo-utils-padding: map-get( $kendo-utils, "padding" ) !default;
+$kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
 
 @include generate-utils( p, padding, $kendo-utils-padding );
 @include generate-utils( pt, padding-top, $kendo-utils-padding );
@@ -1443,17 +2529,17 @@ $kendo-utils-padding: map-get( $kendo-utils, "padding" ) !default;
 // #region @import "./_width.scss"; -> packages/utils/scss/sizing/_width.scss
 // TODO DOCS
 
-$kendo-utils-width: map-get( $kendo-utils, "width" ) !default;
+$kendo-utils-width: k-map-get( $kendo-utils, "width" ) !default;
 
 @include generate-utils( w, width, $kendo-utils-width );
 
 
-$kendo-utils-min-width: map-get( $kendo-utils, "min-width" ) !default;
+$kendo-utils-min-width: k-map-get( $kendo-utils, "min-width" ) !default;
 
 @include generate-utils( min-w, min-width, $kendo-utils-min-width );
 
 
-$kendo-utils-max-width: map-get( $kendo-utils, "max-width" ) !default;
+$kendo-utils-max-width: k-map-get( $kendo-utils, "max-width" ) !default;
 
 @include generate-utils( max-w, max-width, $kendo-utils-max-width );
 
@@ -1461,17 +2547,17 @@ $kendo-utils-max-width: map-get( $kendo-utils, "max-width" ) !default;
 // #region @import "./_height.scss"; -> packages/utils/scss/sizing/_height.scss
 // TODO DOCS
 
-$kendo-utils-height: map-get( $kendo-utils, "height" ) !default;
+$kendo-utils-height: k-map-get( $kendo-utils, "height" ) !default;
 
 @include generate-utils( h, height, $kendo-utils-height );
 
 
-$kendo-utils-min-height: map-get( $kendo-utils, "min-height" ) !default;
+$kendo-utils-min-height: k-map-get( $kendo-utils, "min-height" ) !default;
 
 @include generate-utils( min-h, min-height, $kendo-utils-min-height );
 
 
-$kendo-utils-max-height: map-get( $kendo-utils, "max-height" ) !default;
+$kendo-utils-max-height: k-map-get( $kendo-utils, "max-height" ) !default;
 
 @include generate-utils( max-h, max-height, $kendo-utils-max-height );
 
@@ -1483,7 +2569,7 @@ $kendo-utils-max-height: map-get( $kendo-utils, "max-height" ) !default;
 // #region @import "./_font-size.scss"; -> packages/utils/scss/typography/_font-size.scss
 // TODO DOCS
 
-$kendo-utils-font-size: map-get( $kendo-utils, "font-size" ) !default;
+$kendo-utils-font-size: k-map-get( $kendo-utils, "font-size" ) !default;
 
 @include generate-utils( font-size, font-size, $kendo-utils-font-size );
 
@@ -1492,7 +2578,7 @@ $kendo-utils-font-size: map-get( $kendo-utils, "font-size" ) !default;
 // #region @import "./_font-style.scss"; -> packages/utils/scss/typography/_font-style.scss
 // TODO DOCS
 
-$kendo-utils-font-style: map-get( $kendo-utils, "font-style" ) !default;
+$kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
 
 @include generate-utils( font, font-style, $kendo-utils-font-style );
 
@@ -1500,7 +2586,7 @@ $kendo-utils-font-style: map-get( $kendo-utils, "font-style" ) !default;
 // #region @import "./_font-weight.scss"; -> packages/utils/scss/typography/_font-weight.scss
 // TODO DOCS
 
-$kendo-utils-font-weight: map-get( $kendo-utils, "font-weight" ) !default;
+$kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default;
 
 @include generate-utils( font, font-weight, $kendo-utils-font-weight );
 
@@ -1510,23 +2596,28 @@ $kendo-utils-font-weight: map-get( $kendo-utils, "font-weight" ) !default;
 // line height
 // list style
 // #region @import "./_text-align.scss"; -> packages/utils/scss/typography/_text-align.scss
+/// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
 /// @name .k-text-left
-/// @description This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
 /// @group text-align
+/// @contextType css
 
+/// This is equivalent to `text-align: right;`. The inline contents are aligned to the right edge of the line box.
 /// @name .k-text-right
-/// @description This is equivalent to `text-align: right;`. The inline contents are aligned to the right edge of the line box.
 /// @group text-align
+/// @contextType css
 
+/// This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
 /// @name .k-text-center
-/// @description This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
 /// @group text-align
+/// @contextType css
 
+/// This is equivalent to `text-align: justify;`. The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
 /// @name .k-text-justify
-/// @description This is equivalent to `text-align: justify;`. The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
 /// @group text-align
+/// @contextType css
 
-$kendo-utils-text-align: map-get( $kendo-utils, "text-align" ) !default;
+// Text align utility classes
+$kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;
 
 @include generate-utils( text, text-align, $kendo-utils-text-align );
 
@@ -1536,19 +2627,23 @@ $kendo-utils-text-align: map-get( $kendo-utils, "text-align" ) !default;
 // #region @import "./_text-transform.scss"; -> packages/utils/scss/typography/_text-transform.scss
 // TODO DOCS
 
+/// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
 /// @name k-text-lowercase
-/// @description This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
 /// @group text-transform
+/// @contextType css
 
+/// This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase.
 /// @name k-text-uppercase
-/// @description This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase.
 /// @group text-transform
+/// @contextType css
 
+/// This is equivalent to `text-transform: capitalize;`. Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text).
 /// @name k-text-capitalize
-/// @description This is equivalent to `text-transform: capitalize;`. Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text).
 /// @group text-transform
+/// @contextType css
 
-$kendo-utils-text-transform: map-get( $kendo-utils, "text-transform" ) !default;
+// Text transform utility classes
+$kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !default;
 
 @include generate-utils( text, text-transform, $kendo-utils-text-transform );
 
@@ -1557,31 +2652,38 @@ $kendo-utils-text-transform: map-get( $kendo-utils, "text-transform" ) !default;
 // text indent
 // vertical align
 // #region @import "./_white-space.scss"; -> packages/utils/scss/typography/_white-space.scss
+/// This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
 /// @name .k-white-space-normal
-/// @description This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
 /// @name .k-white-space-nowrap
-/// @description This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: pre;`. Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
 /// @name .k-white-space-pre
-/// @description This is equivalent to `white-space: pre;`. Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
 /// @name .k-white-space-pre-wrap
-/// @description This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
 /// @name .k-white-space-pre-line
-/// @description This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
 /// @name .k-white-space-break-spaces
-/// @description This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
 /// @group white-space
+/// @contextType css
 
-$kendo-utils-white-space: map-get( $kendo-utils, "white-space" ) !default;
+// White space utility classes
+$kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;
 
 @include generate-utils( white-space, white-space, $kendo-utils-white-space );
 
@@ -1593,7 +2695,7 @@ $kendo-utils-white-space: map-get( $kendo-utils, "white-space" ) !default;
 // #region @import "./_border-width.scss"; -> packages/utils/scss/border/_border-width.scss
 // TODO DOCS
 
-$kendo-utils-border-width: map-get( $kendo-utils, "border-width" ) !default;
+$kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
 
 @include generate-utils( border, border-width, $kendo-utils-border-width );
 @include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
@@ -1607,7 +2709,7 @@ $kendo-utils-border-width: map-get( $kendo-utils, "border-width" ) !default;
 // #region @import "./_border-style.scss"; -> packages/utils/scss/border/_border-style.scss
 // TODO DOCS
 
-$kendo-utils-border-style: map-get( $kendo-utils, "border-style" ) !default;
+$kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
 
 @include generate-utils( border, border-style, $kendo-utils-border-style );
 @include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
@@ -1621,7 +2723,7 @@ $kendo-utils-border-style: map-get( $kendo-utils, "border-style" ) !default;
 // #region @import "./_border-color.scss"; -> packages/utils/scss/border/_border-color.scss
 // TODO DOCS
 
-$kendo-utils-border-color: map-get( $kendo-utils, "border-color" ) !default;
+$kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
 
 @include generate-utils( border, border-color, $kendo-utils-border-color );
 @include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
@@ -1635,7 +2737,7 @@ $kendo-utils-border-color: map-get( $kendo-utils, "border-color" ) !default;
 // #region @import "./_border-radius.scss"; -> packages/utils/scss/border/_border-radius.scss
 // TODO DOCS
 
-$kendo-utils-border-radius: map-get( $kendo-utils, "border-radius" ) !default;
+$kendo-utils-border-radius: k-map-get( $kendo-utils, "border-radius" ) !default;
 
 @include generate-utils( rounded, border-radius, $kendo-utils-border-radius );
 @include generate-utils( rounded-tl, border-top-left-radius, $kendo-utils-border-radius );
@@ -1651,7 +2753,7 @@ $kendo-utils-border-radius: map-get( $kendo-utils, "border-radius" ) !default;
 // #region @import "./_outline-width.scss"; -> packages/utils/scss/border/_outline-width.scss
 // TODO DOCS
 
-$kendo-utils-outline-width: map-get( $kendo-utils, "outline-width" ) !default;
+$kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
 
 @include generate-utils( outline, outline-width, $kendo-utils-outline-width );
 
@@ -1659,7 +2761,7 @@ $kendo-utils-outline-width: map-get( $kendo-utils, "outline-width" ) !default;
 // #region @import "./_outline-style.scss"; -> packages/utils/scss/border/_outline-style.scss
 // TODO DOCS
 
-$kendo-utils-outline-style: map-get( $kendo-utils, "outline-style" ) !default;
+$kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
 
 @include generate-utils( outline, outline-style, $kendo-utils-outline-style );
 
@@ -1667,7 +2769,7 @@ $kendo-utils-outline-style: map-get( $kendo-utils, "outline-style" ) !default;
 // #region @import "./_outline-color.scss"; -> packages/utils/scss/border/_outline-color.scss
 // TODO DOCS
 
-$kendo-utils-outline-color: map-get( $kendo-utils, "outline-color" ) !default;
+$kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
 
 @include generate-utils( outline, outline-color, $kendo-utils-outline-color );
 
@@ -1675,7 +2777,7 @@ $kendo-utils-outline-color: map-get( $kendo-utils, "outline-color" ) !default;
 // #region @import "./_outline-offset.scss"; -> packages/utils/scss/border/_outline-offset.scss
 // TODO DOCS
 
-$kendo-utils-outline-offset: map-get( $kendo-utils, "outline-offset" ) !default;
+$kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
 
 @include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );
 
@@ -1688,21 +2790,26 @@ $kendo-utils-outline-offset: map-get( $kendo-utils, "outline-offset" ) !default;
 // #region @import "./_border-collapse.scss"; -> packages/utils/scss/table/_border-collapse.scss
 // TODO DOCS
 
-$kendo-utils-border-collapse: map-get( $kendo-utils, "border-collapse" ) !default;
+$kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
 
 @include generate-utils( border, border-collapse, $kendo-utils-border-collapse );
 
 // #endregion
 // #region @import "./_table-layout.scss"; -> packages/utils/scss/table/_table-layout.scss
+// Table-layout documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout.
+
+/// This is equivalent to `table-layout: auto;`. By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.
 /// @name .k-table-layout-auto
-/// @description This is equivalent to `table-layout: auto;`. By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.
 /// @group table-layout
+/// @contextType css
 
+/// This is equivalent to `table-layout: fixed;`. Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
 /// @name .k-table-layout-fixed
-/// @description This is equivalent to `table-layout: fixed;`. Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
 /// @group table-layout
+/// @contextType css
 
-$kendo-utils-table-layout: map-get( $kendo-utils, "table-layout" ) !default;
+// Table layout utility classes
+$kendo-utils-table-layout: k-map-get( $kendo-utils, "table-layout" ) !default;
 
 @include generate-utils( table, table-layout, $kendo-utils-table-layout );
 @include generate-utils( table-layout, table-layout, $kendo-utils-table-layout );
@@ -1713,15 +2820,18 @@ $kendo-utils-table-layout: map-get( $kendo-utils, "table-layout" ) !default;
 // transition
 // #region @import "./transform/index.import.scss"; -> packages/utils/scss/transform/index.import.scss
 // #region @import "./_flip.scss"; -> packages/utils/scss/transform/_flip.scss
+/// This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
 /// @name .k-flip-h
-/// @description This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
 /// @group transform
+/// @contextType css
 
+/// This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically.
 /// @name .k-flip-v
-/// @description This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically.
 /// @group transform
+/// @contextType css
 
-$kendo-utils-flip: map-get( $kendo-utils, "flip" ) !default;
+// Flip utility classes
+$kendo-utils-flip: k-map-get( $kendo-utils, "flip" ) !default;
 
 @if $kendo-utils-flip {
     .#{$kendo-prefix}flip-h { transform: scaleX( -1 ); }
@@ -1740,19 +2850,32 @@ $kendo-utils-flip: map-get( $kendo-utils, "flip" ) !default;
 
 // #endregion
 // #region @import "./_scale.scss"; -> packages/utils/scss/transform/_scale.scss
-// TODO DOCS
+/// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
+/// @name .k-scale-0
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: scale( 1, 1 );`. The element has its default scale.
+/// @name .k-scale-1
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: scale( 2, 2 );`. The element is scaling two times in both directions.
+/// @name .k-scale-2
+/// @group transform
+/// @contextType css
 
-$kendo-utils-scale: map-get( $kendo-utils, "scale" ) !default;
+$kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
 
 // sass-lint:disable function-name-format
 @function __scale( $val ) {
-    @return scale( unquote($val) );
+    @return scale( $val );
 }
 @function __scale-x( $val ) {
-    @return scaleX( unquote($val) );
+    @return scaleX( $val );
 }
 @function __scale-y( $val ) {
-    @return scaleY( unquote($val) );
+    @return scaleY( $val );
 }
 // sass-lint:enable function-name-format
 
@@ -1762,9 +2885,47 @@ $kendo-utils-scale: map-get( $kendo-utils, "scale" ) !default;
 
 // #endregion
 // #region @import "./_rotate.scss"; -> packages/utils/scss/transform/_rotate.scss
-// TODO DOCS
+/// This is equivalent to `transform: rotate( 0 );`. Does not rotate the element.
+/// @name .k-rotate-0
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 45deg );`. Rotates the element by 45 degrees.
+/// @name .k-rotate-45
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 90deg );`. Rotates the element by 90 degrees.
+/// @name .k-rotate-90
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 135deg );`. Rotates the element by 135 degrees.
+/// @name .k-rotate-135
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 180deg );`. Rotates the element by 180 degrees.
+/// @name .k-rotate-180
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 225deg );`. Rotates the element by 225 degrees.
+/// @name .k-rotate-225
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 270deg );`. Rotates the element by 270 degrees.
+/// @name .k-rotate-270
+/// @group transform
+/// @contextType css
 
-$kendo-utils-rotate: map-get( $kendo-utils, "rotate" ) !default;
+/// This is equivalent to `transform: rotate( 315deg );`. Rotates the element by 315 degrees.
+/// @name .k-rotate-315
+/// @group transform
+/// @contextType css
+
+$kendo-utils-rotate: k-map-get( $kendo-utils, "rotate" ) !default;
 
 // sass-lint:disable function-name-format
 @function __rotate( $val ) {
@@ -1776,11 +2937,68 @@ $kendo-utils-rotate: map-get( $kendo-utils, "rotate" ) !default;
 
 // #endregion
 // #region @import "./_translate.scss"; -> packages/utils/scss/transform/_translate.scss
-// TODO DOCS
+/// This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
+/// @name .k-translate-0
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 0, 50% );`. The element moves vertically by 50% of its height.
+/// @name .k-translate-0-50
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 0, 100% );`. The element moves vertically by 100% of its height.
+/// @name .k-translate-0-100
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 50%, 0 );`. The element moves horizontally by 50% of its width.
+/// @name .k-translate-50-0
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 50%, 50% );`. The element moves horizontally by 50% of its width and vertically by 50% of its height.
+/// @name .k-translate-50-50
+/// @group transform
+/// @contextType css
 
-$kendo-utils-translate: map-get( $kendo-utils, "translate" ) !default;
+/// This is equivalent to `transform: translate( 50%, 100% );`. The element moves horizontally by 50% of its width and vertically by 100% of its height.
+/// @name .k-translate-50-100
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 100%, 0 );`. The element moves horizontally by 100% of its width.
+/// @name .k-translate-100-0
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 100%, 50% );`. The element moves horizontally by 100% of its width and vertically by 50% of its height.
+/// @name .k-translate-100-50
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 100%, 100% );`. The element moves horizontally by 100% of its width and vertically by 100% of its height.
+/// @name .k-translate-100-100
+/// @group transform
+/// @contextType css
+
+$kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
+$kendo-utils-translate-xy: (
+    "0": ( 0, 0 ),
+    "0-50": ( 0, 50% ),
+    "0-100": ( 0, 100% ),
+    "50-0": ( 50%, 0 ),
+    "50-50": ( 50%, 50% ),
+    "50-100": ( 50%, 100% ),
+    "100-0": ( 100%, 0 ),
+    "100-50": ( 100%, 50% ),
+    "100-100": ( 100%, 100% )
+) !default;
 
 // sass-lint:disable function-name-format
+@function __translate( $val ) {
+    @return translate( $val );
+}
 @function __translate-x( $val ) {
     @return translateX( $val );
 }
@@ -1789,6 +3007,7 @@ $kendo-utils-translate: map-get( $kendo-utils, "translate" ) !default;
 }
 // sass-lint:enable function-name-format
 
+@include generate-utils( translate, transform, $kendo-utils-translate-xy, __translate );
 @include generate-utils( translate-x, transform, $kendo-utils-translate, __translate-x );
 @include generate-utils( translate-y, transform, $kendo-utils-translate, __translate-y );
 
@@ -1796,7 +3015,7 @@ $kendo-utils-translate: map-get( $kendo-utils, "translate" ) !default;
 // #region @import "./_skew.scss"; -> packages/utils/scss/transform/_skew.scss
 // TODO DOCS
 
-$kendo-utils-skew: map-get( $kendo-utils, "skew" ) !default;
+$kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
 
 // sass-lint:disable function-name-format
 @function __skew-x( $val ) {
@@ -1814,7 +3033,7 @@ $kendo-utils-skew: map-get( $kendo-utils, "skew" ) !default;
 // #region @import "./_origin.scss"; -> packages/utils/scss/transform/_origin.scss
 // TODO DOCS
 
-$kendo-utils-origin: map-get( $kendo-utils, "origin" ) !default;
+$kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
 
 @include generate-utils( origin, transform-origin, $kendo-utils-origin );
 
@@ -1825,21 +3044,24 @@ $kendo-utils-origin: map-get( $kendo-utils, "origin" ) !default;
 // #region @import "./_accent-color.scss"; -> packages/utils/scss/interactivity/_accent-color.scss
 // TODO DOCS
 
-$kendo-utils-accent-color: map-get( $kendo-utils, "accent-color" ) !default;
+$kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
 
 @include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );
 
 // #endregion
 // #region @import "./_appearance.scss"; -> packages/utils/scss/interactivity/_appearance.scss
+/// This is equivalent to `appearance: none;`. Resets any browser specific styling on an element.
 /// @name .k-appearance-none
-/// @description This is equivalent to `appearance: none;`. Resets any browser specific styling on an element.
 /// @group appearance
+/// @contextType css
 
+/// This is equivalent to `appearance: auto;`. The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.
 /// @name .k-appearance-auto
-/// @description This is equivalent to `appearance: auto;`. The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.
 /// @group appearance
+/// @contextType css
 
-$kendo-utils-appearance: map-get( $kendo-utils, "appearance" ) !default;
+// Appearance utility classes
+$kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
 
 @include generate-utils( appearance, appearance, $kendo-utils-appearance );
 
@@ -1847,7 +3069,7 @@ $kendo-utils-appearance: map-get( $kendo-utils, "appearance" ) !default;
 // #region @import "./_cursor.scss"; -> packages/utils/scss/interactivity/_cursor.scss
 // TODO DOCS
 
-$kendo-utils-cursor: map-get( $kendo-utils, "cursor" ) !default;
+$kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
 
 @include generate-utils( cursor, cursor, $kendo-utils-cursor );
 
@@ -1855,43 +3077,51 @@ $kendo-utils-cursor: map-get( $kendo-utils, "cursor" ) !default;
 // #region @import "./_caret-color.scss"; -> packages/utils/scss/interactivity/_caret-color.scss
 // TODO DOCS
 
-$kendo-utils-caret-color: map-get( $kendo-utils, "caret-color" ) !default;
+$kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
 
 @include generate-utils( caret, caret-color, $kendo-utils-caret-color );
 
 // #endregion
 // #region @import "./_pointer-events.scss"; -> packages/utils/scss/interactivity/_pointer-events.scss
+/// This is equivalent to `pointer-events: none;`. The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
 /// @name .k-pointer-events-none
-/// @description This is equivalent to `pointer-events: none;`. The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
 /// @group pointer-events
+/// @contextType css
 
+/// This is equivalent to `pointer-events: auto;`. The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.
 /// @name .k-pointer-events-auto
-/// @description This is equivalent to `pointer-events: auto;`. The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.
 /// @group pointer-events
+/// @contextType css
 
-$kendo-utils-pointer-events: map-get( $kendo-utils, "pointer-events" ) !default;
+// Pointer events utility classes
+$kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
 
 @include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );
 
 // #endregion
 // #region @import "./_resize.scss"; -> packages/utils/scss/interactivity/_resize.scss
+/// This is equivalent to `resize: both;`. The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
 /// @name .k-resize
-/// @description This is equivalent to `resize: both;`. The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
 /// @group resize
+/// @contextType css
 
+/// This is equivalent to `resize: none;`. The element offers no user-controllable method for resizing it.
 /// @name .k-resize-none
-/// @description This is equivalent to `resize: none;`. The element offers no user-controllable method for resizing it.
 /// @group resize
+/// @contextType css
 
+/// This is equivalent to `resize: horizontal;`. The element displays a mechanism for allowing the user to resize it in the horizontal direction.
 /// @name .k-resize-x
-/// @description This is equivalent to `resize: horizontal;`. The element displays a mechanism for allowing the user to resize it in the horizontal direction.
 /// @group resize
+/// @contextType css
 
+/// This is equivalent to `resize: vertical;`. The element displays a mechanism for allowing the user to resize it in the vertical direction.
 /// @name .k-resize-y
-/// @description This is equivalent to `resize: vertical;`. The element displays a mechanism for allowing the user to resize it in the vertical direction.
 /// @group resize
+/// @contextType css
 
-$kendo-utils-resize: map-get( $kendo-utils, "resize" ) !default;
+// Resize utility classes
+$kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
 
 @include generate-utils( resize, resize, $kendo-utils-resize );
 
@@ -1899,12 +3129,12 @@ $kendo-utils-resize: map-get( $kendo-utils, "resize" ) !default;
 // #region @import "./_scroll.scss"; -> packages/utils/scss/interactivity/_scroll.scss
 // TODO DOCS
 
-$kendo-utils-scroll-behavior: map-get( $kendo-utils, "scroll-behavior" ) !default;
+$kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
 
 @include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
 
 
-$kendo-utils-scroll-snap-type: map-get( $kendo-utils, "scroll-snap-type" ) !default;
+$kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
 
 @include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
 
@@ -1912,17 +3142,17 @@ $kendo-utils-scroll-snap-type: map-get( $kendo-utils, "scroll-snap-type" ) !defa
 .#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }
 
 
-$kendo-utils-scroll-snap-stop: map-get( $kendo-utils, "scroll-snap-stop" ) !default;
+$kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
 
 @include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
 
 
-$kendo-utils-scroll-snap-align: map-get( $kendo-utils, "scroll-snap-align" ) !default;
+$kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
 
 @include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
 
 
-$kendo-utils-scroll-margin: map-get( $kendo-utils, "scroll-margin" ) !default;
+$kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
 
 @include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
 @include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
@@ -1933,7 +3163,7 @@ $kendo-utils-scroll-margin: map-get( $kendo-utils, "scroll-margin" ) !default;
 @include generate-utils( scroll-my, scroll-margin-block, $kendo-utils-scroll-margin );
 
 
-$kendo-utils-scroll-padding: map-get( $kendo-utils, "scroll-padding" ) !default;
+$kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
 
 @include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
 @include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
@@ -1947,41 +3177,52 @@ $kendo-utils-scroll-padding: map-get( $kendo-utils, "scroll-padding" ) !default;
 // #region @import "./_touch-action.scss"; -> packages/utils/scss/interactivity/_touch-action.scss
 // TODO DOCS
 
+/// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
 /// @name .k-touch-action-none
-/// @description This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
 /// @group touch-action
+/// @contextType css
 
+/// This is equivalent to `touch-action: auto;`. Enable browser handling of all panning and zooming gestures.
 /// @name .k-touch-action-auto
-/// @description This is equivalent to `touch-action: auto;`. Enable browser handling of all panning and zooming gestures.
 /// @group touch-action
+/// @contextType css
 
-$kendo-utils-touch-action: map-get( $kendo-utils, "touch-action" ) !default;
+// Touch-action utility classes
+$kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
 
 @include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );
 
 // #endregion
 // #region @import "./_user-select.scss"; -> packages/utils/scss/interactivity/_user-select.scss
-/// @name .k-user-select-auto
-/// @description This is equivalent to `user-select: auto;`. This is the default value of the `user-select` property.
-/// @group user-select
+// User-select documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/user-select.
 
+/// This is equivalent to `user-select: none;`. The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.
 /// @name .k-user-select-none
-/// @description This is equivalent to `user-select: none;`. The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.
 /// @group user-select
+/// @contextType css
+
+/// This is equivalent to `user-select: auto;`. This is the default value of the `user-select` property.
+/// @name .k-user-select-auto
+/// @group user-select
+/// @contextType css
 
+/// This is equivalent to `user-select: text;`. The text can be selected by the user.
 /// @name .k-user-select-text
-/// @description This is equivalent to `user-select: text;`. The text can be selected by the user.
 /// @group user-select
+/// @contextType css
 
+/// This is equivalent to `user-select: all;`. The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.  If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
 /// @name .k-user-select-all
-/// @description This is equivalent to `user-select: all;`. The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.  If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
 /// @group user-select
+/// @contextType css
 
+/// This is equivalent to `user-select: contain;`. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
 /// @name .k-user-select-contain
-/// @description This is equivalent to `user-select: contain;`. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
 /// @group user-select
+/// @contextType css
 
-$kendo-utils-user-select: map-get( $kendo-utils, "user-select" ) !default;
+// User select utility classes
+$kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
 
 @include generate-utils( user-select, user-select, $kendo-utils-user-select );
 
@@ -1989,7 +3230,7 @@ $kendo-utils-user-select: map-get( $kendo-utils, "user-select" ) !default;
 // #region @import "./_will-change.scss"; -> packages/utils/scss/interactivity/_will-change.scss
 // TODO DOCS
 
-$kendo-utils-will-change: map-get( $kendo-utils, "will-change" ) !default;
+$kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
 
 @include generate-utils( will-change, will-change, $kendo-utils-will-change );