@progress/kendo-theme-utils 6.1.1-dev.1 → 6.1.1-dev.11

package/dist/all.scss

@@ -12,66 +12,171 @@ $equilateral-height: .8660254038 !default;
 // #endregion
 
 // #region @import "./_color.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
+/// Returns the alpha channel of a color.
+/// @param {Color} $color - The color to get the alpha channel for.
+/// @return {Number} - The alpha channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-alpha( rgba( 0, 0, 0, 0.5 ) ); // => 0.5
+///   @debug k-color-alpha( #000 ); // => 1
 @function k-color-alpha( $color ) {
     @return alpha( $color );
 }
 
+/// Returns the red channel of a color.
+/// @param {Color} $color - The color to get the red channel for.
+/// @return {Number} - The red channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-red( #ff0000 ); // => 255
 @function k-color-red( $color ) {
     @return red( $color );
 }
 
+/// Returns the green channel of a color.
+/// @param {Color} $color - The color to get the green channel for.
+/// @return {Number} - The green channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-green( #00ff00 ); // => 255
 @function k-color-green( $color ) {
     @return green( $color );
 }
 
+/// Returns the blue channel of a color.
+/// @param {Color} $color - The color to get the blue channel for.
+/// @return {Number} - The blue channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-blue( #0000ff ); // => 255
 @function k-color-blue( $color ) {
     @return blue( $color );
 }
 
+/// Returns the hue of a color.
+/// @param {Color} $color - The color to get the hue for.
+/// @return {Number} - The hue of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-hue( #e1d7d2 ); // => 20deg
 @function k-color-hue( $color ) {
     @return hue( $color );
 }
 
+/// Returns the saturation of a color.
+/// @param {Color} $color - The color to get the saturation for.
+/// @return {Number} - The saturation of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-saturation( #e1d7d2 ); // => 20%
 @function k-color-saturation( $color ) {
     @return saturation( $color );
 }
 
+/// Returns the lightness of a color.
+/// @param {Color} $color - The color to get the lightness for.
+/// @return {Number} - The lightness of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-lightness( #e1d7d2 ); // => 80%
 @function k-color-lightness( $color ) {
     @return lightness( $color );
 }
 
+/// Returns a color that is a mix of two colors.
+/// @param {Color} $color1 - The first color.
+/// @param {Color} $color2 - The second color.
+/// @param {Number} $weight - The weight of the first color in the mix.
+/// @return {Color} - The mixed color.
+///
+/// @example scss - Usage
+///   @debug k-color-mix( #f00, #00f ); // => #800080
 @function k-color-mix( $color1, $color2, $weight: 50% ) {
     @return mix( $color1, $color2, $weight );
 }
 
+/// Makes a color darker by decreasing its lightness.
+/// @param {Color} $color - The color to darken.
+/// @param {Number} $amount - The amount to darken the color.
+/// @return {Color} - The darkened color.
+///
+/// @example scss - Usage
+///   @debug k-color-darken( #f00, 10% ); // => #e60000
 @function k-color-darken( $color, $amount) {
     @return darken( $color, $amount );
 }
 
+/// Makes a color lighter by increasing its lightness.
+/// @param {Color} $color - The color to lighten.
+/// @param {Number} $amount - The amount to lighten the color.
+/// @return {Color} - The lightened color.
+///
+/// @example scss - Usage
+///   @debug k-color-lighten( #f00, 10% ); // => #ff1a1a
 @function k-color-lighten( $color, $amount) {
     @return lighten( $color, $amount );
 }
 
+/// Increases or decreases the hue of a color.
+/// @param {Color} $color - The color to adjust the hue for.
+/// @param {Number} $degrees - The amount to adjust the hue.
+/// @return {Color} - The adjusted color.
+///
+/// @example scss - Usage
+///   @debug k-color-adjust-hue( #f00, 10deg ); // => #ff1a00
 @function k-color-adjust-hue( $color, $degrees ) {
     @return adjust-hue( $color, $degrees );
 }
 
+/// Increases the saturation of a color.
+/// @param {Color} $color - The color to saturate.
+/// @param {Number} $amount - The amount to saturate the color.
+/// @return {Color} - The saturated color.
+///
+/// @example scss - Usage
+///   @debug k-color-saturate( #f00, 10% ); // => #ff3333
 @function k-color-saturate( $color, $amount ) {
     @return saturate( $color, $amount );
 }
 
+/// Decreases the saturation of a color.
+/// @param {Color} $color - The color to desaturate.
+/// @param {Number} $amount - The amount to desaturate the color.
+/// @return {Color} - The desaturated color.
+///
+/// @example scss - Usage
+///   @debug k-color-desaturate( #f00, 10% ); // => #e60000
 @function k-color-desaturate( $color, $amount ) {
     @return desaturate( $color, $amount );
 }
 
+/// Returns a gray color with the same lightness as the input color.
+/// @param {Color} $color - The color to convert to grayscale.
+/// @return {Color} - The grayscale color.
+///
+/// @example scss - Usage
+///   @debug k-color-grayscale( #f00 ); // => #808080
 @function k-color-grayscale( $color ) {
     @return grayscale( $color );
 }
 
+/// Returns the RGB complement of a color. This identical to adjusting the hue
+/// by 180 degrees.
+/// @param {Color} $color - The color to get the complement for.
+/// @return {Color} - The complement color.
+///
+/// @example scss - Usage
+///   @debug k-color-complement( #f00 ); // => #00ffff
 @function k-color-complement( $color ) {
     @return complement( $color );
 }
 
+/// Returns the inverse of a color.
+/// @param {Color} $color - The color to invert.
+/// @return {Color} - The inverted color.
+///
+/// @example scss - Usage
+///   @debug k-color-invert( #f00 ); // => #00ffff
 @function k-color-invert( $color ) {
     @return invert( $color );
 }
@@ -351,17 +456,31 @@ $_linear-channel-values: (
     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
+/// 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.
+/// @type Number
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 $wcag-min-contrast-ratio: 7 !default;
+/// Default dark color for WCAG 2.0.
+/// @type Color
+/// @group accessibility
 $wcag-dark: black !default;
+/// Default light color for WCAG 2.0.
+/// @type Color
+/// @group accessibility
 $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
+/// Calculate the relative luminance for a color.
+/// @param {Color} $color - The color to calculate the relative luminance for.
+/// @return {Number} - The relative luminance for the color.
+///
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+/// @link 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 );
@@ -370,9 +489,15 @@ $wcag-light: white !default;
     @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
+/// Calculates contrast ratio between two colors
+/// @param {Color} $background - The background color
+/// @param {Color} $foreground - The foreground color
+/// @return {Number} - The contrast ratio between the two colors
+///
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+/// @link 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;
@@ -381,15 +506,34 @@ $wcag-light: white !default;
     @return k-math-div( k-math-max( $backLum, $foreLum ), k-math-min( $backLum, $foreLum ) );
 }
 
+/// Checks if a color is dark
+/// @param {Color} $color - The color to check
+/// @return {Boolean} - True if the color is dark, false otherwise
+///
+/// @group accessibility
 @function k-is-dark( $color ) {
     @return if( k-color-luminance( $color ) < .5, true, false );
 }
+
+/// Checks if a color is light
+/// @param {Color} $color - The color to check
+/// @return {Boolean} - True if the color is light, false otherwise
+///
+/// @group accessibility
 @function k-is-light( $color ) {
     @return if( k-color-luminance( $color ) < .5, false, true );
 }
 
 
-// Contrast functions
+/// Calculates the contrast ratio between a background color and a foreground color.
+/// If the contrast ratio is not high enough, it will return the color with the highest contrast ratio.
+/// @param {Color} $background - The background color
+/// @param {Color} $dark - The dark color to use as a fallback
+/// @param {Color} $light - The light color to use as a fallback
+/// @param {Number} $min-ratio - The minimum contrast ratio to reach
+/// @return {Color} - The color with the highest contrast ratio
+///
+/// @group accessibility
 @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;
@@ -460,13 +604,38 @@ $kendo-color-level-step: 8% !default;
     @return k-color-mix( $base, $color, $level * $kendo-color-level-step );
 }
 
+/// Makes a color lighter by mixing it with white
+/// @param {Color} $color - The color to lighten
+/// @param {Number} $level - The amount to lighten the color
+/// @return {Color} - The lightened color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-color-tint( #f00, 1 ); // => #ff1a1a
 @function k-color-tint( $color, $level: 1 ) {
     @return k-color-level( $color, -$level );
 }
+
+/// Makes a color darker by mixing it with black
+/// @param {Color} $color - The color to darken
+/// @param {Number} $level - The amount to darken the color
+/// @return {Color} - The darkened color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-color-shade( #f00, 1 ); // => #e60000
 @function k-color-shade( $color, $level: 1 ) {
     @return k-color-level( $color, $level );
 }
 
+/// Shades the color in light themes and tints it in dark themes
+/// @param {Color} $color - The color to shade or tint
+/// @param {Number} $level - The amount to shade or tint the color
+/// @return {Color} - The shaded or tinted color
+///
+/// @group color-system
 @function k-try-shade( $color, $level: 1 ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -476,6 +645,13 @@ $kendo-color-level-step: 8% !default;
 
     @return k-color-shade( $color, $level );
 }
+
+/// Tints the color in light themes and shades it in dark themes
+/// @param {Color} $color - The color to tint or shade
+/// @param {Number} $level - The amount to tint or shade the color
+/// @return {Color} - The tinted or shaded color
+///
+/// @group color-system
 @function k-try-tint( $color, $level: 1 ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -486,7 +662,12 @@ $kendo-color-level-step: 8% !default;
     @return k-color-tint( $color, $level );
 }
 
-
+/// Darkens the color in light themes and lightens it in dark themes
+/// @param {Color} $color - The color to darken or lighten
+/// @param {Number} $level - The amount to darken or lighten the color
+/// @return {Color} - The darkened or lightened color
+///
+/// @group color-system
 @function k-try-darken( $color, $amount ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -496,6 +677,12 @@ $kendo-color-level-step: 8% !default;
     @return k-color-darken( $color, $amount );
 }
 
+/// Lightens the color in light themes and darkens it in dark themes
+/// @param {Color} $color - The color to lighten or darken
+/// @param {Number} $level - The amount to lighten or darken the color
+/// @return {Color} - The lightened or darkened color
+///
+/// @group color-system
 @function k-try-lighten( $color, $amount ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -505,6 +692,15 @@ $kendo-color-level-step: 8% !default;
     @return k-color-lighten( $color, $amount );
 }
 
+/// Converts a color with alpha to solid color mixed with a background color
+/// @param {Color} $color - The color to convert
+/// @param {Color} $bg - The background color
+/// @return {Color} - The converted color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
 @function k-rgba-to-mix( $color, $bg ) {
     $percent: k-color-alpha( $color ) * 100%;
 
@@ -567,7 +763,11 @@ $_kendo-svg-escaped-characters: (
     (")", "%29")
 ) !default;
 
-// See https://codepen.io/kevinweber/pen/dXWoRw
+/// Escapes SVG characters in a string
+/// @param {String} $string - The string to escape
+/// @return {String} - The escaped string
+///
+/// @link 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 {
@@ -590,6 +790,9 @@ $_kendo-escape-class-name: (
     "/": "\\/"
 );
 
+/// Escapes special characters in a class name
+/// @param {String} $text - The string to escape
+/// @return {String} - The escaped string
 @function k-escape-class-name( $text ) {
     $_text: $text;
 
@@ -602,40 +805,110 @@ $_kendo-escape-class-name: (
 
 // #endregion
 // #region @import "./_lang.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_lang.import.scss
+/// Returns the value of a variable if it is not null,
+/// otherwise returns the fallback value.
+/// @param {Any} $var - The variable to check.
+/// @param {Any} $fallback - The fallback value.
+/// @return {Any} - The value of the variable or the fallback value.
+///
+/// @example scss - Usage
+///   $foo: null;
+///   @debug k-if-var( $foo, "bar" ); // => "bar"
+///   $foo: "baz";
+///   @debug k-if-var( $foo, "bar" ); // => "baz"
 @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
+/// Returns a copy of `$list` with `$val` appended to the end.
+/// @param {List} $list - The list to process.
+/// @param {Any} $val - The value to append to `$list`.
+/// @param {String} $separator - The separator to use between `$list` and `$val`.
+/// @return {List} - A copy of `$list` with `$val` appended to the end.
+///
+/// @example scss - Usage
+///   @debug k-list-append( ( "foo", "bar" ), "baz" ); // => "foo, bar, baz"
 @function k-list-append( $list, $val, $separator: auto ) {
     @return append( $list, $val, $separator );
 }
 
+/// Checks whether `$list` contains `$value`.
+/// @param {List} $list - The list to check.
+/// @param {Any} $value - The value to check for.
+/// @return {Boolean} - Whether `$list` contains `$value`.
+///
+/// @example scss - Usage
+///   @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
+///   @debug k-list-includes( ( "foo", "bar" ), "baz" ); // => false
 @function k-list-includes( $list, $value ) {
     @return k-list-index( $list, $value ) != null;
 }
 
+/// Returns the index of `$value` in `$list`.
+/// @param {List} $list - The list to check.
+/// @param {Any} $value - The value to check for.
+/// @return {Number} - The index of `$value` in `$list`.
+///
+/// @example scss - Usage
+///   @debug k-list-index( ( "foo", "bar" ), "foo" ); // => 1
 @function k-list-index( $list, $value ) {
     @return index( $list, $value );
 }
 
+/// Returns whether `$list` is bracketed.
+/// @param {List} $list - The list to check.
+/// @return {Boolean} - Whether `$list` is bracketed.
+///
+/// @example scss - Usage
+///   @debug k-list-is-bracketed( ( "foo", "bar" ) ); // => false
+///   @debug k-list-is-bracketed( [ "foo", "bar" ] ); // => true
 @function k-list-is-bracketed( $list ) {
     @return is-bracketed( $list );
 }
 
+/// Joins two lists together.
+/// @param {List} $list1 - The first list to join.
+/// @param {List} $list2 - The second list to join.
+/// @param {String} $separator - The separator to use between `$list1` and `$list2`.
+/// @param {Boolean} $bracketed - Whether the result should be bracketed.
+/// @return {List} - The joined list.
+///
+/// @example scss - Usage
+///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ) ); // => "foo, bar, baz, qux"
+///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ), " " ); // => "foo bar baz qux"
 @function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
     @return join( $list1, $list2, $separator, $bracketed );
 }
 
+/// Returns the length of `$list`.
+/// @param {List} $list - The list to check.
+/// @return {Number} - The length of `$list`.
+///
+/// @example scss - Usage
+///   @debug k-list-length( ( "foo", "bar" ) ); // => 2
 @function k-list-length( $list ) {
     @return length( $list );
 }
 
+/// Returns the nth item in `$list`.
+/// @param {List} $list - The list to check.
+/// @param {Number} $n - The index of the item to return.
+/// @return {Any} - The nth item in `$list`.
+///
+/// @example scss - Usage
+///   @debug k-list-nth( ( "foo", "bar" ), 1 ); // => "foo"
 @function k-list-nth( $list, $n ) {
     @return nth( $list, $n );
 }
 
+/// Reverse the order of items in `$list`.
+/// @param {List} $list - The list to reverse.
+/// @return {List} - The reversed list.
+///
+/// @example scss - Usage
+///   @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"
 @function k-list-reverse( $list: null ) {
     $result: ();
 
@@ -654,64 +927,185 @@ $_kendo-escape-class-name: (
     @return $result;
 }
 
+/// Returns the separator of `$list`.
+/// @param {List} $list - The list to check.
+/// @return {String} - The separator of `$list`.
+///
+/// @example scss - Usage
+///   @debug k-list-separator( ( "foo", "bar" ) ); // => ","
 @function k-list-separator( $list ) {
     @return list-separator( $list );
 }
 
+/// Returns a copy of `$list` with `$val` inserted at `$n`.
+/// @param {List} $list - The list to process.
+/// @param {Number} $n - The index at which to insert `$val`.
+/// @param {Any} $val - The value to insert.
+/// @return {List} - A copy of `$list` with `$val` inserted at `$n`.
+///
+/// @example scss - Usage
+///   @debug k-list-set-nth( ( "foo", "bar" ), 1, "baz" ); // => "baz, bar"
 @function k-list-set-nth( $list, $n, $value ) {
     @return set-nth( $list, $n, $value );
 }
 
+/// Combines two lists into a single list of two-item lists.
+/// @param {List} $list1 - The first list to combine.
+/// @param {List} $list2 - The second list to combine.
+/// @return {List} - A list of two-item lists.
+///
+/// @example scss - Usage
+///   @debug k-list-zip( ( "foo", "bar" ), ( "baz", "qux" ) ); // => ((foo, baz), (bar, qux))
 @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
+/// Returns the absolute value of a number.
+/// @param {Number} $number - The number to get the absolute value of.
+/// @return {Number} - The absolute value of `$number`.
+///
+/// @example scss - Usage
+///   @debug k-math-abs( -10 ); // => 10
 @function k-math-abs( $number ) {
     @return abs( $number );
 }
 
+/// Returns the smallest integer greater than or equal to a number.
+/// @param {Number} $number - The number to get the ceiling of.
+/// @return {Number} - The ceiling of `$number`.
+///
+/// @example scss - Usage
+///   @debug k-math-ceil( 10.1 ); // => 11
 @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 ) );
-}
-
+/// Returns the largest integer less than or equal to a number.
+/// @param {Number} $number - The number to get the floor of.
+/// @return {Number} - The floor of `$number`.
+///
+/// @example scss - Usage
+///   @debug k-math-floor( 10.9 ); // => 10
+@function k-math-floor( $number ) {
+    @return floor( $number );
+}
+
+/// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
+/// less than `$min`, `$min` is returned. If `$number` is greater than `$max`,
+/// `$max` is returned. Otherwise, `$number` is returned.
+/// @param {Number} $number - The number to clamp.
+/// @param {Number} $min - The minimum value.
+/// @param {Number} $max - The maximum value.
+/// @return {Number} - The clamped number.
+///
+/// @example scss - Usage
+///   @debug k-math-clamp( 10, 0, 5 ); // => 5
+@function k-math-clamp( $number, $min, $max ) {
+    @return k-math-max( $min, k-math-min( $max, $number ) );
+}
+
+/// Returns whether two numbers have compatible units.
+/// @param {Number} $a - The first number.
+/// @param {Number} $b - The second number.
+/// @return {Boolean} - Whether the numbers have compatible units.
+///
+/// @example scss - Usage
+///   @debug k-math-compatible( 10px, 10px ); // => true
+///   @debug k-math-compatible( 10px, 10em ); // => false
 @function k-math-compatible( $a, $b ) {
     @return comparable( $a, $b );
 }
 
+/// Returns the quotient of two numbers.
+/// @param {Number} $a - The dividend.
+/// @param {Number} $b - The divisor.
+/// @return {Number} - The quotient of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-div( 10, 2 ); // => 5
+///   @debug k-math-div( 10px, 2 ); // => 5px
 @function k-math-div( $a, $b )  {
     @return ( $a / $b );
 }
 
+/// Returns whether `$number` has no units.
+/// @param {Number} $number - The number to check.
+/// @return {Boolean} - Whether `$number` has no units.
+///
+/// @example scss - Usage
+///   @debug k-math-is-unitless( 10 ); // => true
+///   @debug k-math-is-unitless( 10px ); // => false
 @function k-math-is-unitless( $number ) {
     @return unitless( $number );
 }
 
+/// Returns the larger of two numbers.
+/// @param {Number} $a - The first number.
+/// @param {Number} $b - The second number.
+/// @return {Number} - The larger of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-max( 10, 20 ); // => 20
+///   @debug k-math-max( 10px, 20px ); // => 20px
 @function k-math-max( $a, $b ) {
     @return max( $a, $b );
 }
 
+/// Returns the smaller of two numbers.
+/// @param {Number} $a - The first number.
+/// @param {Number} $b - The second number.
+/// @return {Number} - The smaller of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-min( 10, 20 ); // => 10
+///   @debug k-math-min( 10px, 20px ); // => 10px
 @function k-math-min( $a, $b ) {
     @return min( $a, $b );
 }
 
+/// Returns the remainder of two numbers.
+/// @param {Number} $a - The dividend.
+/// @param {Number} $b - The divisor.
+/// @return {Number} - The remainder of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-mod( 10, 3 ); // => 1
+///   @debug k-math-mod( 10px, 3 ); // => 1px
 @function k-math-mod( $a, $b ) {
     @return ( $a % $b );
 }
 
+/// Returns the product of two numbers.
+/// @param {Number} $a - The first number.
+/// @param {Number} $b - The second number.
+/// @return {Number} - The product of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-mul( 10, 2 ); // => 20
+///   @debug k-math-mul( 10px, 2 ); // => 20px
 @function k-math-mul( $a, $b ) {
     @return ( $a * $b );
 }
 
+/// Converts a unitless number to a percentage.
+/// @param {Number} $number - The number to convert.
+/// @return {Number} - The percentage.
+///
+/// @example scss - Usage
+///   @debug k-math-percentage( 0.5 ); // => 50%
 @function k-math-percentage( $number ) {
-    @return ( $number * 100% );
+    @return percentage( $number );
 }
 
+/// Returns the result of raising `$x` to the power of `$n`.
+/// @param {Number} $x - The base.
+/// @param {Number} $n - The exponent.
+/// @return {Number} - The result of raising `$x` to the power of `$n`.
+///
+/// @example scss - Usage
+///   @debug k-math-pow( 2, 3 ); // => 8
 @function k-math-pow( $x, $n ) {
     $ret: 1;
 
@@ -733,10 +1127,12 @@ $_kendo-escape-class-name: (
 
 }
 
-@function k-math-percentage( $number ) {
-    @return percentage( $number );
-}
-
+/// Returns a random number between 0 and 1.
+/// @param {Number} $limit - The upper limit of the random number.
+/// @return {Number} - A random number between 0 and 1.
+///
+/// @example scss - Usage
+///   @debug k-math-random(); // => 0.123456789
 @function k-math-random( $limit: null ) {
     @if ( $limit == null ) {
         @return random();
@@ -745,6 +1141,14 @@ $_kendo-escape-class-name: (
     @return random( $limit );
 }
 
+/// Returns the result of rounding `$number` to the nearest integer
+/// using the specified `$precision`.
+/// @param {Number} $number - The number to round.
+/// @param {Number} $precision - The number of decimal places to round to.
+/// @return {Number} - The rounded number.
+///
+/// @example scss - Usage
+///   @debug k-math-round( 10.123456789, 3 ); // => 10.123
 @function k-math-round( $number, $precision: 0 ) {
 
     @if ( $precision == 0 ) {
@@ -756,10 +1160,22 @@ $_kendo-escape-class-name: (
     @return k-math-div( round( $number * $pow ), $pow );
 }
 
+/// Returns a string representation of `$number`'s unit.
+/// @param {Number} $number - The number to get the unit of.
+/// @return {String} - The unit of `$number`.
+///
+/// @example scss - Usage
+///   @debug k-math-unit( 10px ); // => px
 @function k-math-unit( $number ) {
     @return unit( $number );
 }
 
+/// Remove the unit from a number.
+/// @param {Number} $number - The number to remove the unit from.
+/// @return {Number} - The unitless number.
+///
+/// @example scss - Usage
+///   @debug k-math-strip-unit( 10px ); // => 10
 @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) );
@@ -770,6 +1186,12 @@ $_kendo-escape-class-name: (
 
 // #endregion
 // #region @import "./_map.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_map.import.scss
+/// Returns the value at `$key` in `$map`.
+/// @param {Map} $map - The map to get the value from.
+/// @param {Any} $key - The key to get the value for.
+///
+/// @example scss - Usage
+///   @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
 @function k-map-get( $map, $keys... ) {
     @each $key in $keys {
         $map: map-get( $map, $key );
@@ -777,14 +1199,35 @@ $_kendo-escape-class-name: (
     @return $map;
 }
 
+/// Returns whether `$map` has a value at `$key`.
+/// @param {Map} $map - The map to check.
+/// @param {Any} $key - The key to check.
+/// @return {Boolean} - Whether `$map` has a value at `$key`.
+///
+/// @example scss - Usage
+///   @debug k-map-has( ( "foo": "bar" ), "foo" ); // => true
+///   @debug k-map-has( ( "foo": "bar" ), "bar" ); // => false
 @function k-map-has-key( $map, $key ) {
     @return map-has-key( $map, $key );
 }
 
+/// Returns a comma separated list of the keys in `$map`.
+/// @param {Map} $map - The map to get the keys from.
+/// @return {List} - A comma separated list of the keys in `$map`.
+///
+/// @example scss - Usage
+///   @debug k-map-keys( ( "foo": "bar", "baz": "qux" ) ); // => "foo, baz"
 @function k-map-keys( $map ) {
     @return map-keys( $map );
 }
 
+/// Returns a map with the keys and values from `$map` and `$args`.
+/// @param {Map} $map - The map to merge.
+/// @param {Map} $args - The map to merge into `$map`.
+/// @return {Map} - A map with the keys and values from `$map` and `$args`.
+///
+/// @example scss - Usage
+///   @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
 @function k-map-merge( $map, $args... ) {
     @each $arg in $args {
         $map: map-merge( $map, $arg );
@@ -792,14 +1235,35 @@ $_kendo-escape-class-name: (
     @return $map;
 }
 
+/// Returns a map with the keys and values from `$map` except for `$keys`.
+/// @param {Map} $map - The map to remove keys from.
+/// @param {Any} $keys - The keys to remove from `$map`.
+/// @return {Map} - A map with the keys and values from `$map` except for `$keys`.
+///
+/// @example scss - Usage
+///   @debug k-map-remove( ( "foo": "bar", "baz": "qux" ), "foo" ); // => ( "baz": "qux" )
 @function k-map-remove( $map, $keys... ) {
     @return map-remove( $map, $keys... );
 }
 
+/// Sets a single key and value in `$map`.
+/// @param {Map} $map - The map to set the value in.
+/// @param {Any} $key - The key to set the value for.
+/// @param {Any} $value - The value to set.
+/// @return {Map} - A map with the key and value set.
+///
+/// @example scss - Usage
+///   @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
 @function k-map-set( $map, $key, $value ) {
     @return k-map-merge( $map, ( $key: $value ) );
 }
 
+/// Returns a comma separated list of the values in `$map`.
+/// @param {Map} $map - The map to get the values from.
+/// @return {List} - A comma separated list of the values in `$map`.
+///
+/// @example scss - Usage
+///   @debug k-map-values( ( "foo": "bar", "baz": "qux" ) ); // => "bar, qux"
 @function k-map-values( $map ) {
     @return map-values( $map );
 }
@@ -808,101 +1272,300 @@ $_kendo-escape-class-name: (
 // #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/
 
+/// A wrapper around the `call()` function.
+/// Calls the function `$function` with the arguments `$args`.
+/// @param {Function} $function - The function to call.
+/// @param {List} $args - The arguments to pass to `$function`.
+/// @return {Any} - The result of calling `$function` with `$args`.
+///
+/// @example scss - Usage
+///   @debug k-meta-call( k-meta-get-function( "k-string-replace" ), "foo bar", "bar", "baz" ); // => "foo baz"
 @function k-meta-call( $function, $args... ) {
     @return call( $function, $args... );
 }
 
+/// A wrapper around the `function-exists()` function.
+/// Returns whether a function with the name `$name` exists.
+/// @param {String} $name - The name of the function to check.
+/// @return {Boolean} - Whether a function with the name `$name` exists.
+///
+/// @example scss - Usage
+///   @debug k-meta-function-exists( "k-string-replace" ); // => true
 @function k-meta-function-exists( $name ) {
     @return function-exists( $name );
 }
 
+/// A wrapper around the `get-function()` function.
+/// Returns the function with the name `$name`.
+/// @param {String} $name - The name of the function to get.
+/// @param {Boolean} $css - Whether to return the CSS representation of the function.
+/// @param {Module} $module - The module to get the function from.
+/// @return {Function} - The function with the name `$name`.
+///
+/// @example scss - Usage
+///   @debug k-meta-get-function( "k-string-replace" ); // => Function
 @function k-meta-get-function( $name, $args... ) {
     @return get-function( $name, $args... );
 }
 
+/// A wrapper around the `inspect()` function.
+/// Returns a string representation of `$value`.
+/// @param {Any} $value - The value to inspect.
+/// @return {String} - A string representation of `$value`.
+///
+/// @example scss - Usage
+///   @debug k-meta-inspect( "foo bar" ); // => "foo bar"
 @function k-meta-inspect( $value ) {
     @return inspect( $value );
 }
 
+/// A wrapper around the `keywords()` function.
+/// Returns a map of the keywords in `$args`.
+/// @param {List} $args - The arguments to process.
+/// @return {Map} - A map of the keywords in `$args`.
+///
+/// @example scss - Usage
+///   @debug k-meta-keywords( ( "foo" "bar" "baz" "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
 @function k-meta-keywords( $args ) {
     @return keywords( $args );
 }
 
+/// A wrapper around the `type-of()` function.
+/// Returns the type of `$value`.
+/// @param {Any} $value - The value to get the type of.
+/// @return {String} - The type of `$value`.
+///
+/// @example scss - Usage
+///   @debug k-meta-type-of( "foo bar" ); // => "string"
 @function k-meta-type-of( $value ) {
     @return type-of( $value );
 }
 
+/// A wrapper around the `variable-exists()` function.
+/// Returns whether a variable with the name `$name` exists.
+/// @param {String} $name - The name of the variable to check.
+/// @return {Boolean} - Whether a variable with the name `$name` exists.
+///
+/// @example scss - Usage
+///   @debug k-meta-variable-exists( "foo" ); // => true
 @function k-meta-variable-exists( $name ) {
     @return variable-exists( $name );
 }
 
+/// Checks whether `$value` is a <number> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a number.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/number
+///
+/// @example scss - Usage
+///   @debug k-meta-is-number( 1 ); // => true
+///   @debug k-meta-is-number( "foo" ); // => false
 @function k-meta-is-number( $value ) {
     @return k-meta-type-of( $value ) == "number";
 }
 
+/// Checks whether `$value` is a <integer> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a integer.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/integer
+///
+/// @example scss - Usage
+///   @debug k-meta-is-integer( 1 ); // => true
+///   @debug k-meta-is-integer( 1.5 ); // => false
 @function k-meta-is-integer( $value ) {
     @return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
 }
 
+/// Checks whether `$value` is a <time> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a time.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
+///
+/// @example scss - Usage
+///   @debug k-meta-is-time( 1s ); // => true
+///   @debug k-meta-is-time( 1 ); // => false
 @function k-meta-is-time( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is a valid duration period.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a duration.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
+///
+/// @example scss - Usage
+///   @debug k-meta-is-duration( 1s ); // => true
+///   @debug k-meta-is-duration( 1 ); // => false
 @function k-meta-is-duration( $value ) {
     @return k-meta-is-time( $value );
 }
 
+/// Checks whether `$value` is a <angle> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a angle.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+///
+/// @example scss - Usage
+///   @debug k-meta-is-angle( 1deg ); // => true
+///   @debug k-meta-is-angle( 1 ); // => false
 @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;
 }
 
+/// Checks whether `$value` is a <frequency> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a frequency.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
+///
+/// @example scss - Usage
+///   @debug k-meta-is-frequency( 1Hz ); // => true
+///   @debug k-meta-is-frequency( 1 ); // => false
 @function k-meta-is-frequency( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is a relative <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a relative length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_font
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport
+///
+/// @example scss - Usage
+///   @debug k-meta-is-relative-length( 1em ); // => true
+///   @debug k-meta-is-relative-length( 1ch ); // => true
+///   @debug k-meta-is-relative-length( 1 ); // => false
 @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;
 }
 
+/// Checks whether `$value` is an absolute <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is an absolute length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#absolute_length_units
+///
+/// @example scss - Usage
+///   @debug k-meta-is-absolute-length( 1cm ); // => true
+///   @debug k-meta-is-absolute-length( 1 ); // => false
 @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;
 }
 
+/// Checks whether `$value` is a <percentage> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a percentage.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
+///
+/// @example scss - Usage
+///   @debug k-meta-is-percentage( 1% ); // => true
+///   @debug k-meta-is-percentage( 1 ); // => false
 @function k-meta-is-percentage( $value ) {
     @return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
 }
 
+/// Checks whether `$value` is a <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length
+///
+/// @example scss - Usage
+///   @debug k-meta-is-length( 1em ); // => true
+///   @debug k-meta-is-length( 1cm ); // => true
+///   @debug k-meta-is-length( 1 ); // => false
 @function k-meta-is-length( $value ) {
     @return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
 }
 
+/// Checks whether `$value` is a <resolution> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a resolution.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
+///
+/// @example scss - Usage
+///   @debug k-meta-is-resolution( 1dpi ); // => true
+///   @debug k-meta-is-resolution( 1 ); // => false
 @function k-meta-is-resolution( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is a <position> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a position.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
+///
+/// @example scss - Usage
+///   @debug k-meta-is-position( center ); // => true
 @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
+/// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
+/// @param {String} $string - The string to process.
+/// @param {String} $substring - The substring to look for.
+/// @return {Number} - The first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
+///
+/// @example scss - Usage
+///   @debug k-string-index( "foo bar", "bar" ); // => 5
 @function k-string-index( $string, $substring ) {
     @return str-index( $string, $substring );
 }
 
+/// Returns a copy of `$string` with `$insert` inserted at `$index`.
+/// @param {String} $string - The string to process.
+/// @param {String} $insert - The string to insert.
+/// @param {Number} $index - The index at which to insert `$insert`.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-insert( "foo bar", "baz", 5 ); // => "foo baz bar"
 @function k-string-insert( $string, $insert, $index ) {
     @return str-insert( $string, $insert, $index );
 }
 
+/// Returns the length of `$string`.
+/// @param {String} $string - The string to process.
+/// @return {Number} - The length of `$string`.
+///
+/// @example scss - Usage
+///   @debug k-string-length( "foo bar" ); // => 7
 @function k-string-length( $string ) {
     @return str-length( $string );
 }
 
+/// Returns a copy of `$string` with quotes added.
+/// @param {String} $string - The string to process.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-quote( "foo bar" ); // => "foo bar"
 @function k-string-quote( $string ) {
     @return quote( $string );
 }
 
-// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+/// Returns a copy of `$string` with all occurrences of `$search`
+/// replaced by `$replace`.
+/// @param {String} $string - The string to process.
+/// @param {String} $search - The substring to look for.
+/// @param {String} $replace - The replacement string.
+/// @return {String} - The resulting string.
+///
+/// @link https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+///
+/// @example scss - Usage
+///   @debug k-string-replace( "foo bar", "bar", "baz" ); // => "foo baz"
 @function k-string-replace( $string, $search, $replace: "" ) {
     @if k-meta-type-of( $string ) == number {
         $string: $string + "";
@@ -917,22 +1580,53 @@ $_kendo-escape-class-name: (
     @return $string;
 }
 
+/// Returns a substring of `$string` starting at `$start-at` and ending at `$end-at`.
+/// @param {String} $string - The string to process.
+/// @param {Number} $start-at - The index at which to start the substring.
+/// @param {Number} $end-at - The index at which to end the substring.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-slice( "foo bar", 5 ); // => "bar"
 @function k-string-slice( $string, $start-at, $end-at: -1 ) {
     @return str-slice( $string, $start-at, $end-at );
 }
 
+/// Returns a copy of `$string` with all uppercase letters converted to lowercase.
+/// @param {String} $string - The string to process.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-to-lower-case( "FOO BAR" ); // => "foo bar"
 @function k-string-to-lower-case( $string ) {
     @return to-lower-case( $string );
 }
 
+/// Returns a copy of `$string` with all lowercase letters converted to uppercase.
+/// @param {String} $string - The string to process.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-to-upper-case( "foo bar" ); // => "FOO BAR"
 @function k-string-to-upper-case( $string ) {
     @return to-upper-case( $string );
 }
 
+/// Returns a unique identifier.
+/// @return {String} - The unique identifier.
+///
+/// @example scss - Usage
+///   @debug k-string-unique-id(); // => UNIQUE_ID
 @function k-string-unique-id() {
     @return unique-id();
 }
 
+/// Returns a copy of `$string` with quotes removed.
+/// @param {String} $string - The string to process.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-unquote( "foo bar" ); // => foo bar
 @function k-string-unquote( $string ) {
     @return unquote( $string );
 }
@@ -2670,11 +3364,6 @@ $kendo-utils: (
 /// @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
-
 @mixin kendo-utils--flex-grid--order() {
 
     // Order utility classes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "6.1.1-dev.1",
+  "version": "6.1.1-dev.11+a056ff586",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -41,7 +41,7 @@
     "postpublish": "echo 'no postpublish for utils'"
   },
   "dependencies": {
-    "@progress/kendo-theme-core": "^6.1.1-dev.1"
+    "@progress/kendo-theme-core": "^6.1.1-dev.11+a056ff586"
   },
-  "gitHead": "935391cd75bb0df74f506bbe4ce2bbfcd3412203"
+  "gitHead": "a056ff5860c51449a5ce6f770399c0f1fce97e1f"
 }

package/scss/flex-grid/_order.scss

@@ -13,11 +13,6 @@
 /// @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
-
 @mixin kendo-utils--flex-grid--order() {
 
     // Order utility classes