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

package/scss/layout/_position.scss

@@ -1,6 +1,31 @@
-// 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
 
-$kendo-utils-position: map-get( $kendo-utils, "position" ) !default;
+/// 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
+
+/// 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 );
 
@@ -19,7 +44,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 );
@@ -31,30 +56,30 @@ $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 {
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
 }
 
 .#{$kendo-prefix}top-end,
 .#{$kendo-prefix}pos-top-end {
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
 }
 
 .#{$kendo-prefix}bottom-start,
 .#{$kendo-prefix}pos-bottom-start {
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
 }
 
 .#{$kendo-prefix}bottom-end,
 .#{$kendo-prefix}pos-bottom-end {
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
 }
 
 .#{$kendo-prefix}top-center,
@@ -90,6 +115,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

package/scss/layout/_visibility.scss

@@ -1,6 +1,6 @@
 // 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 );
 

package/scss/layout/_zindex.scss

@@ -1,5 +1,5 @@
 // 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 );

package/scss/sizing/_height.scss

@@ -1,15 +1,15 @@
 // 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 );

package/scss/sizing/_width.scss

@@ -1,15 +1,15 @@
 // 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 );

package/scss/spacing/_margin.scss

@@ -1,6 +1,6 @@
 // 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 );

package/scss/spacing/_padding.scss

@@ -1,6 +1,6 @@
 // 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 );

package/scss/table/_border-collapse.scss

@@ -1,5 +1,5 @@
 // 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 );

package/scss/table/_table-layout.scss

@@ -1,12 +1,17 @@
+// 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 );

package/scss/transform/_flip.scss

@@ -1,12 +1,15 @@
+/// 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 ); }

package/scss/transform/_origin.scss

@@ -1,5 +1,5 @@
 // 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 );

package/scss/transform/_rotate.scss

@@ -1,6 +1,44 @@
-// TODO DOCS
+/// This is equivalent to `transform: rotate( 0 );`. Does not rotate the element.
+/// @name .k-rotate-0
+/// @group transform
+/// @contextType css
 
-$kendo-utils-rotate: map-get( $kendo-utils, "rotate" ) !default;
+/// 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
+
+/// 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 ) {

package/scss/transform/_scale.scss

@@ -1,16 +1,29 @@
-// 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
 
-$kendo-utils-scale: map-get( $kendo-utils, "scale" ) !default;
+/// 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: 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
 

package/scss/transform/_skew.scss

@@ -1,6 +1,6 @@
 // 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 ) {

package/scss/transform/_translate.scss

@@ -1,8 +1,65 @@
-// TODO DOCS
+/// This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
+/// @name .k-translate-0
+/// @group transform
+/// @contextType css
 
-$kendo-utils-translate: map-get( $kendo-utils, "translate" ) !default;
+/// 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
+
+/// 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 );
 }
@@ -11,5 +68,6 @@ $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 );

package/scss/typography/_font-size.scss

@@ -1,5 +1,9 @@
 // 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 );
+
+
+// Legacy aliases
+@include generate-utils( fs, font-size, $kendo-utils-font-size );

package/scss/typography/_font-style.scss

@@ -1,5 +1,5 @@
 // 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 );

package/scss/typography/_font-weight.scss

@@ -1,5 +1,9 @@
 // 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 );
+
+
+// Legacy aliases
+@include generate-utils( font-weight, font-weight, $kendo-utils-font-weight );

package/scss/typography/_text-align.scss

@@ -1,19 +1,26 @@
+// Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
+
+/// 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 );

package/scss/typography/_text-color.scss

@@ -0,0 +1,9 @@
+// TODO DOCS
+
+$kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
+
+@include generate-utils( text, color, $kendo-utils-text-color );
+
+
+// Legacy aliases
+@include generate-utils( color, color, $kendo-utils-text-color );

package/scss/typography/_text-transform.scss

@@ -1,17 +1,21 @@
-// TODO DOCS
+// Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
 
+/// 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 );

package/scss/typography/_white-space.scss

@@ -1,27 +1,41 @@
+// White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
+
+/// 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 );
+@include generate-utils( whitespace, white-space, $kendo-utils-white-space );
+
+
+// Legacy aliases
+.#{$kendo-prefix}text-nowrap { @extend .#{$kendo-prefix}white-space-nowrap !optional; }

package/scss/typography/index.import.scss

@@ -8,10 +8,16 @@
 // line height
 // list style
 @import "./_text-align.scss";
-// text color
+@import "./_text-color.scss";
 // text decoration
 @import "./_text-transform.scss";
 // text overflow
 // text indent
 // vertical align
 @import "./_white-space.scss";
+
+
+/// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
+/// @name .k-text-ellipsis
+/// @group text
+.#{$kendo-prefix}text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line