@progress/kendo-theme-utils 8.2.0 → 9.0.0-dev.1

package/scss/interactivity/_accent-color.scss

@@ -1,9 +1,15 @@
 // TODO: docs
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-accent-color"));
+
 @mixin kendo-utils--interactivity--accent-color() {
+    @include module-render("utils-interactivity-accent-color") {
 
-    // Accent color utility classes
-    $kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
-    @include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );
+        // Accent color utility classes
+        $kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
+        @include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );
 
+    }
 }

package/scss/interactivity/_appearance.scss

@@ -10,10 +10,16 @@
 /// @group appearance
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-appearance"));
+
 @mixin kendo-utils--interactivity--appearance() {
+    @include module-render("utils-interactivity-appearance") {
 
-    // Appearance utility classes
-    $kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
-    @include generate-utils( appearance, appearance, $kendo-utils-appearance );
+        // Appearance utility classes
+        $kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
+        @include generate-utils( appearance, appearance, $kendo-utils-appearance );
 
+    }
 }

package/scss/interactivity/_caret-color.scss

@@ -1,9 +1,15 @@
 // TODO: docs
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-caret-color"));
+
 @mixin kendo-utils--interactivity--caret-color() {
+    @include module-render("utils-interactivity-caret-color") {
 
-    // Caret color utility classes
-    $kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
-    @include generate-utils( caret, caret-color, $kendo-utils-caret-color );
+        // Caret color utility classes
+        $kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
+        @include generate-utils( caret, caret-color, $kendo-utils-caret-color );
 
+    }
 }

package/scss/interactivity/_cursor.scss

@@ -22,10 +22,16 @@
 /// @group cursor
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-cursor"));
+
 @mixin kendo-utils--interactivity--cursor() {
+    @include module-render("utils-interactivity-cursor") {
 
-    // Cursor utility classes
-    $kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
-    @include generate-utils( cursor, cursor, $kendo-utils-cursor );
+        // Cursor utility classes
+        $kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
+        @include generate-utils( cursor, cursor, $kendo-utils-cursor );
 
+    }
 }

package/scss/interactivity/_pointer-events.scss

@@ -10,10 +10,16 @@
 /// @group pointer-events
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-pointer-events"));
+
 @mixin kendo-utils--interactivity--pointer-events() {
+    @include module-render("utils-interactivity-pointer-events") {
 
-    // Pointer events utility classes
-    $kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
-    @include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );
+        // Pointer events utility classes
+        $kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
+        @include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );
 
+    }
 }

package/scss/interactivity/_resize.scss

@@ -22,10 +22,16 @@
 /// @group resize
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-resize"));
+
 @mixin kendo-utils--interactivity--resize() {
+    @include module-render("utils-interactivity-resize") {
 
-    // Resize utility classes
-    $kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
-    @include generate-utils( resize, resize, $kendo-utils-resize );
+        // Resize utility classes
+        $kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
+        @include generate-utils( resize, resize, $kendo-utils-resize );
 
+    }
 }

package/scss/interactivity/_scroll.scss

@@ -322,53 +322,57 @@
 /// @group scroll
 /// @contextType css
 
-
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-scroll"));
 
 @mixin kendo-utils--interactivity--scroll() {
+    @include module-render("utils-interactivity-scroll") {
 
-    // Scroll behavior utility classes
-    $kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
-    @include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
+        // Scroll behavior utility classes
+        $kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
+        @include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
 
 
-    // Scroll snap type utility classes
-    $kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
-    @include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
+        // Scroll snap type utility classes
+        $kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
+        @include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
 
-    // Custom scroll snap type utility classes
-    .#{$kendo-prefix}scroll-snap-mandatory { #{--#{$kendo-prefix}scroll-snap-strictness}: mandatory; }
-    .#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }
+        // Custom scroll snap type utility classes
+        .#{$kendo-prefix}scroll-snap-mandatory { #{--#{$kendo-prefix}scroll-snap-strictness}: mandatory; }
+        .#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }
 
 
-    // Scroll snap stop utility classes
-    $kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
-    @include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
+        // Scroll snap stop utility classes
+        $kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
+        @include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
 
 
-    // Scroll snap align utility classes
-    $kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
-    @include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
+        // Scroll snap align utility classes
+        $kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
+        @include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
 
 
-    // Scroll margin utility classes
-    $kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
-    @include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
-    @include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
-    @include generate-utils( scroll-mr, scroll-margin-right, $kendo-utils-scroll-margin );
-    @include generate-utils( scroll-mb, scroll-margin-bottom, $kendo-utils-scroll-margin );
-    @include generate-utils( scroll-ml, scroll-margin-left, $kendo-utils-scroll-margin );
-    @include generate-utils( scroll-mx, scroll-margin-inline, $kendo-utils-scroll-margin );
-    @include generate-utils( scroll-my, scroll-margin-block, $kendo-utils-scroll-margin );
+        // Scroll margin utility classes
+        $kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
+        @include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
+        @include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
+        @include generate-utils( scroll-mr, scroll-margin-right, $kendo-utils-scroll-margin );
+        @include generate-utils( scroll-mb, scroll-margin-bottom, $kendo-utils-scroll-margin );
+        @include generate-utils( scroll-ml, scroll-margin-left, $kendo-utils-scroll-margin );
+        @include generate-utils( scroll-mx, scroll-margin-inline, $kendo-utils-scroll-margin );
+        @include generate-utils( scroll-my, scroll-margin-block, $kendo-utils-scroll-margin );
 
 
-    // Scroll padding utility classes
-    $kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
-    @include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
-    @include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
-    @include generate-utils( scroll-pr, scroll-padding-right, $kendo-utils-scroll-padding );
-    @include generate-utils( scroll-pb, scroll-padding-bottom, $kendo-utils-scroll-padding );
-    @include generate-utils( scroll-pl, scroll-padding-left, $kendo-utils-scroll-padding );
-    @include generate-utils( scroll-px, scroll-padding-inline, $kendo-utils-scroll-padding );
-    @include generate-utils( scroll-py, scroll-padding-block, $kendo-utils-scroll-padding );
+        // Scroll padding utility classes
+        $kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
+        @include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
+        @include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
+        @include generate-utils( scroll-pr, scroll-padding-right, $kendo-utils-scroll-padding );
+        @include generate-utils( scroll-pb, scroll-padding-bottom, $kendo-utils-scroll-padding );
+        @include generate-utils( scroll-pl, scroll-padding-left, $kendo-utils-scroll-padding );
+        @include generate-utils( scroll-px, scroll-padding-inline, $kendo-utils-scroll-padding );
+        @include generate-utils( scroll-py, scroll-padding-block, $kendo-utils-scroll-padding );
 
+    }
 }

package/scss/interactivity/_touch-action.scss

@@ -58,10 +58,16 @@
 /// @group touch-action
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-touch-action"));
+
 @mixin kendo-utils--interactivity--touch-action() {
+    @include module-render("utils-interactivity-touch-action") {
 
-    // Touch-action utility classes
-    $kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
-    @include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );
+        // Touch-action utility classes
+        $kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
+        @include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );
 
+    }
 }

package/scss/interactivity/_user-select.scss

@@ -28,10 +28,16 @@
 /// @group user-select
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-user-select"));
+
 @mixin kendo-utils--interactivity--user-select() {
+    @include module-render("utils-interactivity-user-select") {
 
-    // User select utility classes
-    $kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
-    @include generate-utils( user-select, user-select, $kendo-utils-user-select );
+        // User select utility classes
+        $kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
+        @include generate-utils( user-select, user-select, $kendo-utils-user-select );
 
+    }
 }

package/scss/interactivity/_will-change.scss

@@ -1,9 +1,15 @@
 // TODO: docs
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-interactivity-will-change"));
+
 @mixin kendo-utils--interactivity--will-change() {
+    @include module-render("utils-interactivity-will-change") {
 
-    // Will change utility classes
-    $kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
-    @include generate-utils( will-change, will-change, $kendo-utils-will-change );
+        // Will change utility classes
+        $kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
+        @include generate-utils( will-change, will-change, $kendo-utils-will-change );
 
+    }
 }

package/scss/layout/_aspect-ratio.scss

@@ -22,14 +22,20 @@
 /// @group aspect-ratio
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-aspect-ratio"));
+
 @mixin kendo-utils--layout--aspect-ratio() {
+    @include module-render("utils-layout-aspect-ratio") {
 
-    // Aspect ratio utility classes
-    $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
-    @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+        // Aspect ratio utility classes
+        $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
+        @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
 
 
-    // Legacy aliases
-    @include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+        // Legacy aliases
+        @include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );
 
+    }
 }

package/scss/layout/_box-sizing.scss

@@ -10,10 +10,16 @@
 /// @group box-sizing
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-box-sizing"));
+
 @mixin kendo-utils--layout--box-sizing() {
+    @include module-render("utils-layout-box-sizing") {
 
-    // box-sizing utility classes
-    $kendo-utils-box-sizing: k-map-get( $kendo-utils, "box-sizing" ) !default;
-    @include generate-utils( box-sizing, box-sizing, $kendo-utils-box-sizing );
+        // box-sizing utility classes
+        $kendo-utils-box-sizing: k-map-get( $kendo-utils, "box-sizing" ) !default;
+        @include generate-utils( box-sizing, box-sizing, $kendo-utils-box-sizing );
 
+    }
 }

package/scss/layout/_clear.scss

@@ -22,10 +22,16 @@
 /// @group clear
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-clear"));
+
 @mixin kendo-utils--layout--clear() {
+    @include module-render("utils-layout-clear") {
 
-    // Clear utility classes
-    $kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
-    @include generate-utils( clear, clear, $kendo-utils-clear );
+        // Clear utility classes
+        $kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
+        @include generate-utils( clear, clear, $kendo-utils-clear );
 
+    }
 }

package/scss/layout/_columns.scss

@@ -76,10 +76,16 @@
 /// @group columns
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-columns"));
+
 @mixin kendo-utils--layout--columns() {
+    @include module-render("utils-layout-columns") {
 
-    // columns utility classes
-    $kendo-utils-columns: k-map-get( $kendo-utils, "columns" ) !default;
-    @include generate-utils( columns, columns, $kendo-utils-columns );
+        // columns utility classes
+        $kendo-utils-columns: k-map-get( $kendo-utils, "columns" ) !default;
+        @include generate-utils( columns, columns, $kendo-utils-columns );
 
+    }
 }

package/scss/layout/_display.scss

@@ -82,18 +82,32 @@
 /// @group display
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-display"));
+
 @mixin kendo-utils--layout--display() {
+    @include module-render("utils-layout-display") {
 
-    // Display utility classes
-    $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
-    @include generate-utils( d, display, $kendo-utils-display );
+        // Display utility classes
+        $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
+        @include generate-utils( d, display, $kendo-utils-display );
 
 
-    // Legacy aliases
-    @include generate-utils( display, display, $kendo-utils-display );
-    .#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
-    .\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; }
-    .#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
-    .\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; }
+        // Legacy aliases
+        @include generate-utils( display, display, $kendo-utils-display );
+        .#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
+        .\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; }
+        .#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
+        .\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; }
+
+    }
+}
+
+@mixin kendo-utils--layout--display--responsive($key) {
+
+    // Display responsive utility classes
+    $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
+    @include generate-utils( d-#{$key}, display, $kendo-utils-display, $important: false );
 
 }

package/scss/layout/_float.scss

@@ -16,10 +16,16 @@
 /// @group float
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-float"));
+
 @mixin kendo-utils--layout--float() {
+    @include module-render("utils-layout-float") {
 
-    // Float utility classes
-    $kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
-    @include generate-utils( float, float, $kendo-utils-float );
+        // Float utility classes
+        $kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
+        @include generate-utils( float, float, $kendo-utils-float );
 
+    }
 }

package/scss/layout/_object-fit.scss

@@ -34,10 +34,16 @@
 /// @group object-fit
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-object-fit"));
+
 @mixin kendo-utils--layout--object-fit() {
+    @include module-render("utils-layout-object-fit") {
 
-    // object-fit utility classes
-    $kendo-utils-object-fit: k-map-get( $kendo-utils, "object-fit" ) !default;
-    @include generate-utils( object-fit, object-fit, $kendo-utils-object-fit );
+        // object-fit utility classes
+        $kendo-utils-object-fit: k-map-get( $kendo-utils, "object-fit" ) !default;
+        @include generate-utils( object-fit, object-fit, $kendo-utils-object-fit );
 
+    }
 }

package/scss/layout/_object-position.scss

@@ -52,10 +52,16 @@
 /// @group object-position
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-object-position"));
+
 @mixin kendo-utils--layout--object-position() {
+    @include module-render("utils-layout-object-position") {
 
-    // object-position utility classes
-    $kendo-utils-object-position: k-map-get( $kendo-utils, "object-position" ) !default;
-    @include generate-utils( object-position, object-position, $kendo-utils-object-position );
+        // object-position utility classes
+        $kendo-utils-object-position: k-map-get( $kendo-utils, "object-position" ) !default;
+        @include generate-utils( object-position, object-position, $kendo-utils-object-position );
 
+    }
 }

package/scss/layout/_overflow.scss

@@ -88,11 +88,18 @@
 /// @group overflow
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-overflow"));
+
 @mixin kendo-utils--layout--overflow() {
+    @include module-render("utils-layout-overflow") {
+
+        // Overflow utility classes
+        $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
+        @include generate-utils( overflow, overflow, $kendo-utils-overflow );
+        @include generate-utils( overflow-x, overflow-x, $kendo-utils-overflow );
+        @include generate-utils( overflow-y, overflow-y, $kendo-utils-overflow );
 
-    // Overflow utility classes
-    $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
-    @include generate-utils( overflow, overflow, $kendo-utils-overflow );
-    @include generate-utils( overflow-x, overflow-x, $kendo-utils-overflow );
-    @include generate-utils( overflow-y, overflow-y, $kendo-utils-overflow );
+    }
 }

package/scss/layout/_placement.scss

@@ -88,87 +88,36 @@
 /// @group placement
 /// @contextType css
 
-@mixin kendo-utils--layout--placement() {
-    // Top / right / bottom / left
-    $kendo-utils-placement: k-map-get( $kendo-utils, "placement" ) !default;
-    @include generate-utils( top, top, $kendo-utils-placement );
-    @include generate-utils( right, right, $kendo-utils-placement );
-    @include generate-utils( bottom, bottom, $kendo-utils-placement );
-    @include generate-utils( left, left, $kendo-utils-placement );
-
-
-    // placement length utility classes
-    @each $side in (top, right, bottom, left) {
-        .#{$kendo-prefix}#{$side},
-        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; }
-    }
-
-    // Inset utility classes
-    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
-    @include generate-utils( inset, inset, $kendo-utils-inset );
-    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
-    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
-    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
-    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
-    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
-    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
-
-
-    // Legacy aliases
-    .#{$kendo-prefix}top-start,
-    .#{$kendo-prefix}pos-top-start {
-        top: 0;
-        inset-inline-start: 0;
-    }
-
-    .#{$kendo-prefix}top-end,
-    .#{$kendo-prefix}pos-top-end {
-        top: 0;
-        inset-inline-end: 0;
-    }
-
-    .#{$kendo-prefix}bottom-start,
-    .#{$kendo-prefix}pos-bottom-start {
-        bottom: 0;
-        inset-inline-start: 0;
-    }
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-placement"));
 
-    .#{$kendo-prefix}bottom-end,
-    .#{$kendo-prefix}pos-bottom-end {
-        bottom: 0;
-        inset-inline-end: 0;
-    }
+@mixin kendo-utils--layout--placement() {
+    @include module-render("utils-layout-placement") {
+
+        // Top / right / bottom / left
+        $kendo-utils-placement: k-map-get( $kendo-utils, "placement" ) !default;
+        @include generate-utils( top, top, $kendo-utils-placement );
+        @include generate-utils( right, right, $kendo-utils-placement );
+        @include generate-utils( bottom, bottom, $kendo-utils-placement );
+        @include generate-utils( left, left, $kendo-utils-placement );
+
+
+        // placement length utility classes
+        @each $side in (top, right, bottom, left) {
+            .#{$kendo-prefix}#{$side},
+            .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; }
+        }
+
+        // Inset utility classes
+        $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
+        @include generate-utils( inset, inset, $kendo-utils-inset );
+        @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
+        @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
+        @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
+        @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
+        @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
+        @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
 
-    .#{$kendo-prefix}top-center,
-    .#{$kendo-prefix}pos-top-center {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .#{$kendo-prefix}middle-left,
-    .#{$kendo-prefix}middle-start,
-    .#{$kendo-prefix}pos-middle-start {
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}middle-center {
-        top: 50%;
-        left: 50%;
-        transform: translateY(-50%);
     }
-    .#{$kendo-prefix}middle-right,
-    .#{$kendo-prefix}middle-end,
-    .#{$kendo-prefix}pos-middle-end {
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}bottom-center,
-    .#{$kendo-prefix}pos-bottom-center {
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
 }