chore(utils): fix issues in docs

packages/utils/docs/customization.md

@@ -1392,6 +1392,34 @@ This is equivalent to `box-sizing: content-box;`.
 
 
 
+### `.k-clear-left`
+
+This is equivalent to `clear: left;`.
+
+
+
+
+### `.k-clear-right`
+
+This is equivalent to `clear: right;`.
+
+
+
+
+### `.k-clear-both`
+
+This is equivalent to `clear: both;`.
+
+
+
+
+### `.k-clear-none`
+
+This is equivalent to `clear: none;`.
+
+
+
+
 ### `.k-columns-1`
 
 This is equivalent to `columns: 1;`.
@@ -1770,34 +1798,6 @@ This is equivalent to `flex-wrap: wrap-reverse;`.
 
 
 
-### `.k-clear-left`
-
-This is equivalent to `clear: left;`.
-
-
-
-
-### `.k-clear-right`
-
-This is equivalent to `clear: right;`.
-
-
-
-
-### `.k-clear-both`
-
-This is equivalent to `clear: both;`.
-
-
-
-
-### `.k-clear-none`
-
-This is equivalent to `clear: none;`.
-
-
-
-
 ### `.k-float-left`
 
 This is equivalent to `float: left;`.
@@ -2169,42 +2169,42 @@ This is equivalent to `grid-auto-columns: minmax( 0, 1fr );`.
 
 
 
-### `.k-grid-auto-flow-row`
+### `.k-grid-flow-row`
 
 This is equivalent to `grid-auto-flow: row;`.
 
 
 
 
-### `.k-grid-auto-flow-column`
+### `.k-grid-flow-column`
 
 This is equivalent to `grid-auto-flow: column;`.
 
 
 
 
-### `.k-grid-auto-flow-dense`
+### `.k-grid-flow-dense`
 
 This is equivalent to `grid-auto-flow: dense;`.
 
 
 
 
-### `.k-grid-auto-flow-row-dense`
+### `.k-grid-flow-row-dense`
 
 This is equivalent to `grid-auto-flow: row dense;`.
 
 
 
 
-### `.k-grid-auto-flow-col-dense`
+### `.k-grid-flow-col-dense`
 
 This is equivalent to `grid-auto-flow: col dense;`.
 
 
 
 
-### `.k-grid-auto-flow-unset`
+### `.k-grid-flow-unset`
 
 This is equivalent to `grid-auto-flow: unset;`.
 
@@ -3877,7 +3877,7 @@ This is equivalent to `padding: 0.5rem;`.
 
 
 
-### `.k-p-pd`
+### `.k-p-md`
 
 This is equivalent to `padding: 0.75rem;`.
 
@@ -4703,20 +4703,6 @@ This is equivalent to `place-self: baseline;`.
 
 
 
-### `.k-pointer-events-none`
-
-This is equivalent to `pointer-events: none;`.
-
-
-
-
-### `.k-pointer-events-auto`
-
-This is equivalent to `pointer-events: auto;`.
-
-
-
-
 ### `.k-top-0`
 
 This is equivalent to `top: 0;`.
@@ -4803,7 +4789,7 @@ This is equivalent to `bottom: 0; right: 0;`.
 
 ### `.k-inset-0`
 
-This is equivalent to `inset: 0;`.This is a shorthand that corresponds to the top: 0; right: 0; bottom: 0; and/or left: 0 properties. It has the same multi-value syntax of the margin shorthand.
+This is equivalent to `inset: 0;`.
 
 
 
@@ -4822,6 +4808,20 @@ This is equivalent to `inset-block: 0;`.
 
 
 
+### `.k-pointer-events-none`
+
+This is equivalent to `pointer-events: none;`.
+
+
+
+
+### `.k-pointer-events-auto`
+
+This is equivalent to `pointer-events: auto;`.
+
+
+
+
 ### `.k-pos-static`
 
 This is equivalent to `position: static;`.

packages/utils/scss/flex-grid/_grid-auto-flow.scss

@@ -1,36 +1,36 @@
 /// This is equivalent to `grid-auto-flow: row;`.
 /// @example grid-auto-flow: row;
-/// @name .k-grid-auto-flow-row
+/// @name .k-grid-flow-row
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: column;`.
 /// @example grid-auto-flow: column;
-/// @name .k-grid-auto-flow-column
+/// @name .k-grid-flow-column
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: dense;`.
 /// @example grid-auto-flow: dense;
-/// @name .k-grid-auto-flow-dense
+/// @name .k-grid-flow-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: row dense;`.
 /// @example grid-auto-flow: row dense;
-/// @name .k-grid-auto-flow-row-dense
+/// @name .k-grid-flow-row-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: col dense;`.
 /// @example grid-auto-flow: col dense;
-/// @name .k-grid-auto-flow-col-dense
+/// @name .k-grid-flow-col-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: unset;`.
 /// @example grid-auto-flow: unset;
-/// @name .k-grid-auto-flow-unset
+/// @name .k-grid-flow-unset
 /// @group grid-auto-flow
 /// @contextType css
 

packages/utils/scss/layout/_clear.scss

@@ -1,25 +1,25 @@
 /// This is equivalent to `clear: left;`.
 /// @example clear: left;
 /// @name .k-clear-left
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: right;`.
 /// @example clear: right;
 /// @name .k-clear-right
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: both;`.
 /// @example clear: both;
 /// @name .k-clear-both
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: none;`.
 /// @example clear: none;
 /// @name .k-clear-none
-/// @group float
+/// @group clear
 /// @contextType css
 
 @mixin kendo-utils--layout--clear() {

packages/utils/scss/layout/_placement.scss

@@ -1,91 +1,91 @@
 /// This is equivalent to `top: 0;`.
 /// @example top: 0;
 /// @name .k-top-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `right: 0;`.
 /// @example right: 0;
 /// @name .k-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0;`.
 /// @example bottom: 0;
 /// @name .k-bottom-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `left: 0;`.
 /// @example left: 0;
 /// @name .k-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0;`.
 /// @example top: 0;
 /// @name .k-pos-top-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `right: 0;`.
 /// @example right: 0;
 /// @name .k-pos-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0;`.
 /// @example bottom: 0;
 /// @name .k-pos-bottom-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `left: 0;`.
 /// @example left: 0;
 /// @name .k-pos-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0; left: 0;`.
 /// @example top: 0; left: 0;
 /// @name .k-top-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0; right: 0;`.
 /// @example top: 0; right: 0;
 /// @name .k-top-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0; left: 0;`.
 /// @example bottom: 0; left: 0;
 /// @name .k-bottom-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0; right: 0;`.
 /// @example bottom: 0; right: 0;
 /// @name .k-bottom-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
-/// This is equivalent to `inset: 0;`.This is a shorthand that corresponds to the top: 0; right: 0; bottom: 0; and/or left: 0 properties. It has the same multi-value syntax of the margin shorthand.
+/// This is equivalent to `inset: 0;`.
 /// @example inset: 0;
 /// @name .k-inset-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `inset-inline: 0;`.
 /// @example inset-inline: 0;
 /// @name .k-inset-x-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `inset-block: 0;`.
 /// @example inset-block: 0;
 /// @name .k-inset-y-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 @mixin kendo-utils--layout--placement() {
@@ -97,7 +97,7 @@
     @include generate-utils( left, left, $kendo-utils-placement );
 
 
-    // Position length utility classes
+    // placement length utility classes
     @each $side in (top, right, bottom, left) {
         .#{$kendo-prefix}#{$side},
         .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style

packages/utils/scss/spacing/_padding.scss

@@ -42,7 +42,7 @@
 
 /// This is equivalent to `padding: 0.75rem;`.
 /// @example padding: 0.75rem;
-/// @name .k-p-pd
+/// @name .k-p-md
 /// @group padding
 /// @contextType css