@progress/kendo-theme-utils 6.1.1-dev.2 → 6.1.1-dev.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/all.scss CHANGED
@@ -1,83 +1,188 @@
1
1
  // This file is auto-generated. Do not edit!
2
- // baka:source packages/utils/scss/all.scss
2
+ // baka:source scss/all.scss
3
3
 
4
- // #region @import "./index.import.scss"; -> packages/utils/scss/index.import.scss
5
- // #region @import "./_functions.scss"; -> packages/utils/scss/_functions.scss
6
- // #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
7
- // #region @import "../_variables.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/_variables.scss
4
+ // #region @import "./index.import.scss"; -> scss/index.import.scss
5
+ // #region @import "./_functions.scss"; -> scss/_functions.scss
6
+ // #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
7
+ // #region @import "../_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/_variables.scss
8
8
  // Equilateral triangle variables
9
9
  $equilateral-index: 1.7320508076 !default;
10
10
  $equilateral-height: .8660254038 !default;
11
11
 
12
12
  // #endregion
13
13
 
14
- // #region @import "./_color.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
14
+ // #region @import "./_color.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
15
+ /// Returns the alpha channel of a color.
16
+ /// @param {Color} $color - The color to get the alpha channel for.
17
+ /// @return {Number} - The alpha channel of the color.
18
+ ///
19
+ /// @example scss - Usage
20
+ /// @debug k-color-alpha( rgba( 0, 0, 0, 0.5 ) ); // => 0.5
21
+ /// @debug k-color-alpha( #000 ); // => 1
15
22
  @function k-color-alpha( $color ) {
16
23
  @return alpha( $color );
17
24
  }
18
25
 
26
+ /// Returns the red channel of a color.
27
+ /// @param {Color} $color - The color to get the red channel for.
28
+ /// @return {Number} - The red channel of the color.
29
+ ///
30
+ /// @example scss - Usage
31
+ /// @debug k-color-red( #ff0000 ); // => 255
19
32
  @function k-color-red( $color ) {
20
33
  @return red( $color );
21
34
  }
22
35
 
36
+ /// Returns the green channel of a color.
37
+ /// @param {Color} $color - The color to get the green channel for.
38
+ /// @return {Number} - The green channel of the color.
39
+ ///
40
+ /// @example scss - Usage
41
+ /// @debug k-color-green( #00ff00 ); // => 255
23
42
  @function k-color-green( $color ) {
24
43
  @return green( $color );
25
44
  }
26
45
 
46
+ /// Returns the blue channel of a color.
47
+ /// @param {Color} $color - The color to get the blue channel for.
48
+ /// @return {Number} - The blue channel of the color.
49
+ ///
50
+ /// @example scss - Usage
51
+ /// @debug k-color-blue( #0000ff ); // => 255
27
52
  @function k-color-blue( $color ) {
28
53
  @return blue( $color );
29
54
  }
30
55
 
56
+ /// Returns the hue of a color.
57
+ /// @param {Color} $color - The color to get the hue for.
58
+ /// @return {Number} - The hue of the color.
59
+ ///
60
+ /// @example scss - Usage
61
+ /// @debug k-color-hue( #e1d7d2 ); // => 20deg
31
62
  @function k-color-hue( $color ) {
32
63
  @return hue( $color );
33
64
  }
34
65
 
66
+ /// Returns the saturation of a color.
67
+ /// @param {Color} $color - The color to get the saturation for.
68
+ /// @return {Number} - The saturation of the color.
69
+ ///
70
+ /// @example scss - Usage
71
+ /// @debug k-color-saturation( #e1d7d2 ); // => 20%
35
72
  @function k-color-saturation( $color ) {
36
73
  @return saturation( $color );
37
74
  }
38
75
 
76
+ /// Returns the lightness of a color.
77
+ /// @param {Color} $color - The color to get the lightness for.
78
+ /// @return {Number} - The lightness of the color.
79
+ ///
80
+ /// @example scss - Usage
81
+ /// @debug k-color-lightness( #e1d7d2 ); // => 80%
39
82
  @function k-color-lightness( $color ) {
40
83
  @return lightness( $color );
41
84
  }
42
85
 
86
+ /// Returns a color that is a mix of two colors.
87
+ /// @param {Color} $color1 - The first color.
88
+ /// @param {Color} $color2 - The second color.
89
+ /// @param {Number} $weight - The weight of the first color in the mix.
90
+ /// @return {Color} - The mixed color.
91
+ ///
92
+ /// @example scss - Usage
93
+ /// @debug k-color-mix( #f00, #00f ); // => #800080
43
94
  @function k-color-mix( $color1, $color2, $weight: 50% ) {
44
95
  @return mix( $color1, $color2, $weight );
45
96
  }
46
97
 
98
+ /// Makes a color darker by decreasing its lightness.
99
+ /// @param {Color} $color - The color to darken.
100
+ /// @param {Number} $amount - The amount to darken the color.
101
+ /// @return {Color} - The darkened color.
102
+ ///
103
+ /// @example scss - Usage
104
+ /// @debug k-color-darken( #f00, 10% ); // => #e60000
47
105
  @function k-color-darken( $color, $amount) {
48
106
  @return darken( $color, $amount );
49
107
  }
50
108
 
109
+ /// Makes a color lighter by increasing its lightness.
110
+ /// @param {Color} $color - The color to lighten.
111
+ /// @param {Number} $amount - The amount to lighten the color.
112
+ /// @return {Color} - The lightened color.
113
+ ///
114
+ /// @example scss - Usage
115
+ /// @debug k-color-lighten( #f00, 10% ); // => #ff1a1a
51
116
  @function k-color-lighten( $color, $amount) {
52
117
  @return lighten( $color, $amount );
53
118
  }
54
119
 
120
+ /// Increases or decreases the hue of a color.
121
+ /// @param {Color} $color - The color to adjust the hue for.
122
+ /// @param {Number} $degrees - The amount to adjust the hue.
123
+ /// @return {Color} - The adjusted color.
124
+ ///
125
+ /// @example scss - Usage
126
+ /// @debug k-color-adjust-hue( #f00, 10deg ); // => #ff1a00
55
127
  @function k-color-adjust-hue( $color, $degrees ) {
56
128
  @return adjust-hue( $color, $degrees );
57
129
  }
58
130
 
131
+ /// Increases the saturation of a color.
132
+ /// @param {Color} $color - The color to saturate.
133
+ /// @param {Number} $amount - The amount to saturate the color.
134
+ /// @return {Color} - The saturated color.
135
+ ///
136
+ /// @example scss - Usage
137
+ /// @debug k-color-saturate( #f00, 10% ); // => #ff3333
59
138
  @function k-color-saturate( $color, $amount ) {
60
139
  @return saturate( $color, $amount );
61
140
  }
62
141
 
142
+ /// Decreases the saturation of a color.
143
+ /// @param {Color} $color - The color to desaturate.
144
+ /// @param {Number} $amount - The amount to desaturate the color.
145
+ /// @return {Color} - The desaturated color.
146
+ ///
147
+ /// @example scss - Usage
148
+ /// @debug k-color-desaturate( #f00, 10% ); // => #e60000
63
149
  @function k-color-desaturate( $color, $amount ) {
64
150
  @return desaturate( $color, $amount );
65
151
  }
66
152
 
153
+ /// Returns a gray color with the same lightness as the input color.
154
+ /// @param {Color} $color - The color to convert to grayscale.
155
+ /// @return {Color} - The grayscale color.
156
+ ///
157
+ /// @example scss - Usage
158
+ /// @debug k-color-grayscale( #f00 ); // => #808080
67
159
  @function k-color-grayscale( $color ) {
68
160
  @return grayscale( $color );
69
161
  }
70
162
 
163
+ /// Returns the RGB complement of a color. This identical to adjusting the hue
164
+ /// by 180 degrees.
165
+ /// @param {Color} $color - The color to get the complement for.
166
+ /// @return {Color} - The complement color.
167
+ ///
168
+ /// @example scss - Usage
169
+ /// @debug k-color-complement( #f00 ); // => #00ffff
71
170
  @function k-color-complement( $color ) {
72
171
  @return complement( $color );
73
172
  }
74
173
 
174
+ /// Returns the inverse of a color.
175
+ /// @param {Color} $color - The color to invert.
176
+ /// @return {Color} - The inverted color.
177
+ ///
178
+ /// @example scss - Usage
179
+ /// @debug k-color-invert( #f00 ); // => #00ffff
75
180
  @function k-color-invert( $color ) {
76
181
  @return invert( $color );
77
182
  }
78
183
 
79
184
  // #endregion
80
- // #region @import "./_color-contrast.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_color-contrast.import.scss
185
+ // #region @import "./_color-contrast.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color-contrast.import.scss
81
186
  // Adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
82
187
  // Adapted from https://github.com/twbs/bootstrap/commit/03908ea37a55eaa44c12ce5694dddc1630c980b3
83
188
 
@@ -351,17 +456,31 @@ $_linear-channel-values: (
351
456
  1
352
457
  );
353
458
 
354
- // The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
355
- // Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
356
- // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
357
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
459
+ /// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
460
+ /// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
461
+ /// @type Number
462
+ /// @group accessibility
463
+ ///
464
+ /// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
465
+ /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
358
466
  $wcag-min-contrast-ratio: 7 !default;
467
+ /// Default dark color for WCAG 2.0.
468
+ /// @type Color
469
+ /// @group accessibility
359
470
  $wcag-dark: black !default;
471
+ /// Default light color for WCAG 2.0.
472
+ /// @type Color
473
+ /// @group accessibility
360
474
  $wcag-light: white !default;
361
475
 
362
- // Calculate the luminance for a color.
363
- // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
364
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
476
+ /// Calculate the relative luminance for a color.
477
+ /// @param {Color} $color - The color to calculate the relative luminance for.
478
+ /// @return {Number} - The relative luminance for the color.
479
+ ///
480
+ /// @group accessibility
481
+ ///
482
+ /// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
483
+ /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
365
484
  @function k-color-luminance( $color ) {
366
485
  $red: k-list-nth( $_linear-channel-values, k-color-red( $color ) + 1 );
367
486
  $green: k-list-nth( $_linear-channel-values, k-color-green( $color ) + 1 );
@@ -370,9 +489,15 @@ $wcag-light: white !default;
370
489
  @return .2126 * $red + .7152 * $green + .0722 * $blue;
371
490
  }
372
491
 
373
- // Calculate the luminance for a color.
374
- // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
375
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
492
+ /// Calculates contrast ratio between two colors
493
+ /// @param {Color} $background - The background color
494
+ /// @param {Color} $foreground - The foreground color
495
+ /// @return {Number} - The contrast ratio between the two colors
496
+ ///
497
+ /// @group accessibility
498
+ ///
499
+ /// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
500
+ /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
376
501
  @function k-color-contrast-ratio( $background, $foreground ) {
377
502
  // sass-lint:disable-block variable-name-format
378
503
  $backLum: k-color-luminance( $background ) + .05;
@@ -381,15 +506,34 @@ $wcag-light: white !default;
381
506
  @return k-math-div( k-math-max( $backLum, $foreLum ), k-math-min( $backLum, $foreLum ) );
382
507
  }
383
508
 
509
+ /// Checks if a color is dark
510
+ /// @param {Color} $color - The color to check
511
+ /// @return {Boolean} - True if the color is dark, false otherwise
512
+ ///
513
+ /// @group accessibility
384
514
  @function k-is-dark( $color ) {
385
515
  @return if( k-color-luminance( $color ) < .5, true, false );
386
516
  }
517
+
518
+ /// Checks if a color is light
519
+ /// @param {Color} $color - The color to check
520
+ /// @return {Boolean} - True if the color is light, false otherwise
521
+ ///
522
+ /// @group accessibility
387
523
  @function k-is-light( $color ) {
388
524
  @return if( k-color-luminance( $color ) < .5, false, true );
389
525
  }
390
526
 
391
527
 
392
- // Contrast functions
528
+ /// Calculates the contrast ratio between a background color and a foreground color.
529
+ /// If the contrast ratio is not high enough, it will return the color with the highest contrast ratio.
530
+ /// @param {Color} $background - The background color
531
+ /// @param {Color} $dark - The dark color to use as a fallback
532
+ /// @param {Color} $light - The light color to use as a fallback
533
+ /// @param {Number} $min-ratio - The minimum contrast ratio to reach
534
+ /// @return {Color} - The color with the highest contrast ratio
535
+ ///
536
+ /// @group accessibility
393
537
  @function k-contrast-color( $background, $dark: $wcag-dark, $light: $wcag-light, $min-ratio: $wcag-min-contrast-ratio ) {
394
538
  $foregrounds: $light, $dark, #ffffff, #000000;
395
539
  $max-ratio: 0;
@@ -437,7 +581,7 @@ $wcag-light: white !default;
437
581
  }
438
582
 
439
583
  // #endregion
440
- // #region @import "./_color-manipulation.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_color-manipulation.import.scss
584
+ // #region @import "./_color-manipulation.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color-manipulation.import.scss
441
585
  /// Set a specific jump point for requesting color jumps
442
586
  /// @group color-system
443
587
  /// @access private
@@ -460,13 +604,38 @@ $kendo-color-level-step: 8% !default;
460
604
  @return k-color-mix( $base, $color, $level * $kendo-color-level-step );
461
605
  }
462
606
 
607
+ /// Makes a color lighter by mixing it with white
608
+ /// @param {Color} $color - The color to lighten
609
+ /// @param {Number} $level - The amount to lighten the color
610
+ /// @return {Color} - The lightened color
611
+ ///
612
+ /// @group color-system
613
+ ///
614
+ /// @example scss - Usage
615
+ /// @debug k-color-tint( #f00, 1 ); // => #ff1a1a
463
616
  @function k-color-tint( $color, $level: 1 ) {
464
617
  @return k-color-level( $color, -$level );
465
618
  }
619
+
620
+ /// Makes a color darker by mixing it with black
621
+ /// @param {Color} $color - The color to darken
622
+ /// @param {Number} $level - The amount to darken the color
623
+ /// @return {Color} - The darkened color
624
+ ///
625
+ /// @group color-system
626
+ ///
627
+ /// @example scss - Usage
628
+ /// @debug k-color-shade( #f00, 1 ); // => #e60000
466
629
  @function k-color-shade( $color, $level: 1 ) {
467
630
  @return k-color-level( $color, $level );
468
631
  }
469
632
 
633
+ /// Shades the color in light themes and tints it in dark themes
634
+ /// @param {Color} $color - The color to shade or tint
635
+ /// @param {Number} $level - The amount to shade or tint the color
636
+ /// @return {Color} - The shaded or tinted color
637
+ ///
638
+ /// @group color-system
470
639
  @function k-try-shade( $color, $level: 1 ) {
471
640
  $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
472
641
 
@@ -476,6 +645,13 @@ $kendo-color-level-step: 8% !default;
476
645
 
477
646
  @return k-color-shade( $color, $level );
478
647
  }
648
+
649
+ /// Tints the color in light themes and shades it in dark themes
650
+ /// @param {Color} $color - The color to tint or shade
651
+ /// @param {Number} $level - The amount to tint or shade the color
652
+ /// @return {Color} - The tinted or shaded color
653
+ ///
654
+ /// @group color-system
479
655
  @function k-try-tint( $color, $level: 1 ) {
480
656
  $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
481
657
 
@@ -486,7 +662,12 @@ $kendo-color-level-step: 8% !default;
486
662
  @return k-color-tint( $color, $level );
487
663
  }
488
664
 
489
-
665
+ /// Darkens the color in light themes and lightens it in dark themes
666
+ /// @param {Color} $color - The color to darken or lighten
667
+ /// @param {Number} $level - The amount to darken or lighten the color
668
+ /// @return {Color} - The darkened or lightened color
669
+ ///
670
+ /// @group color-system
490
671
  @function k-try-darken( $color, $amount ) {
491
672
  $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
492
673
 
@@ -496,6 +677,12 @@ $kendo-color-level-step: 8% !default;
496
677
  @return k-color-darken( $color, $amount );
497
678
  }
498
679
 
680
+ /// Lightens the color in light themes and darkens it in dark themes
681
+ /// @param {Color} $color - The color to lighten or darken
682
+ /// @param {Number} $level - The amount to lighten or darken the color
683
+ /// @return {Color} - The lightened or darkened color
684
+ ///
685
+ /// @group color-system
499
686
  @function k-try-lighten( $color, $amount ) {
500
687
  $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
501
688
 
@@ -505,6 +692,15 @@ $kendo-color-level-step: 8% !default;
505
692
  @return k-color-lighten( $color, $amount );
506
693
  }
507
694
 
695
+ /// Converts a color with alpha to solid color mixed with a background color
696
+ /// @param {Color} $color - The color to convert
697
+ /// @param {Color} $bg - The background color
698
+ /// @return {Color} - The converted color
699
+ ///
700
+ /// @group color-system
701
+ ///
702
+ /// @example scss - Usage
703
+ /// @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
508
704
  @function k-rgba-to-mix( $color, $bg ) {
509
705
  $percent: k-color-alpha( $color ) * 100%;
510
706
 
@@ -517,7 +713,7 @@ $kendo-color-level-step: 8% !default;
517
713
  }
518
714
 
519
715
  // #endregion
520
- // #region @import "./_custom-properties.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
716
+ // #region @import "./_custom-properties.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
521
717
  @function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
522
718
  $_prefix: $prefix;
523
719
  $_var: $var;
@@ -557,7 +753,7 @@ $kendo-color-level-step: 8% !default;
557
753
  }
558
754
 
559
755
  // #endregion
560
- // #region @import "./_escape-string.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_escape-string.import.scss
756
+ // #region @import "./_escape-string.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_escape-string.import.scss
561
757
  $_kendo-svg-escaped-characters: (
562
758
  ("%", "%25"),
563
759
  ("<", "%3c"),
@@ -567,7 +763,11 @@ $_kendo-svg-escaped-characters: (
567
763
  (")", "%29")
568
764
  ) !default;
569
765
 
570
- // See https://codepen.io/kevinweber/pen/dXWoRw
766
+ /// Escapes SVG characters in a string
767
+ /// @param {String} $string - The string to escape
768
+ /// @return {String} - The escaped string
769
+ ///
770
+ /// @link https://codepen.io/kevinweber/pen/dXWoRw
571
771
  @function k-escape-svg($string) {
572
772
  @if k-string-index($string, "data:image/svg+xml") {
573
773
  @each $char, $encoded in $_kendo-svg-escaped-characters {
@@ -590,6 +790,9 @@ $_kendo-escape-class-name: (
590
790
  "/": "\\/"
591
791
  );
592
792
 
793
+ /// Escapes special characters in a class name
794
+ /// @param {String} $text - The string to escape
795
+ /// @return {String} - The escaped string
593
796
  @function k-escape-class-name( $text ) {
594
797
  $_text: $text;
595
798
 
@@ -601,41 +804,111 @@ $_kendo-escape-class-name: (
601
804
  }
602
805
 
603
806
  // #endregion
604
- // #region @import "./_lang.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_lang.import.scss
807
+ // #region @import "./_lang.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_lang.import.scss
808
+ /// Returns the value of a variable if it is not null,
809
+ /// otherwise returns the fallback value.
810
+ /// @param {Any} $var - The variable to check.
811
+ /// @param {Any} $fallback - The fallback value.
812
+ /// @return {Any} - The value of the variable or the fallback value.
813
+ ///
814
+ /// @example scss - Usage
815
+ /// $foo: null;
816
+ /// @debug k-if-var( $foo, "bar" ); // => "bar"
817
+ /// $foo: "baz";
818
+ /// @debug k-if-var( $foo, "bar" ); // => "baz"
605
819
  @function k-if-var( $var, $fallback ) {
606
820
  @return if( $var != null, $var, $fallback );
607
821
  }
608
822
 
609
823
  // #endregion
610
- // #region @import "./_list.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_list.import.scss
824
+ // #region @import "./_list.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_list.import.scss
825
+ /// Returns a copy of `$list` with `$val` appended to the end.
826
+ /// @param {List} $list - The list to process.
827
+ /// @param {Any} $val - The value to append to `$list`.
828
+ /// @param {String} $separator - The separator to use between `$list` and `$val`.
829
+ /// @return {List} - A copy of `$list` with `$val` appended to the end.
830
+ ///
831
+ /// @example scss - Usage
832
+ /// @debug k-list-append( ( "foo", "bar" ), "baz" ); // => "foo, bar, baz"
611
833
  @function k-list-append( $list, $val, $separator: auto ) {
612
834
  @return append( $list, $val, $separator );
613
835
  }
614
836
 
837
+ /// Checks whether `$list` contains `$value`.
838
+ /// @param {List} $list - The list to check.
839
+ /// @param {Any} $value - The value to check for.
840
+ /// @return {Boolean} - Whether `$list` contains `$value`.
841
+ ///
842
+ /// @example scss - Usage
843
+ /// @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
844
+ /// @debug k-list-includes( ( "foo", "bar" ), "baz" ); // => false
615
845
  @function k-list-includes( $list, $value ) {
616
846
  @return k-list-index( $list, $value ) != null;
617
847
  }
618
848
 
849
+ /// Returns the index of `$value` in `$list`.
850
+ /// @param {List} $list - The list to check.
851
+ /// @param {Any} $value - The value to check for.
852
+ /// @return {Number} - The index of `$value` in `$list`.
853
+ ///
854
+ /// @example scss - Usage
855
+ /// @debug k-list-index( ( "foo", "bar" ), "foo" ); // => 1
619
856
  @function k-list-index( $list, $value ) {
620
857
  @return index( $list, $value );
621
858
  }
622
859
 
860
+ /// Returns whether `$list` is bracketed.
861
+ /// @param {List} $list - The list to check.
862
+ /// @return {Boolean} - Whether `$list` is bracketed.
863
+ ///
864
+ /// @example scss - Usage
865
+ /// @debug k-list-is-bracketed( ( "foo", "bar" ) ); // => false
866
+ /// @debug k-list-is-bracketed( [ "foo", "bar" ] ); // => true
623
867
  @function k-list-is-bracketed( $list ) {
624
868
  @return is-bracketed( $list );
625
869
  }
626
870
 
871
+ /// Joins two lists together.
872
+ /// @param {List} $list1 - The first list to join.
873
+ /// @param {List} $list2 - The second list to join.
874
+ /// @param {String} $separator - The separator to use between `$list1` and `$list2`.
875
+ /// @param {Boolean} $bracketed - Whether the result should be bracketed.
876
+ /// @return {List} - The joined list.
877
+ ///
878
+ /// @example scss - Usage
879
+ /// @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ) ); // => "foo, bar, baz, qux"
880
+ /// @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ), " " ); // => "foo bar baz qux"
627
881
  @function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
628
882
  @return join( $list1, $list2, $separator, $bracketed );
629
883
  }
630
884
 
885
+ /// Returns the length of `$list`.
886
+ /// @param {List} $list - The list to check.
887
+ /// @return {Number} - The length of `$list`.
888
+ ///
889
+ /// @example scss - Usage
890
+ /// @debug k-list-length( ( "foo", "bar" ) ); // => 2
631
891
  @function k-list-length( $list ) {
632
892
  @return length( $list );
633
893
  }
634
894
 
895
+ /// Returns the nth item in `$list`.
896
+ /// @param {List} $list - The list to check.
897
+ /// @param {Number} $n - The index of the item to return.
898
+ /// @return {Any} - The nth item in `$list`.
899
+ ///
900
+ /// @example scss - Usage
901
+ /// @debug k-list-nth( ( "foo", "bar" ), 1 ); // => "foo"
635
902
  @function k-list-nth( $list, $n ) {
636
903
  @return nth( $list, $n );
637
904
  }
638
905
 
906
+ /// Reverse the order of items in `$list`.
907
+ /// @param {List} $list - The list to reverse.
908
+ /// @return {List} - The reversed list.
909
+ ///
910
+ /// @example scss - Usage
911
+ /// @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"
639
912
  @function k-list-reverse( $list: null ) {
640
913
  $result: ();
641
914
 
@@ -654,64 +927,185 @@ $_kendo-escape-class-name: (
654
927
  @return $result;
655
928
  }
656
929
 
930
+ /// Returns the separator of `$list`.
931
+ /// @param {List} $list - The list to check.
932
+ /// @return {String} - The separator of `$list`.
933
+ ///
934
+ /// @example scss - Usage
935
+ /// @debug k-list-separator( ( "foo", "bar" ) ); // => ","
657
936
  @function k-list-separator( $list ) {
658
937
  @return list-separator( $list );
659
938
  }
660
939
 
940
+ /// Returns a copy of `$list` with `$val` inserted at `$n`.
941
+ /// @param {List} $list - The list to process.
942
+ /// @param {Number} $n - The index at which to insert `$val`.
943
+ /// @param {Any} $val - The value to insert.
944
+ /// @return {List} - A copy of `$list` with `$val` inserted at `$n`.
945
+ ///
946
+ /// @example scss - Usage
947
+ /// @debug k-list-set-nth( ( "foo", "bar" ), 1, "baz" ); // => "baz, bar"
661
948
  @function k-list-set-nth( $list, $n, $value ) {
662
949
  @return set-nth( $list, $n, $value );
663
950
  }
664
951
 
952
+ /// Combines two lists into a single list of two-item lists.
953
+ /// @param {List} $list1 - The first list to combine.
954
+ /// @param {List} $list2 - The second list to combine.
955
+ /// @return {List} - A list of two-item lists.
956
+ ///
957
+ /// @example scss - Usage
958
+ /// @debug k-list-zip( ( "foo", "bar" ), ( "baz", "qux" ) ); // => ((foo, baz), (bar, qux))
665
959
  @function k-list-zip( $lists... ) {
666
960
  @return zip( $lists... );
667
961
  }
668
962
 
669
963
  // #endregion
670
- // #region @import "./_math.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_math.import.scss
964
+ // #region @import "./_math.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_math.import.scss
965
+ /// Returns the absolute value of a number.
966
+ /// @param {Number} $number - The number to get the absolute value of.
967
+ /// @return {Number} - The absolute value of `$number`.
968
+ ///
969
+ /// @example scss - Usage
970
+ /// @debug k-math-abs( -10 ); // => 10
671
971
  @function k-math-abs( $number ) {
672
972
  @return abs( $number );
673
973
  }
674
974
 
975
+ /// Returns the smallest integer greater than or equal to a number.
976
+ /// @param {Number} $number - The number to get the ceiling of.
977
+ /// @return {Number} - The ceiling of `$number`.
978
+ ///
979
+ /// @example scss - Usage
980
+ /// @debug k-math-ceil( 10.1 ); // => 11
675
981
  @function k-math-ceil( $number ) {
676
982
  @return ceil( $number );
677
983
  }
678
984
 
679
- @function k-math-clamp( $value, $min, $max ) {
680
- @return k-math-max( $min, k-math-min( $max, $value ) );
681
- }
682
-
985
+ /// Returns the largest integer less than or equal to a number.
986
+ /// @param {Number} $number - The number to get the floor of.
987
+ /// @return {Number} - The floor of `$number`.
988
+ ///
989
+ /// @example scss - Usage
990
+ /// @debug k-math-floor( 10.9 ); // => 10
991
+ @function k-math-floor( $number ) {
992
+ @return floor( $number );
993
+ }
994
+
995
+ /// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
996
+ /// less than `$min`, `$min` is returned. If `$number` is greater than `$max`,
997
+ /// `$max` is returned. Otherwise, `$number` is returned.
998
+ /// @param {Number} $number - The number to clamp.
999
+ /// @param {Number} $min - The minimum value.
1000
+ /// @param {Number} $max - The maximum value.
1001
+ /// @return {Number} - The clamped number.
1002
+ ///
1003
+ /// @example scss - Usage
1004
+ /// @debug k-math-clamp( 10, 0, 5 ); // => 5
1005
+ @function k-math-clamp( $number, $min, $max ) {
1006
+ @return k-math-max( $min, k-math-min( $max, $number ) );
1007
+ }
1008
+
1009
+ /// Returns whether two numbers have compatible units.
1010
+ /// @param {Number} $a - The first number.
1011
+ /// @param {Number} $b - The second number.
1012
+ /// @return {Boolean} - Whether the numbers have compatible units.
1013
+ ///
1014
+ /// @example scss - Usage
1015
+ /// @debug k-math-compatible( 10px, 10px ); // => true
1016
+ /// @debug k-math-compatible( 10px, 10em ); // => false
683
1017
  @function k-math-compatible( $a, $b ) {
684
1018
  @return comparable( $a, $b );
685
1019
  }
686
1020
 
1021
+ /// Returns the quotient of two numbers.
1022
+ /// @param {Number} $a - The dividend.
1023
+ /// @param {Number} $b - The divisor.
1024
+ /// @return {Number} - The quotient of `$a` and `$b`.
1025
+ ///
1026
+ /// @example scss - Usage
1027
+ /// @debug k-math-div( 10, 2 ); // => 5
1028
+ /// @debug k-math-div( 10px, 2 ); // => 5px
687
1029
  @function k-math-div( $a, $b ) {
688
1030
  @return ( $a / $b );
689
1031
  }
690
1032
 
1033
+ /// Returns whether `$number` has no units.
1034
+ /// @param {Number} $number - The number to check.
1035
+ /// @return {Boolean} - Whether `$number` has no units.
1036
+ ///
1037
+ /// @example scss - Usage
1038
+ /// @debug k-math-is-unitless( 10 ); // => true
1039
+ /// @debug k-math-is-unitless( 10px ); // => false
691
1040
  @function k-math-is-unitless( $number ) {
692
1041
  @return unitless( $number );
693
1042
  }
694
1043
 
1044
+ /// Returns the larger of two numbers.
1045
+ /// @param {Number} $a - The first number.
1046
+ /// @param {Number} $b - The second number.
1047
+ /// @return {Number} - The larger of `$a` and `$b`.
1048
+ ///
1049
+ /// @example scss - Usage
1050
+ /// @debug k-math-max( 10, 20 ); // => 20
1051
+ /// @debug k-math-max( 10px, 20px ); // => 20px
695
1052
  @function k-math-max( $a, $b ) {
696
1053
  @return max( $a, $b );
697
1054
  }
698
1055
 
1056
+ /// Returns the smaller of two numbers.
1057
+ /// @param {Number} $a - The first number.
1058
+ /// @param {Number} $b - The second number.
1059
+ /// @return {Number} - The smaller of `$a` and `$b`.
1060
+ ///
1061
+ /// @example scss - Usage
1062
+ /// @debug k-math-min( 10, 20 ); // => 10
1063
+ /// @debug k-math-min( 10px, 20px ); // => 10px
699
1064
  @function k-math-min( $a, $b ) {
700
1065
  @return min( $a, $b );
701
1066
  }
702
1067
 
1068
+ /// Returns the remainder of two numbers.
1069
+ /// @param {Number} $a - The dividend.
1070
+ /// @param {Number} $b - The divisor.
1071
+ /// @return {Number} - The remainder of `$a` and `$b`.
1072
+ ///
1073
+ /// @example scss - Usage
1074
+ /// @debug k-math-mod( 10, 3 ); // => 1
1075
+ /// @debug k-math-mod( 10px, 3 ); // => 1px
703
1076
  @function k-math-mod( $a, $b ) {
704
1077
  @return ( $a % $b );
705
1078
  }
706
1079
 
1080
+ /// Returns the product of two numbers.
1081
+ /// @param {Number} $a - The first number.
1082
+ /// @param {Number} $b - The second number.
1083
+ /// @return {Number} - The product of `$a` and `$b`.
1084
+ ///
1085
+ /// @example scss - Usage
1086
+ /// @debug k-math-mul( 10, 2 ); // => 20
1087
+ /// @debug k-math-mul( 10px, 2 ); // => 20px
707
1088
  @function k-math-mul( $a, $b ) {
708
1089
  @return ( $a * $b );
709
1090
  }
710
1091
 
1092
+ /// Converts a unitless number to a percentage.
1093
+ /// @param {Number} $number - The number to convert.
1094
+ /// @return {Number} - The percentage.
1095
+ ///
1096
+ /// @example scss - Usage
1097
+ /// @debug k-math-percentage( 0.5 ); // => 50%
711
1098
  @function k-math-percentage( $number ) {
712
- @return ( $number * 100% );
1099
+ @return percentage( $number );
713
1100
  }
714
1101
 
1102
+ /// Returns the result of raising `$x` to the power of `$n`.
1103
+ /// @param {Number} $x - The base.
1104
+ /// @param {Number} $n - The exponent.
1105
+ /// @return {Number} - The result of raising `$x` to the power of `$n`.
1106
+ ///
1107
+ /// @example scss - Usage
1108
+ /// @debug k-math-pow( 2, 3 ); // => 8
715
1109
  @function k-math-pow( $x, $n ) {
716
1110
  $ret: 1;
717
1111
 
@@ -733,10 +1127,12 @@ $_kendo-escape-class-name: (
733
1127
 
734
1128
  }
735
1129
 
736
- @function k-math-percentage( $number ) {
737
- @return percentage( $number );
738
- }
739
-
1130
+ /// Returns a random number between 0 and 1.
1131
+ /// @param {Number} $limit - The upper limit of the random number.
1132
+ /// @return {Number} - A random number between 0 and 1.
1133
+ ///
1134
+ /// @example scss - Usage
1135
+ /// @debug k-math-random(); // => 0.123456789
740
1136
  @function k-math-random( $limit: null ) {
741
1137
  @if ( $limit == null ) {
742
1138
  @return random();
@@ -745,6 +1141,14 @@ $_kendo-escape-class-name: (
745
1141
  @return random( $limit );
746
1142
  }
747
1143
 
1144
+ /// Returns the result of rounding `$number` to the nearest integer
1145
+ /// using the specified `$precision`.
1146
+ /// @param {Number} $number - The number to round.
1147
+ /// @param {Number} $precision - The number of decimal places to round to.
1148
+ /// @return {Number} - The rounded number.
1149
+ ///
1150
+ /// @example scss - Usage
1151
+ /// @debug k-math-round( 10.123456789, 3 ); // => 10.123
748
1152
  @function k-math-round( $number, $precision: 0 ) {
749
1153
 
750
1154
  @if ( $precision == 0 ) {
@@ -756,10 +1160,22 @@ $_kendo-escape-class-name: (
756
1160
  @return k-math-div( round( $number * $pow ), $pow );
757
1161
  }
758
1162
 
1163
+ /// Returns a string representation of `$number`'s unit.
1164
+ /// @param {Number} $number - The number to get the unit of.
1165
+ /// @return {String} - The unit of `$number`.
1166
+ ///
1167
+ /// @example scss - Usage
1168
+ /// @debug k-math-unit( 10px ); // => px
759
1169
  @function k-math-unit( $number ) {
760
1170
  @return unit( $number );
761
1171
  }
762
1172
 
1173
+ /// Remove the unit from a number.
1174
+ /// @param {Number} $number - The number to remove the unit from.
1175
+ /// @return {Number} - The unitless number.
1176
+ ///
1177
+ /// @example scss - Usage
1178
+ /// @debug k-math-strip-unit( 10px ); // => 10
763
1179
  @function k-math-strip-unit($number) {
764
1180
  @if ( k-meta-type-of( $number ) == "number" ) and not k-math-is-unitless( $number ) {
765
1181
  @return k-math-div( $number, 1 * k-math-unit( $number) );
@@ -769,7 +1185,13 @@ $_kendo-escape-class-name: (
769
1185
  }
770
1186
 
771
1187
  // #endregion
772
- // #region @import "./_map.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_map.import.scss
1188
+ // #region @import "./_map.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_map.import.scss
1189
+ /// Returns the value at `$key` in `$map`.
1190
+ /// @param {Map} $map - The map to get the value from.
1191
+ /// @param {Any} $key - The key to get the value for.
1192
+ ///
1193
+ /// @example scss - Usage
1194
+ /// @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
773
1195
  @function k-map-get( $map, $keys... ) {
774
1196
  @each $key in $keys {
775
1197
  $map: map-get( $map, $key );
@@ -777,14 +1199,35 @@ $_kendo-escape-class-name: (
777
1199
  @return $map;
778
1200
  }
779
1201
 
1202
+ /// Returns whether `$map` has a value at `$key`.
1203
+ /// @param {Map} $map - The map to check.
1204
+ /// @param {Any} $key - The key to check.
1205
+ /// @return {Boolean} - Whether `$map` has a value at `$key`.
1206
+ ///
1207
+ /// @example scss - Usage
1208
+ /// @debug k-map-has( ( "foo": "bar" ), "foo" ); // => true
1209
+ /// @debug k-map-has( ( "foo": "bar" ), "bar" ); // => false
780
1210
  @function k-map-has-key( $map, $key ) {
781
1211
  @return map-has-key( $map, $key );
782
1212
  }
783
1213
 
1214
+ /// Returns a comma separated list of the keys in `$map`.
1215
+ /// @param {Map} $map - The map to get the keys from.
1216
+ /// @return {List} - A comma separated list of the keys in `$map`.
1217
+ ///
1218
+ /// @example scss - Usage
1219
+ /// @debug k-map-keys( ( "foo": "bar", "baz": "qux" ) ); // => "foo, baz"
784
1220
  @function k-map-keys( $map ) {
785
1221
  @return map-keys( $map );
786
1222
  }
787
1223
 
1224
+ /// Returns a map with the keys and values from `$map` and `$args`.
1225
+ /// @param {Map} $map - The map to merge.
1226
+ /// @param {Map} $args - The map to merge into `$map`.
1227
+ /// @return {Map} - A map with the keys and values from `$map` and `$args`.
1228
+ ///
1229
+ /// @example scss - Usage
1230
+ /// @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
788
1231
  @function k-map-merge( $map, $args... ) {
789
1232
  @each $arg in $args {
790
1233
  $map: map-merge( $map, $arg );
@@ -792,117 +1235,337 @@ $_kendo-escape-class-name: (
792
1235
  @return $map;
793
1236
  }
794
1237
 
1238
+ /// Returns a map with the keys and values from `$map` except for `$keys`.
1239
+ /// @param {Map} $map - The map to remove keys from.
1240
+ /// @param {Any} $keys - The keys to remove from `$map`.
1241
+ /// @return {Map} - A map with the keys and values from `$map` except for `$keys`.
1242
+ ///
1243
+ /// @example scss - Usage
1244
+ /// @debug k-map-remove( ( "foo": "bar", "baz": "qux" ), "foo" ); // => ( "baz": "qux" )
795
1245
  @function k-map-remove( $map, $keys... ) {
796
1246
  @return map-remove( $map, $keys... );
797
1247
  }
798
1248
 
1249
+ /// Sets a single key and value in `$map`.
1250
+ /// @param {Map} $map - The map to set the value in.
1251
+ /// @param {Any} $key - The key to set the value for.
1252
+ /// @param {Any} $value - The value to set.
1253
+ /// @return {Map} - A map with the key and value set.
1254
+ ///
1255
+ /// @example scss - Usage
1256
+ /// @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
799
1257
  @function k-map-set( $map, $key, $value ) {
800
1258
  @return k-map-merge( $map, ( $key: $value ) );
801
1259
  }
802
1260
 
1261
+ /// Returns a comma separated list of the values in `$map`.
1262
+ /// @param {Map} $map - The map to get the values from.
1263
+ /// @return {List} - A comma separated list of the values in `$map`.
1264
+ ///
1265
+ /// @example scss - Usage
1266
+ /// @debug k-map-values( ( "foo": "bar", "baz": "qux" ) ); // => "bar, qux"
803
1267
  @function k-map-values( $map ) {
804
1268
  @return map-values( $map );
805
1269
  }
806
1270
 
807
1271
  // #endregion
808
- // #region @import "./_meta.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_meta.import.scss
1272
+ // #region @import "./_meta.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_meta.import.scss
809
1273
  // Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
810
1274
 
1275
+ /// A wrapper around the `call()` function.
1276
+ /// Calls the function `$function` with the arguments `$args`.
1277
+ /// @param {Function} $function - The function to call.
1278
+ /// @param {List} $args - The arguments to pass to `$function`.
1279
+ /// @return {Any} - The result of calling `$function` with `$args`.
1280
+ ///
1281
+ /// @example scss - Usage
1282
+ /// @debug k-meta-call( k-meta-get-function( "k-string-replace" ), "foo bar", "bar", "baz" ); // => "foo baz"
811
1283
  @function k-meta-call( $function, $args... ) {
812
1284
  @return call( $function, $args... );
813
1285
  }
814
1286
 
1287
+ /// A wrapper around the `function-exists()` function.
1288
+ /// Returns whether a function with the name `$name` exists.
1289
+ /// @param {String} $name - The name of the function to check.
1290
+ /// @return {Boolean} - Whether a function with the name `$name` exists.
1291
+ ///
1292
+ /// @example scss - Usage
1293
+ /// @debug k-meta-function-exists( "k-string-replace" ); // => true
815
1294
  @function k-meta-function-exists( $name ) {
816
1295
  @return function-exists( $name );
817
1296
  }
818
1297
 
1298
+ /// A wrapper around the `get-function()` function.
1299
+ /// Returns the function with the name `$name`.
1300
+ /// @param {String} $name - The name of the function to get.
1301
+ /// @param {Boolean} $css - Whether to return the CSS representation of the function.
1302
+ /// @param {Module} $module - The module to get the function from.
1303
+ /// @return {Function} - The function with the name `$name`.
1304
+ ///
1305
+ /// @example scss - Usage
1306
+ /// @debug k-meta-get-function( "k-string-replace" ); // => Function
819
1307
  @function k-meta-get-function( $name, $args... ) {
820
1308
  @return get-function( $name, $args... );
821
1309
  }
822
1310
 
1311
+ /// A wrapper around the `inspect()` function.
1312
+ /// Returns a string representation of `$value`.
1313
+ /// @param {Any} $value - The value to inspect.
1314
+ /// @return {String} - A string representation of `$value`.
1315
+ ///
1316
+ /// @example scss - Usage
1317
+ /// @debug k-meta-inspect( "foo bar" ); // => "foo bar"
823
1318
  @function k-meta-inspect( $value ) {
824
1319
  @return inspect( $value );
825
1320
  }
826
1321
 
1322
+ /// A wrapper around the `keywords()` function.
1323
+ /// Returns a map of the keywords in `$args`.
1324
+ /// @param {List} $args - The arguments to process.
1325
+ /// @return {Map} - A map of the keywords in `$args`.
1326
+ ///
1327
+ /// @example scss - Usage
1328
+ /// @debug k-meta-keywords( ( "foo" "bar" "baz" "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
827
1329
  @function k-meta-keywords( $args ) {
828
1330
  @return keywords( $args );
829
1331
  }
830
1332
 
1333
+ /// A wrapper around the `type-of()` function.
1334
+ /// Returns the type of `$value`.
1335
+ /// @param {Any} $value - The value to get the type of.
1336
+ /// @return {String} - The type of `$value`.
1337
+ ///
1338
+ /// @example scss - Usage
1339
+ /// @debug k-meta-type-of( "foo bar" ); // => "string"
831
1340
  @function k-meta-type-of( $value ) {
832
1341
  @return type-of( $value );
833
1342
  }
834
1343
 
1344
+ /// A wrapper around the `variable-exists()` function.
1345
+ /// Returns whether a variable with the name `$name` exists.
1346
+ /// @param {String} $name - The name of the variable to check.
1347
+ /// @return {Boolean} - Whether a variable with the name `$name` exists.
1348
+ ///
1349
+ /// @example scss - Usage
1350
+ /// @debug k-meta-variable-exists( "foo" ); // => true
835
1351
  @function k-meta-variable-exists( $name ) {
836
1352
  @return variable-exists( $name );
837
1353
  }
838
1354
 
1355
+ /// Checks whether `$value` is a <number> CSS data type.
1356
+ /// @param {Any} $value - The value to check.
1357
+ /// @return {Boolean} - Whether `$value` is a number.
1358
+ ///
1359
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/number
1360
+ ///
1361
+ /// @example scss - Usage
1362
+ /// @debug k-meta-is-number( 1 ); // => true
1363
+ /// @debug k-meta-is-number( "foo" ); // => false
839
1364
  @function k-meta-is-number( $value ) {
840
1365
  @return k-meta-type-of( $value ) == "number";
841
1366
  }
842
1367
 
1368
+ /// Checks whether `$value` is a <integer> CSS data type.
1369
+ /// @param {Any} $value - The value to check.
1370
+ /// @return {Boolean} - Whether `$value` is a integer.
1371
+ ///
1372
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/integer
1373
+ ///
1374
+ /// @example scss - Usage
1375
+ /// @debug k-meta-is-integer( 1 ); // => true
1376
+ /// @debug k-meta-is-integer( 1.5 ); // => false
843
1377
  @function k-meta-is-integer( $value ) {
844
1378
  @return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
845
1379
  }
846
1380
 
1381
+ /// Checks whether `$value` is a <time> CSS data type.
1382
+ /// @param {Any} $value - The value to check.
1383
+ /// @return {Boolean} - Whether `$value` is a time.
1384
+ ///
1385
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
1386
+ ///
1387
+ /// @example scss - Usage
1388
+ /// @debug k-meta-is-time( 1s ); // => true
1389
+ /// @debug k-meta-is-time( 1 ); // => false
847
1390
  @function k-meta-is-time( $value ) {
848
1391
  @return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
849
1392
  }
850
1393
 
1394
+ /// Checks whether `$value` is a valid duration period.
1395
+ /// @param {Any} $value - The value to check.
1396
+ /// @return {Boolean} - Whether `$value` is a duration.
1397
+ ///
1398
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
1399
+ ///
1400
+ /// @example scss - Usage
1401
+ /// @debug k-meta-is-duration( 1s ); // => true
1402
+ /// @debug k-meta-is-duration( 1 ); // => false
851
1403
  @function k-meta-is-duration( $value ) {
852
1404
  @return k-meta-is-time( $value );
853
1405
  }
854
1406
 
1407
+ /// Checks whether `$value` is a <angle> CSS data type.
1408
+ /// @param {Any} $value - The value to check.
1409
+ /// @return {Boolean} - Whether `$value` is a angle.
1410
+ ///
1411
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/angle
1412
+ ///
1413
+ /// @example scss - Usage
1414
+ /// @debug k-meta-is-angle( 1deg ); // => true
1415
+ /// @debug k-meta-is-angle( 1 ); // => false
855
1416
  @function k-meta-is-angle( $value ) {
856
1417
  @return k-meta-is-number( $value ) and k-string-index( "deg" "rad" "grad" "turn", k-math-unit( $value ) ) != null;
857
1418
  }
858
1419
 
1420
+ /// Checks whether `$value` is a <frequency> CSS data type.
1421
+ /// @param {Any} $value - The value to check.
1422
+ /// @return {Boolean} - Whether `$value` is a frequency.
1423
+ ///
1424
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
1425
+ ///
1426
+ /// @example scss - Usage
1427
+ /// @debug k-meta-is-frequency( 1Hz ); // => true
1428
+ /// @debug k-meta-is-frequency( 1 ); // => false
859
1429
  @function k-meta-is-frequency( $value ) {
860
1430
  @return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
861
1431
  }
862
1432
 
1433
+ /// Checks whether `$value` is a relative <length> CSS data type.
1434
+ /// @param {Any} $value - The value to check.
1435
+ /// @return {Boolean} - Whether `$value` is a relative length.
1436
+ ///
1437
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_font
1438
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport
1439
+ ///
1440
+ /// @example scss - Usage
1441
+ /// @debug k-meta-is-relative-length( 1em ); // => true
1442
+ /// @debug k-meta-is-relative-length( 1ch ); // => true
1443
+ /// @debug k-meta-is-relative-length( 1 ); // => false
863
1444
  @function k-meta-is-relative-length( $value ) {
864
1445
  @return k-meta-is-number( $value ) and k-string-index( "em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", k-math-unit( $value ) ) != null;
865
1446
  }
866
1447
 
1448
+ /// Checks whether `$value` is an absolute <length> CSS data type.
1449
+ /// @param {Any} $value - The value to check.
1450
+ /// @return {Boolean} - Whether `$value` is an absolute length.
1451
+ ///
1452
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#absolute_length_units
1453
+ ///
1454
+ /// @example scss - Usage
1455
+ /// @debug k-meta-is-absolute-length( 1cm ); // => true
1456
+ /// @debug k-meta-is-absolute-length( 1 ); // => false
867
1457
  @function k-meta-is-absolute-length( $value ) {
868
1458
  @return k-meta-is-number( $value ) and k-string-index( "cm" "mm" "in" "px" "pt" "pc", k-math-unit( $value ) ) != null;
869
1459
  }
870
1460
 
1461
+ /// Checks whether `$value` is a <percentage> CSS data type.
1462
+ /// @param {Any} $value - The value to check.
1463
+ /// @return {Boolean} - Whether `$value` is a percentage.
1464
+ ///
1465
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
1466
+ ///
1467
+ /// @example scss - Usage
1468
+ /// @debug k-meta-is-percentage( 1% ); // => true
1469
+ /// @debug k-meta-is-percentage( 1 ); // => false
871
1470
  @function k-meta-is-percentage( $value ) {
872
1471
  @return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
873
1472
  }
874
1473
 
1474
+ /// Checks whether `$value` is a <length> CSS data type.
1475
+ /// @param {Any} $value - The value to check.
1476
+ /// @return {Boolean} - Whether `$value` is a length.
1477
+ ///
1478
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length
1479
+ ///
1480
+ /// @example scss - Usage
1481
+ /// @debug k-meta-is-length( 1em ); // => true
1482
+ /// @debug k-meta-is-length( 1cm ); // => true
1483
+ /// @debug k-meta-is-length( 1 ); // => false
875
1484
  @function k-meta-is-length( $value ) {
876
1485
  @return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
877
1486
  }
878
1487
 
1488
+ /// Checks whether `$value` is a <resolution> CSS data type.
1489
+ /// @param {Any} $value - The value to check.
1490
+ /// @return {Boolean} - Whether `$value` is a resolution.
1491
+ ///
1492
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
1493
+ ///
1494
+ /// @example scss - Usage
1495
+ /// @debug k-meta-is-resolution( 1dpi ); // => true
1496
+ /// @debug k-meta-is-resolution( 1 ); // => false
879
1497
  @function k-meta-is-resolution( $value ) {
880
1498
  @return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
881
1499
  }
882
1500
 
1501
+ /// Checks whether `$value` is a <position> CSS data type.
1502
+ /// @param {Any} $value - The value to check.
1503
+ /// @return {Boolean} - Whether `$value` is a position.
1504
+ ///
1505
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
1506
+ ///
1507
+ /// @example scss - Usage
1508
+ /// @debug k-meta-is-position( center ); // => true
883
1509
  @function k-meta-is-position( $value ) {
884
1510
  @return k-meta-is-length( $value ) or k-meta-is-percentage( $value ) or k-string-index( "top" "right" "bottom" "left" "center", $value ) != null;
885
1511
  }
886
1512
 
887
1513
  // #endregion
888
- // #region @import "./_string.import.scss"; -> packages/utils/node_modules/@progress/kendo-theme-core/scss/functions/_string.import.scss
1514
+ // #region @import "./_string.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_string.import.scss
1515
+ /// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
1516
+ /// @param {String} $string - The string to process.
1517
+ /// @param {String} $substring - The substring to look for.
1518
+ /// @return {Number} - The first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
1519
+ ///
1520
+ /// @example scss - Usage
1521
+ /// @debug k-string-index( "foo bar", "bar" ); // => 5
889
1522
  @function k-string-index( $string, $substring ) {
890
1523
  @return str-index( $string, $substring );
891
1524
  }
892
1525
 
1526
+ /// Returns a copy of `$string` with `$insert` inserted at `$index`.
1527
+ /// @param {String} $string - The string to process.
1528
+ /// @param {String} $insert - The string to insert.
1529
+ /// @param {Number} $index - The index at which to insert `$insert`.
1530
+ /// @return {String} - The resulting string.
1531
+ ///
1532
+ /// @example scss - Usage
1533
+ /// @debug k-string-insert( "foo bar", "baz", 5 ); // => "foo baz bar"
893
1534
  @function k-string-insert( $string, $insert, $index ) {
894
1535
  @return str-insert( $string, $insert, $index );
895
1536
  }
896
1537
 
1538
+ /// Returns the length of `$string`.
1539
+ /// @param {String} $string - The string to process.
1540
+ /// @return {Number} - The length of `$string`.
1541
+ ///
1542
+ /// @example scss - Usage
1543
+ /// @debug k-string-length( "foo bar" ); // => 7
897
1544
  @function k-string-length( $string ) {
898
1545
  @return str-length( $string );
899
1546
  }
900
1547
 
1548
+ /// Returns a copy of `$string` with quotes added.
1549
+ /// @param {String} $string - The string to process.
1550
+ /// @return {String} - The resulting string.
1551
+ ///
1552
+ /// @example scss - Usage
1553
+ /// @debug k-string-quote( "foo bar" ); // => "foo bar"
901
1554
  @function k-string-quote( $string ) {
902
1555
  @return quote( $string );
903
1556
  }
904
1557
 
905
- // See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
1558
+ /// Returns a copy of `$string` with all occurrences of `$search`
1559
+ /// replaced by `$replace`.
1560
+ /// @param {String} $string - The string to process.
1561
+ /// @param {String} $search - The substring to look for.
1562
+ /// @param {String} $replace - The replacement string.
1563
+ /// @return {String} - The resulting string.
1564
+ ///
1565
+ /// @link https://www.sassmeister.com/gist/1b4f2da5527830088e4d
1566
+ ///
1567
+ /// @example scss - Usage
1568
+ /// @debug k-string-replace( "foo bar", "bar", "baz" ); // => "foo baz"
906
1569
  @function k-string-replace( $string, $search, $replace: "" ) {
907
1570
  @if k-meta-type-of( $string ) == number {
908
1571
  $string: $string + "";
@@ -917,22 +1580,53 @@ $_kendo-escape-class-name: (
917
1580
  @return $string;
918
1581
  }
919
1582
 
1583
+ /// Returns a substring of `$string` starting at `$start-at` and ending at `$end-at`.
1584
+ /// @param {String} $string - The string to process.
1585
+ /// @param {Number} $start-at - The index at which to start the substring.
1586
+ /// @param {Number} $end-at - The index at which to end the substring.
1587
+ /// @return {String} - The resulting string.
1588
+ ///
1589
+ /// @example scss - Usage
1590
+ /// @debug k-string-slice( "foo bar", 5 ); // => "bar"
920
1591
  @function k-string-slice( $string, $start-at, $end-at: -1 ) {
921
1592
  @return str-slice( $string, $start-at, $end-at );
922
1593
  }
923
1594
 
1595
+ /// Returns a copy of `$string` with all uppercase letters converted to lowercase.
1596
+ /// @param {String} $string - The string to process.
1597
+ /// @return {String} - The resulting string.
1598
+ ///
1599
+ /// @example scss - Usage
1600
+ /// @debug k-string-to-lower-case( "FOO BAR" ); // => "foo bar"
924
1601
  @function k-string-to-lower-case( $string ) {
925
1602
  @return to-lower-case( $string );
926
1603
  }
927
1604
 
1605
+ /// Returns a copy of `$string` with all lowercase letters converted to uppercase.
1606
+ /// @param {String} $string - The string to process.
1607
+ /// @return {String} - The resulting string.
1608
+ ///
1609
+ /// @example scss - Usage
1610
+ /// @debug k-string-to-upper-case( "foo bar" ); // => "FOO BAR"
928
1611
  @function k-string-to-upper-case( $string ) {
929
1612
  @return to-upper-case( $string );
930
1613
  }
931
1614
 
1615
+ /// Returns a unique identifier.
1616
+ /// @return {String} - The unique identifier.
1617
+ ///
1618
+ /// @example scss - Usage
1619
+ /// @debug k-string-unique-id(); // => UNIQUE_ID
932
1620
  @function k-string-unique-id() {
933
1621
  @return unique-id();
934
1622
  }
935
1623
 
1624
+ /// Returns a copy of `$string` with quotes removed.
1625
+ /// @param {String} $string - The string to process.
1626
+ /// @return {String} - The resulting string.
1627
+ ///
1628
+ /// @example scss - Usage
1629
+ /// @debug k-string-unquote( "foo bar" ); // => foo bar
936
1630
  @function k-string-unquote( $string ) {
937
1631
  @return unquote( $string );
938
1632
  }
@@ -942,7 +1636,7 @@ $_kendo-escape-class-name: (
942
1636
  // #endregion
943
1637
 
944
1638
  // #endregion
945
- // #region @import "./_variables.scss"; -> packages/utils/scss/_variables.scss
1639
+ // #region @import "./_variables.scss"; -> scss/_variables.scss
946
1640
  $kendo-prefix: k- !default;
947
1641
  $kendo-important: true !default;
948
1642
 
@@ -1327,77 +2021,132 @@ $kendo-utils: (
1327
2021
  "align-content": (
1328
2022
  normal: normal,
1329
2023
  stretch: stretch,
1330
- start: flex-start,
1331
- end: flex-end,
1332
2024
  center: center,
2025
+ start: start,
2026
+ end: end,
2027
+ flex-start: flex-start,
2028
+ flex-end: flex-end,
2029
+ baseline: baseline,
2030
+ first-baseline: first baseline,
2031
+ last-baseline: last baseline,
1333
2032
  between: space-between,
1334
2033
  around: space-around,
1335
2034
  evenly: space-evenly
1336
2035
  ),
1337
2036
  "align-items": (
1338
2037
  normal: normal,
1339
- start: flex-start,
1340
- end: flex-end,
2038
+ stretch: stretch,
1341
2039
  center: center,
1342
- stretch: stretch
2040
+ start: start,
2041
+ end: end,
2042
+ flex-start: flex-start,
2043
+ flex-end: flex-end,
2044
+ baseline: baseline,
2045
+ first-baseline: first baseline,
2046
+ last-baseline: last baseline,
2047
+ self-start: self-start,
2048
+ self-end: self-end
1343
2049
  ),
1344
2050
  "align-self": (
1345
2051
  auto: auto,
1346
2052
  normal: normal,
1347
2053
  stretch: stretch,
1348
- start: flex-start,
1349
- end: flex-end,
1350
- center: center
2054
+ center: center,
2055
+ start: start,
2056
+ end: end,
2057
+ flex-start: flex-start,
2058
+ flex-end: flex-end,
2059
+ baseline: baseline,
2060
+ first-baseline: first baseline,
2061
+ last-baseline: last baseline,
2062
+ self-start: self-start,
2063
+ self-end: self-end
1351
2064
  ),
1352
2065
  "justify-content": (
1353
2066
  normal: normal,
1354
- start: flex-start,
1355
- end: flex-end,
2067
+ stretch: stretch,
1356
2068
  center: center,
2069
+ start: start,
2070
+ end: end,
2071
+ flex-start: flex-start,
2072
+ flex-end: flex-end,
2073
+ left: left,
2074
+ right: right,
2075
+ baseline: baseline,
2076
+ first-baseline: first baseline,
2077
+ last-baseline: last baseline,
1357
2078
  between: space-between,
1358
2079
  around: space-around,
1359
- evenly: space-evenly,
1360
- stretch: stretch
2080
+ evenly: space-evenly
1361
2081
  ),
1362
2082
  "justify-items": (
1363
2083
  normal: normal,
1364
- start: flex-start,
1365
- end: flex-end,
2084
+ stretch: stretch,
1366
2085
  center: center,
1367
- stretch: stretch
2086
+ start: start,
2087
+ end: end,
2088
+ flex-start: flex-start,
2089
+ flex-end: flex-end,
2090
+ self-start: self-start,
2091
+ self-end: self-end,
2092
+ left: left,
2093
+ right: right,
2094
+ baseline: baseline,
2095
+ first-baseline: first baseline,
2096
+ last-baseline: last baseline
1368
2097
  ),
1369
2098
  "justify-self": (
1370
2099
  auto: auto,
1371
2100
  normal: normal,
1372
- start: flex-start,
1373
- end: flex-end,
2101
+ stretch: stretch,
1374
2102
  center: center,
1375
- stretch: stretch
2103
+ start: start,
2104
+ end: end,
2105
+ flex-start: flex-start,
2106
+ flex-end: flex-end,
2107
+ self-start: self-start,
2108
+ self-end: self-end,
2109
+ baseline: baseline,
2110
+ first-baseline: first baseline,
2111
+ last-baseline: last baseline
1376
2112
  ),
1377
2113
  "place-content": (
1378
2114
  normal: normal,
1379
- start: flex-start,
1380
- end: flex-end,
2115
+ stretch: stretch,
1381
2116
  center: center,
2117
+ start: start,
2118
+ end: end,
2119
+ flex-start: flex-start,
2120
+ flex-end: flex-end,
2121
+ baseline: baseline,
1382
2122
  between: space-between,
1383
2123
  around: space-around,
1384
- evenly: space-evenly,
1385
- stretch: stretch
2124
+ evenly: space-evenly
1386
2125
  ),
1387
2126
  "place-items": (
1388
2127
  normal: normal,
1389
- start: flex-start,
1390
- end: flex-end,
2128
+ stretch: stretch,
1391
2129
  center: center,
1392
- stretch: stretch
2130
+ start: start,
2131
+ end: end,
2132
+ flex-start: flex-start,
2133
+ flex-end: flex-end,
2134
+ self-start: flex-start,
2135
+ self-end: flex-end,
2136
+ baseline: baseline
1393
2137
  ),
1394
2138
  "place-self": (
1395
2139
  auto: auto,
1396
2140
  normal: normal,
2141
+ stretch: stretch,
2142
+ center: center,
1397
2143
  start: flex-start,
1398
2144
  end: flex-end,
1399
- center: center,
1400
- stretch: stretch
2145
+ flex-start: flex-start,
2146
+ flex-end: flex-end,
2147
+ self-start: flex-start,
2148
+ self-end: flex-end,
2149
+ baseline: baseline
1401
2150
  ),
1402
2151
 
1403
2152
  // Spacing
@@ -1765,7 +2514,7 @@ $kendo-utils: (
1765
2514
  ) !default;
1766
2515
 
1767
2516
  // #endregion
1768
- // #region @import "./_mixins.scss"; -> packages/utils/scss/_mixins.scss
2517
+ // #region @import "./_mixins.scss"; -> scss/_mixins.scss
1769
2518
  @mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important ) {
1770
2519
  @if $values {
1771
2520
  $_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
@@ -1797,8 +2546,8 @@ $kendo-utils: (
1797
2546
 
1798
2547
  // #endregion
1799
2548
 
1800
- // #region @import "./accessibility/index.import.scss"; -> packages/utils/scss/accessibility/index.import.scss
1801
- // #region @import "./_screen-readers.scss"; -> packages/utils/scss/accessibility/_screen-readers.scss
2549
+ // #region @import "./accessibility/index.import.scss"; -> scss/accessibility/index.import.scss
2550
+ // #region @import "./_screen-readers.scss"; -> scss/accessibility/_screen-readers.scss
1802
2551
  @mixin kendo-utils--accessibility--screen-readers() {
1803
2552
 
1804
2553
  // Screen readers utility classes
@@ -1840,8 +2589,8 @@ $kendo-utils: (
1840
2589
  }
1841
2590
 
1842
2591
  // #endregion
1843
- // #region @import "./layout/index.import.scss"; -> packages/utils/scss/layout/index.import.scss
1844
- // #region @import "./_aspect-ratio.scss"; -> packages/utils/scss/layout/_aspect-ratio.scss
2592
+ // #region @import "./layout/index.import.scss"; -> scss/layout/index.import.scss
2593
+ // #region @import "./_aspect-ratio.scss"; -> scss/layout/_aspect-ratio.scss
1845
2594
  // Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
1846
2595
 
1847
2596
  /// 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.
@@ -1877,7 +2626,7 @@ $kendo-utils: (
1877
2626
  }
1878
2627
 
1879
2628
  // #endregion
1880
- // #region @import "./_clear.scss"; -> packages/utils/scss/layout/_clear.scss
2629
+ // #region @import "./_clear.scss"; -> scss/layout/_clear.scss
1881
2630
  // Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.
1882
2631
 
1883
2632
  /// This is equivalent to `clear: left;`. Is a keyword indicating that the element is moved down to clear past left floats.
@@ -1909,7 +2658,7 @@ $kendo-utils: (
1909
2658
  }
1910
2659
 
1911
2660
  // #endregion
1912
- // #region @import "./_display.scss"; -> packages/utils/scss/layout/_display.scss
2661
+ // #region @import "./_display.scss"; -> scss/layout/_display.scss
1913
2662
  /// 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.
1914
2663
  /// @name .k-d-none
1915
2664
  /// @group display
@@ -1982,7 +2731,7 @@ $kendo-utils: (
1982
2731
  }
1983
2732
 
1984
2733
  // #endregion
1985
- // #region @import "./_float.scss"; -> packages/utils/scss/layout/_float.scss
2734
+ // #region @import "./_float.scss"; -> scss/layout/_float.scss
1986
2735
  // Float documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/float.
1987
2736
 
1988
2737
  /// This is equivalent to `float: left;`. The element must float on the left side of its containing block.
@@ -2009,7 +2758,7 @@ $kendo-utils: (
2009
2758
  }
2010
2759
 
2011
2760
  // #endregion
2012
- // #region @import "./_overflow.scss"; -> packages/utils/scss/layout/_overflow.scss
2761
+ // #region @import "./_overflow.scss"; -> scss/layout/_overflow.scss
2013
2762
  /// 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.
2014
2763
  /// @name .k-overflow-auto
2015
2764
  /// @group overflow
@@ -2094,7 +2843,7 @@ $kendo-utils: (
2094
2843
  }
2095
2844
 
2096
2845
  // #endregion
2097
- // #region @import "./_position.scss"; -> packages/utils/scss/layout/_position.scss
2846
+ // #region @import "./_position.scss"; -> scss/layout/_position.scss
2098
2847
  // Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
2099
2848
 
2100
2849
  /// 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.
@@ -2248,7 +2997,7 @@ $kendo-utils: (
2248
2997
  }
2249
2998
 
2250
2999
  // #endregion
2251
- // #region @import "./_visibility.scss"; -> packages/utils/scss/layout/_visibility.scss
3000
+ // #region @import "./_visibility.scss"; -> scss/layout/_visibility.scss
2252
3001
  // TODO: docs
2253
3002
  // TODO: consider visible and invisible vs visibility-visible and visibility-hidden
2254
3003
 
@@ -2267,7 +3016,7 @@ $kendo-utils: (
2267
3016
  }
2268
3017
 
2269
3018
  // #endregion
2270
- // #region @import "./_zindex.scss"; -> packages/utils/scss/layout/_zindex.scss
3019
+ // #region @import "./_zindex.scss"; -> scss/layout/_zindex.scss
2271
3020
  // TODO: docs
2272
3021
 
2273
3022
  @mixin kendo-utils--layout--zindex() {
@@ -2293,8 +3042,8 @@ $kendo-utils: (
2293
3042
  }
2294
3043
 
2295
3044
  // #endregion
2296
- // #region @import "./flex-grid/index.import.scss"; -> packages/utils/scss/flex-grid/index.import.scss
2297
- // #region @import "./_align-content.scss"; -> packages/utils/scss/flex-grid/_align-content.scss
3045
+ // #region @import "./flex-grid/index.import.scss"; -> scss/flex-grid/index.import.scss
3046
+ // #region @import "./_align-content.scss"; -> scss/flex-grid/_align-content.scss
2298
3047
  // TODO: docs
2299
3048
 
2300
3049
  @mixin kendo-utils--flex-grid--align-content() {
@@ -2306,7 +3055,7 @@ $kendo-utils: (
2306
3055
  }
2307
3056
 
2308
3057
  // #endregion
2309
- // #region @import "./_align-items.scss"; -> packages/utils/scss/flex-grid/_align-items.scss
3058
+ // #region @import "./_align-items.scss"; -> scss/flex-grid/_align-items.scss
2310
3059
  // TODO: docs
2311
3060
 
2312
3061
  @mixin kendo-utils--flex-grid--align-items() {
@@ -2318,7 +3067,7 @@ $kendo-utils: (
2318
3067
  }
2319
3068
 
2320
3069
  // #endregion
2321
- // #region @import "./_align-self.scss"; -> packages/utils/scss/flex-grid/_align-self.scss
3070
+ // #region @import "./_align-self.scss"; -> scss/flex-grid/_align-self.scss
2322
3071
  // TODO: docs
2323
3072
 
2324
3073
  @mixin kendo-utils--flex-grid--align-self() {
@@ -2330,7 +3079,7 @@ $kendo-utils: (
2330
3079
  }
2331
3080
 
2332
3081
  // #endregion
2333
- // #region @import "./_flex-basis.scss"; -> packages/utils/scss/flex-grid/_flex-basis.scss
3082
+ // #region @import "./_flex-basis.scss"; -> scss/flex-grid/_flex-basis.scss
2334
3083
  /// 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.
2335
3084
  /// @name .k-flex-basis-auto
2336
3085
  /// @group flex-basis
@@ -2351,7 +3100,7 @@ $kendo-utils: (
2351
3100
  }
2352
3101
 
2353
3102
  // #endregion
2354
- // #region @import "./_flex-direction.scss"; -> packages/utils/scss/flex-grid/_flex-direction.scss
3103
+ // #region @import "./_flex-direction.scss"; -> scss/flex-grid/_flex-direction.scss
2355
3104
  /// 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`.
2356
3105
  /// @name .k-flex-row
2357
3106
  /// @group flex-direction
@@ -2386,7 +3135,7 @@ $kendo-utils: (
2386
3135
  }
2387
3136
 
2388
3137
  // #endregion
2389
- // #region @import "./_flex-grow.scss"; -> packages/utils/scss/flex-grid/_flex-grow.scss
3138
+ // #region @import "./_flex-grow.scss"; -> scss/flex-grid/_flex-grow.scss
2390
3139
  /// 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.
2391
3140
  /// @name .k-flex-grow
2392
3141
  /// @group flex-grow
@@ -2407,7 +3156,7 @@ $kendo-utils: (
2407
3156
  }
2408
3157
 
2409
3158
  // #endregion
2410
- // #region @import "./_flex-shrink.scss"; -> packages/utils/scss/flex-grid/_flex-shrink.scss
3159
+ // #region @import "./_flex-shrink.scss"; -> scss/flex-grid/_flex-shrink.scss
2411
3160
  /// 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.
2412
3161
  /// @name .k-flex-shrink
2413
3162
  /// @group flex-shrink
@@ -2428,7 +3177,7 @@ $kendo-utils: (
2428
3177
  }
2429
3178
 
2430
3179
  // #endregion
2431
- // #region @import "./_flex-wrap.scss"; -> packages/utils/scss/flex-grid/_flex-wrap.scss
3180
+ // #region @import "./_flex-wrap.scss"; -> scss/flex-grid/_flex-wrap.scss
2432
3181
  /// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
2433
3182
  /// @name .k-flex-wrap
2434
3183
  /// @group flex-wrap
@@ -2453,7 +3202,7 @@ $kendo-utils: (
2453
3202
  }
2454
3203
 
2455
3204
  // #endregion
2456
- // #region @import "./_flex.scss"; -> packages/utils/scss/flex-grid/_flex.scss
3205
+ // #region @import "./_flex.scss"; -> scss/flex-grid/_flex.scss
2457
3206
  /// 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.
2458
3207
  /// @name .k-flex-1
2459
3208
  /// @group flex
@@ -2483,7 +3232,7 @@ $kendo-utils: (
2483
3232
  }
2484
3233
 
2485
3234
  // #endregion
2486
- // #region @import "./_gap.scss"; -> packages/utils/scss/flex-grid/_gap.scss
3235
+ // #region @import "./_gap.scss"; -> scss/flex-grid/_gap.scss
2487
3236
  // TODO: docs
2488
3237
 
2489
3238
  @mixin kendo-utils--flex-grid--gap() {
@@ -2497,7 +3246,7 @@ $kendo-utils: (
2497
3246
  }
2498
3247
 
2499
3248
  // #endregion
2500
- // #region @import "./_grid-auto-columns.scss"; -> packages/utils/scss/flex-grid/_grid-auto-columns.scss
3249
+ // #region @import "./_grid-auto-columns.scss"; -> scss/flex-grid/_grid-auto-columns.scss
2501
3250
  // TODO: docs
2502
3251
 
2503
3252
  @mixin kendo-utils--flex-grid--grid-auto-columns() {
@@ -2509,7 +3258,7 @@ $kendo-utils: (
2509
3258
  }
2510
3259
 
2511
3260
  // #endregion
2512
- // #region @import "./_grid-auto-flow.scss"; -> packages/utils/scss/flex-grid/_grid-auto-flow.scss
3261
+ // #region @import "./_grid-auto-flow.scss"; -> scss/flex-grid/_grid-auto-flow.scss
2513
3262
  // TODO: docs
2514
3263
 
2515
3264
  @mixin kendo-utils--flex-grid--grid-auto-flow() {
@@ -2521,7 +3270,7 @@ $kendo-utils: (
2521
3270
  }
2522
3271
 
2523
3272
  // #endregion
2524
- // #region @import "./_grid-auto-rows.scss"; -> packages/utils/scss/flex-grid/_grid-auto-rows.scss
3273
+ // #region @import "./_grid-auto-rows.scss"; -> scss/flex-grid/_grid-auto-rows.scss
2525
3274
  // TODO: docs
2526
3275
 
2527
3276
  @mixin kendo-utils--flex-grid--grid-auto-rows() {
@@ -2533,7 +3282,7 @@ $kendo-utils: (
2533
3282
  }
2534
3283
 
2535
3284
  // #endregion
2536
- // #region @import "./_grid-column-start-end.scss"; -> packages/utils/scss/flex-grid/_grid-column-start-end.scss
3285
+ // #region @import "./_grid-column-start-end.scss"; -> scss/flex-grid/_grid-column-start-end.scss
2537
3286
  // TODO: docs
2538
3287
 
2539
3288
  @mixin kendo-utils--flex-grid--grid-column-start-end() {
@@ -2561,7 +3310,7 @@ $kendo-utils: (
2561
3310
  }
2562
3311
 
2563
3312
  // #endregion
2564
- // #region @import "./_grid-row-start-end.scss"; -> packages/utils/scss/flex-grid/_grid-row-start-end.scss
3313
+ // #region @import "./_grid-row-start-end.scss"; -> scss/flex-grid/_grid-row-start-end.scss
2565
3314
  // TODO: docs
2566
3315
 
2567
3316
  @mixin kendo-utils--flex-grid--grid-row-start-end() {
@@ -2589,7 +3338,7 @@ $kendo-utils: (
2589
3338
  }
2590
3339
 
2591
3340
  // #endregion
2592
- // #region @import "./_grid-template-columns.scss"; -> packages/utils/scss/flex-grid/_grid-template-columns.scss
3341
+ // #region @import "./_grid-template-columns.scss"; -> scss/flex-grid/_grid-template-columns.scss
2593
3342
  // TODO: docs
2594
3343
 
2595
3344
  @mixin kendo-utils--flex-grid--grid-template-columns() {
@@ -2601,7 +3350,7 @@ $kendo-utils: (
2601
3350
  }
2602
3351
 
2603
3352
  // #endregion
2604
- // #region @import "./_grid-template-rows.scss"; -> packages/utils/scss/flex-grid/_grid-template-rows.scss
3353
+ // #region @import "./_grid-template-rows.scss"; -> scss/flex-grid/_grid-template-rows.scss
2605
3354
  // TODO: docs
2606
3355
 
2607
3356
  @mixin kendo-utils--flex-grid--grid-template-rows() {
@@ -2613,7 +3362,7 @@ $kendo-utils: (
2613
3362
  }
2614
3363
 
2615
3364
  // #endregion
2616
- // #region @import "./_justify-content.scss"; -> packages/utils/scss/flex-grid/_justify-content.scss
3365
+ // #region @import "./_justify-content.scss"; -> scss/flex-grid/_justify-content.scss
2617
3366
  // TODO: docs
2618
3367
 
2619
3368
  @mixin kendo-utils--flex-grid--justify-content() {
@@ -2630,7 +3379,7 @@ $kendo-utils: (
2630
3379
  }
2631
3380
 
2632
3381
  // #endregion
2633
- // #region @import "./_justify-items.scss"; -> packages/utils/scss/flex-grid/_justify-items.scss
3382
+ // #region @import "./_justify-items.scss"; -> scss/flex-grid/_justify-items.scss
2634
3383
  // TODO: docs
2635
3384
 
2636
3385
  @mixin kendo-utils--flex-grid--justify-items() {
@@ -2642,7 +3391,7 @@ $kendo-utils: (
2642
3391
  }
2643
3392
 
2644
3393
  // #endregion
2645
- // #region @import "./_justify-self.scss"; -> packages/utils/scss/flex-grid/_justify-self.scss
3394
+ // #region @import "./_justify-self.scss"; -> scss/flex-grid/_justify-self.scss
2646
3395
  // TODO: docs
2647
3396
 
2648
3397
  @mixin kendo-utils--flex-grid--justify-self() {
@@ -2654,7 +3403,7 @@ $kendo-utils: (
2654
3403
  }
2655
3404
 
2656
3405
  // #endregion
2657
- // #region @import "./_order.scss"; -> packages/utils/scss/flex-grid/_order.scss
3406
+ // #region @import "./_order.scss"; -> scss/flex-grid/_order.scss
2658
3407
  /// This is equivalent to `order: -9999;`.
2659
3408
  /// @name .k-order-first
2660
3409
  /// @group order
@@ -2670,11 +3419,6 @@ $kendo-utils: (
2670
3419
  /// @group order
2671
3420
  /// @contextType css
2672
3421
 
2673
- /// This is equivalent to `order: 1;`, `order: 2;`, `order: 12;`, etc.
2674
- /// @name .from k-order-1 to k-order-12
2675
- /// @group order
2676
- /// @contextType css
2677
-
2678
3422
  @mixin kendo-utils--flex-grid--order() {
2679
3423
 
2680
3424
  // Order utility classes
@@ -2684,7 +3428,7 @@ $kendo-utils: (
2684
3428
  }
2685
3429
 
2686
3430
  // #endregion
2687
- // #region @import "./_place-content.scss"; -> packages/utils/scss/flex-grid/_place-content.scss
3431
+ // #region @import "./_place-content.scss"; -> scss/flex-grid/_place-content.scss
2688
3432
  // TODO: docs
2689
3433
 
2690
3434
  @mixin kendo-utils--flex-grid--place-content() {
@@ -2696,7 +3440,7 @@ $kendo-utils: (
2696
3440
  }
2697
3441
 
2698
3442
  // #endregion
2699
- // #region @import "./_place-items.scss"; -> packages/utils/scss/flex-grid/_place-items.scss
3443
+ // #region @import "./_place-items.scss"; -> scss/flex-grid/_place-items.scss
2700
3444
  // TODO: docs
2701
3445
 
2702
3446
  @mixin kendo-utils--flex-grid--place-items() {
@@ -2708,7 +3452,7 @@ $kendo-utils: (
2708
3452
  }
2709
3453
 
2710
3454
  // #endregion
2711
- // #region @import "./_place-self.scss"; -> packages/utils/scss/flex-grid/_place-self.scss
3455
+ // #region @import "./_place-self.scss"; -> scss/flex-grid/_place-self.scss
2712
3456
  // TODO: docs
2713
3457
 
2714
3458
  @mixin kendo-utils--flex-grid--place-self() {
@@ -2750,8 +3494,8 @@ $kendo-utils: (
2750
3494
  }
2751
3495
 
2752
3496
  // #endregion
2753
- // #region @import "./spacing/index.import.scss"; -> packages/utils/scss/spacing/index.import.scss
2754
- // #region @import "./_margin.scss"; -> packages/utils/scss/spacing/_margin.scss
3497
+ // #region @import "./spacing/index.import.scss"; -> scss/spacing/index.import.scss
3498
+ // #region @import "./_margin.scss"; -> scss/spacing/_margin.scss
2755
3499
  // TODO: docs
2756
3500
 
2757
3501
  @mixin kendo-utils--spacing--margin() {
@@ -2769,7 +3513,7 @@ $kendo-utils: (
2769
3513
  }
2770
3514
 
2771
3515
  // #endregion
2772
- // #region @import "./_padding.scss"; -> packages/utils/scss/spacing/_padding.scss
3516
+ // #region @import "./_padding.scss"; -> scss/spacing/_padding.scss
2773
3517
  // TODO: docs
2774
3518
 
2775
3519
  @mixin kendo-utils--spacing--padding() {
@@ -2787,7 +3531,7 @@ $kendo-utils: (
2787
3531
  }
2788
3532
 
2789
3533
  // #endregion
2790
- // #region @import "./_space-between.scss"; -> packages/utils/scss/spacing/_space-between.scss
3534
+ // #region @import "./_space-between.scss"; -> scss/spacing/_space-between.scss
2791
3535
  // TODO: docs
2792
3536
 
2793
3537
  @mixin kendo-utils--spacing--space-between() {
@@ -2817,8 +3561,8 @@ $kendo-utils: (
2817
3561
  }
2818
3562
 
2819
3563
  // #endregion
2820
- // #region @import "./sizing/index.import.scss"; -> packages/utils/scss/sizing/index.import.scss
2821
- // #region @import "./_height.scss"; -> packages/utils/scss/sizing/_height.scss
3564
+ // #region @import "./sizing/index.import.scss"; -> scss/sizing/index.import.scss
3565
+ // #region @import "./_height.scss"; -> scss/sizing/_height.scss
2822
3566
  // TODO: docs
2823
3567
 
2824
3568
  @mixin kendo-utils--sizing--height() {
@@ -2838,7 +3582,7 @@ $kendo-utils: (
2838
3582
  }
2839
3583
 
2840
3584
  // #endregion
2841
- // #region @import "./_width.scss"; -> packages/utils/scss/sizing/_width.scss
3585
+ // #region @import "./_width.scss"; -> scss/sizing/_width.scss
2842
3586
  // TODO: docs
2843
3587
 
2844
3588
  @mixin kendo-utils--sizing--width() {
@@ -2866,9 +3610,9 @@ $kendo-utils: (
2866
3610
  }
2867
3611
 
2868
3612
  // #endregion
2869
- // #region @import "./typography/index.import.scss"; -> packages/utils/scss/typography/index.import.scss
3613
+ // #region @import "./typography/index.import.scss"; -> scss/typography/index.import.scss
2870
3614
  // font family
2871
- // #region @import "./_font-size.scss"; -> packages/utils/scss/typography/_font-size.scss
3615
+ // #region @import "./_font-size.scss"; -> scss/typography/_font-size.scss
2872
3616
  // TODO: docs
2873
3617
 
2874
3618
  @mixin kendo-utils--typography--font-size() {
@@ -2884,7 +3628,7 @@ $kendo-utils: (
2884
3628
 
2885
3629
  // #endregion
2886
3630
  // font smoothing
2887
- // #region @import "./_font-style.scss"; -> packages/utils/scss/typography/_font-style.scss
3631
+ // #region @import "./_font-style.scss"; -> scss/typography/_font-style.scss
2888
3632
  // TODO: docs
2889
3633
 
2890
3634
  @mixin kendo-utils--typography--font-style() {
@@ -2896,7 +3640,7 @@ $kendo-utils: (
2896
3640
  }
2897
3641
 
2898
3642
  // #endregion
2899
- // #region @import "./_font-weight.scss"; -> packages/utils/scss/typography/_font-weight.scss
3643
+ // #region @import "./_font-weight.scss"; -> scss/typography/_font-weight.scss
2900
3644
  // TODO: docs
2901
3645
 
2902
3646
  @mixin kendo-utils--typography--font-weight() {
@@ -2916,7 +3660,7 @@ $kendo-utils: (
2916
3660
  // letter spacing
2917
3661
  // line height
2918
3662
  // list style
2919
- // #region @import "./_text-align.scss"; -> packages/utils/scss/typography/_text-align.scss
3663
+ // #region @import "./_text-align.scss"; -> scss/typography/_text-align.scss
2920
3664
  // Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
2921
3665
 
2922
3666
  /// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
@@ -2949,7 +3693,7 @@ $kendo-utils: (
2949
3693
  }
2950
3694
 
2951
3695
  // #endregion
2952
- // #region @import "./_text-color.scss"; -> packages/utils/scss/typography/_text-color.scss
3696
+ // #region @import "./_text-color.scss"; -> scss/typography/_text-color.scss
2953
3697
  // TODO: docs
2954
3698
 
2955
3699
  @mixin kendo-utils--typography--text-color() {
@@ -2966,7 +3710,7 @@ $kendo-utils: (
2966
3710
 
2967
3711
  // #endregion
2968
3712
  // text decoration
2969
- // #region @import "./_text-transform.scss"; -> packages/utils/scss/typography/_text-transform.scss
3713
+ // #region @import "./_text-transform.scss"; -> scss/typography/_text-transform.scss
2970
3714
  // Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
2971
3715
 
2972
3716
  /// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
@@ -2996,7 +3740,7 @@ $kendo-utils: (
2996
3740
  // text overflow
2997
3741
  // text indent
2998
3742
  // vertical align
2999
- // #region @import "./_white-space.scss"; -> packages/utils/scss/typography/_white-space.scss
3743
+ // #region @import "./_white-space.scss"; -> scss/typography/_white-space.scss
3000
3744
  // White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
3001
3745
 
3002
3746
  /// 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.
@@ -3062,8 +3806,8 @@ $kendo-utils: (
3062
3806
  }
3063
3807
 
3064
3808
  // #endregion
3065
- // #region @import "./background/index.import.scss"; -> packages/utils/scss/background/index.import.scss
3066
- // #region @import "./_background-color.scss"; -> packages/utils/scss/background/_background-color.scss
3809
+ // #region @import "./background/index.import.scss"; -> scss/background/index.import.scss
3810
+ // #region @import "./_background-color.scss"; -> scss/background/_background-color.scss
3067
3811
  // TODO: docs
3068
3812
 
3069
3813
  @mixin kendo-utils--background--background-color() {
@@ -3082,8 +3826,8 @@ $kendo-utils: (
3082
3826
  }
3083
3827
 
3084
3828
  // #endregion
3085
- // #region @import "./border/index.import.scss"; -> packages/utils/scss/border/index.import.scss
3086
- // #region @import "./_border-color.scss"; -> packages/utils/scss/border/_border-color.scss
3829
+ // #region @import "./border/index.import.scss"; -> scss/border/index.import.scss
3830
+ // #region @import "./_border-color.scss"; -> scss/border/_border-color.scss
3087
3831
  // TODO: docs
3088
3832
 
3089
3833
  @mixin kendo-utils--border--border-color() {
@@ -3101,7 +3845,7 @@ $kendo-utils: (
3101
3845
  }
3102
3846
 
3103
3847
  // #endregion
3104
- // #region @import "./_border-radius.scss"; -> packages/utils/scss/border/_border-radius.scss
3848
+ // #region @import "./_border-radius.scss"; -> scss/border/_border-radius.scss
3105
3849
  // TODO: docs
3106
3850
 
3107
3851
  @mixin kendo-utils--border--border-radius() {
@@ -3121,7 +3865,7 @@ $kendo-utils: (
3121
3865
  }
3122
3866
 
3123
3867
  // #endregion
3124
- // #region @import "./_border-style.scss"; -> packages/utils/scss/border/_border-style.scss
3868
+ // #region @import "./_border-style.scss"; -> scss/border/_border-style.scss
3125
3869
  // TODO: docs
3126
3870
 
3127
3871
  @mixin kendo-utils--border--border-style() {
@@ -3139,7 +3883,7 @@ $kendo-utils: (
3139
3883
  }
3140
3884
 
3141
3885
  // #endregion
3142
- // #region @import "./_border-width.scss"; -> packages/utils/scss/border/_border-width.scss
3886
+ // #region @import "./_border-width.scss"; -> scss/border/_border-width.scss
3143
3887
  // TODO: docs
3144
3888
 
3145
3889
  @mixin kendo-utils--border--border-width() {
@@ -3164,7 +3908,7 @@ $kendo-utils: (
3164
3908
  }
3165
3909
 
3166
3910
  // #endregion
3167
- // #region @import "./_outline-color.scss"; -> packages/utils/scss/border/_outline-color.scss
3911
+ // #region @import "./_outline-color.scss"; -> scss/border/_outline-color.scss
3168
3912
  // TODO: docs
3169
3913
 
3170
3914
  @mixin kendo-utils--border--outline-color() {
@@ -3176,7 +3920,7 @@ $kendo-utils: (
3176
3920
  }
3177
3921
 
3178
3922
  // #endregion
3179
- // #region @import "./_outline-offset.scss"; -> packages/utils/scss/border/_outline-offset.scss
3923
+ // #region @import "./_outline-offset.scss"; -> scss/border/_outline-offset.scss
3180
3924
  // TODO: docs
3181
3925
 
3182
3926
  @mixin kendo-utils--border--outline-offset() {
@@ -3188,7 +3932,7 @@ $kendo-utils: (
3188
3932
  }
3189
3933
 
3190
3934
  // #endregion
3191
- // #region @import "./_outline-style.scss"; -> packages/utils/scss/border/_outline-style.scss
3935
+ // #region @import "./_outline-style.scss"; -> scss/border/_outline-style.scss
3192
3936
  // TODO: docs
3193
3937
 
3194
3938
  @mixin kendo-utils--border--outline-style() {
@@ -3200,7 +3944,7 @@ $kendo-utils: (
3200
3944
  }
3201
3945
 
3202
3946
  // #endregion
3203
- // #region @import "./_outline-width.scss"; -> packages/utils/scss/border/_outline-width.scss
3947
+ // #region @import "./_outline-width.scss"; -> scss/border/_outline-width.scss
3204
3948
  // TODO: docs
3205
3949
 
3206
3950
  @mixin kendo-utils--border--outline-width() {
@@ -3228,8 +3972,8 @@ $kendo-utils: (
3228
3972
  // #endregion
3229
3973
  // effects
3230
3974
  // filter
3231
- // #region @import "./table/index.import.scss"; -> packages/utils/scss/table/index.import.scss
3232
- // #region @import "./_border-collapse.scss"; -> packages/utils/scss/table/_border-collapse.scss
3975
+ // #region @import "./table/index.import.scss"; -> scss/table/index.import.scss
3976
+ // #region @import "./_border-collapse.scss"; -> scss/table/_border-collapse.scss
3233
3977
  // TODO: docs
3234
3978
 
3235
3979
  @mixin kendo-utils--table--border-collapse() {
@@ -3241,7 +3985,7 @@ $kendo-utils: (
3241
3985
  }
3242
3986
 
3243
3987
  // #endregion
3244
- // #region @import "./_table-layout.scss"; -> packages/utils/scss/table/_table-layout.scss
3988
+ // #region @import "./_table-layout.scss"; -> scss/table/_table-layout.scss
3245
3989
  // Table-layout documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout.
3246
3990
 
3247
3991
  /// 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.
@@ -3273,8 +4017,8 @@ $kendo-utils: (
3273
4017
 
3274
4018
  // #endregion
3275
4019
  // transition
3276
- // #region @import "./transform/index.import.scss"; -> packages/utils/scss/transform/index.import.scss
3277
- // #region @import "./_flip.scss"; -> packages/utils/scss/transform/_flip.scss
4020
+ // #region @import "./transform/index.import.scss"; -> scss/transform/index.import.scss
4021
+ // #region @import "./_flip.scss"; -> scss/transform/_flip.scss
3278
4022
  /// This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
3279
4023
  /// @name .k-flip-h
3280
4024
  /// @group transform
@@ -3309,7 +4053,7 @@ $kendo-utils: (
3309
4053
  }
3310
4054
 
3311
4055
  // #endregion
3312
- // #region @import "./_origin.scss"; -> packages/utils/scss/transform/_origin.scss
4056
+ // #region @import "./_origin.scss"; -> scss/transform/_origin.scss
3313
4057
  // TODO: docs
3314
4058
 
3315
4059
  @mixin kendo-utils--transform--origin() {
@@ -3321,7 +4065,7 @@ $kendo-utils: (
3321
4065
  }
3322
4066
 
3323
4067
  // #endregion
3324
- // #region @import "./_rotate.scss"; -> packages/utils/scss/transform/_rotate.scss
4068
+ // #region @import "./_rotate.scss"; -> scss/transform/_rotate.scss
3325
4069
  /// This is equivalent to `transform: rotate( 0 );`. Does not rotate the element.
3326
4070
  /// @name .k-rotate-0
3327
4071
  /// @group transform
@@ -3377,7 +4121,7 @@ $kendo-utils: (
3377
4121
  }
3378
4122
 
3379
4123
  // #endregion
3380
- // #region @import "./_scale.scss"; -> packages/utils/scss/transform/_scale.scss
4124
+ // #region @import "./_scale.scss"; -> scss/transform/_scale.scss
3381
4125
  /// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
3382
4126
  /// @name .k-scale-0
3383
4127
  /// @group transform
@@ -3416,7 +4160,7 @@ $kendo-utils: (
3416
4160
  }
3417
4161
 
3418
4162
  // #endregion
3419
- // #region @import "./_skew.scss"; -> packages/utils/scss/transform/_skew.scss
4163
+ // #region @import "./_skew.scss"; -> scss/transform/_skew.scss
3420
4164
  // TODO: docs
3421
4165
 
3422
4166
  // sass-lint:disable function-name-format
@@ -3438,7 +4182,7 @@ $kendo-utils: (
3438
4182
  }
3439
4183
 
3440
4184
  // #endregion
3441
- // #region @import "./_translate.scss"; -> packages/utils/scss/transform/_translate.scss
4185
+ // #region @import "./_translate.scss"; -> scss/transform/_translate.scss
3442
4186
  /// This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
3443
4187
  /// @name .k-translate-0
3444
4188
  /// @group transform
@@ -3530,8 +4274,8 @@ $kendo-utils: (
3530
4274
  }
3531
4275
 
3532
4276
  // #endregion
3533
- // #region @import "./interactivity/index.import.scss"; -> packages/utils/scss/interactivity/index.import.scss
3534
- // #region @import "./_accent-color.scss"; -> packages/utils/scss/interactivity/_accent-color.scss
4277
+ // #region @import "./interactivity/index.import.scss"; -> scss/interactivity/index.import.scss
4278
+ // #region @import "./_accent-color.scss"; -> scss/interactivity/_accent-color.scss
3535
4279
  // TODO: docs
3536
4280
 
3537
4281
  @mixin kendo-utils--interactivity--accent-color() {
@@ -3543,7 +4287,7 @@ $kendo-utils: (
3543
4287
  }
3544
4288
 
3545
4289
  // #endregion
3546
- // #region @import "./_appearance.scss"; -> packages/utils/scss/interactivity/_appearance.scss
4290
+ // #region @import "./_appearance.scss"; -> scss/interactivity/_appearance.scss
3547
4291
  /// This is equivalent to `appearance: none;`. Resets any browser specific styling on an element.
3548
4292
  /// @name .k-appearance-none
3549
4293
  /// @group appearance
@@ -3563,7 +4307,7 @@ $kendo-utils: (
3563
4307
  }
3564
4308
 
3565
4309
  // #endregion
3566
- // #region @import "./_caret-color.scss"; -> packages/utils/scss/interactivity/_caret-color.scss
4310
+ // #region @import "./_caret-color.scss"; -> scss/interactivity/_caret-color.scss
3567
4311
  // TODO: docs
3568
4312
 
3569
4313
  @mixin kendo-utils--interactivity--caret-color() {
@@ -3575,7 +4319,7 @@ $kendo-utils: (
3575
4319
  }
3576
4320
 
3577
4321
  // #endregion
3578
- // #region @import "./_cursor.scss"; -> packages/utils/scss/interactivity/_cursor.scss
4322
+ // #region @import "./_cursor.scss"; -> scss/interactivity/_cursor.scss
3579
4323
  // TODO: docs
3580
4324
 
3581
4325
  @mixin kendo-utils--interactivity--cursor() {
@@ -3587,7 +4331,7 @@ $kendo-utils: (
3587
4331
  }
3588
4332
 
3589
4333
  // #endregion
3590
- // #region @import "./_pointer-events.scss"; -> packages/utils/scss/interactivity/_pointer-events.scss
4334
+ // #region @import "./_pointer-events.scss"; -> scss/interactivity/_pointer-events.scss
3591
4335
  // Pointer-events documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
3592
4336
 
3593
4337
  /// 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.
@@ -3609,7 +4353,7 @@ $kendo-utils: (
3609
4353
  }
3610
4354
 
3611
4355
  // #endregion
3612
- // #region @import "./_resize.scss"; -> packages/utils/scss/interactivity/_resize.scss
4356
+ // #region @import "./_resize.scss"; -> scss/interactivity/_resize.scss
3613
4357
  // Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize.
3614
4358
 
3615
4359
  /// 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.
@@ -3641,7 +4385,7 @@ $kendo-utils: (
3641
4385
  }
3642
4386
 
3643
4387
  // #endregion
3644
- // #region @import "./_scroll.scss"; -> packages/utils/scss/interactivity/_scroll.scss
4388
+ // #region @import "./_scroll.scss"; -> scss/interactivity/_scroll.scss
3645
4389
  // TODO: docs
3646
4390
 
3647
4391
  @mixin kendo-utils--interactivity--scroll() {
@@ -3694,7 +4438,7 @@ $kendo-utils: (
3694
4438
  }
3695
4439
 
3696
4440
  // #endregion
3697
- // #region @import "./_touch-action.scss"; -> packages/utils/scss/interactivity/_touch-action.scss
4441
+ // #region @import "./_touch-action.scss"; -> scss/interactivity/_touch-action.scss
3698
4442
  // TODO: docs
3699
4443
 
3700
4444
  /// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
@@ -3716,7 +4460,7 @@ $kendo-utils: (
3716
4460
  }
3717
4461
 
3718
4462
  // #endregion
3719
- // #region @import "./_user-select.scss"; -> packages/utils/scss/interactivity/_user-select.scss
4463
+ // #region @import "./_user-select.scss"; -> scss/interactivity/_user-select.scss
3720
4464
  // User-select documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/user-select.
3721
4465
 
3722
4466
  /// 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.
@@ -3753,7 +4497,7 @@ $kendo-utils: (
3753
4497
  }
3754
4498
 
3755
4499
  // #endregion
3756
- // #region @import "./_will-change.scss"; -> packages/utils/scss/interactivity/_will-change.scss
4500
+ // #region @import "./_will-change.scss"; -> scss/interactivity/_will-change.scss
3757
4501
  // TODO: docs
3758
4502
 
3759
4503
  @mixin kendo-utils--interactivity--will-change() {