@progress/kendo-theme-utils 5.4.2-dev.5

package/scss/accessibility/_screen-readers.scss

@@ -0,0 +1,28 @@
+$kendo-utils-accessibility: map-get( $kendo-utils, "accessibility" ) !default;
+
+@if $kendo-utils-accessibility {
+    /// @name .k-sr-only
+    /// @description This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+    /// @group accessibility
+    .#{$kendo-prefix}sr-only {
+        margin: -1px;
+        padding: 0;
+        width: 1px;
+        height: 1px;
+        border-width: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        position: absolute;
+    }
+
+    .#{$kendo-prefix}not-sr-only {
+        margin: 0;
+        padding: 0;
+        width: auto;
+        height: auto;
+        border-width: 0;
+        overflow: visible;
+        clip: auto;
+        position: static;
+    }
+}

package/scss/accessibility/index.import.scss

@@ -0,0 +1 @@
+@import "./_screen-readers.scss";

package/scss/all.scss

@@ -0,0 +1 @@
+@import "./index.import.scss";

package/scss/border/_border-color.scss

@@ -0,0 +1,11 @@
+// TODO DOCS
+
+$kendo-utils-border-color: map-get( $kendo-utils, "border-color" ) !default;
+
+@include generate-utils( border, border-color, $kendo-utils-border-color );
+@include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
+@include generate-utils( border-r, border-right-color, $kendo-utils-border-color );
+@include generate-utils( border-b, border-bottom-color, $kendo-utils-border-color );
+@include generate-utils( border-l, border-left-color, $kendo-utils-border-color );
+@include generate-utils( border-x, border-inline-color, $kendo-utils-border-color );
+@include generate-utils( border-y, border-block-color, $kendo-utils-border-color );

package/scss/border/_border-radius.scss

@@ -0,0 +1,13 @@
+// TODO DOCS
+
+$kendo-utils-border-radius: map-get( $kendo-utils, "border-radius" ) !default;
+
+@include generate-utils( rounded, border-radius, $kendo-utils-border-radius );
+@include generate-utils( rounded-tl, border-top-left-radius, $kendo-utils-border-radius );
+@include generate-utils( rounded-tr, border-top-right-radius, $kendo-utils-border-radius );
+@include generate-utils( rounded-br, border-bottom-right-radius, $kendo-utils-border-radius );
+@include generate-utils( rounded-bl, border-bottom-left-radius, $kendo-utils-border-radius );
+@include generate-utils( rounded-t, ( border-top-left-radius, border-top-right-radius ), $kendo-utils-border-radius );
+@include generate-utils( rounded-r, ( border-top-right-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
+@include generate-utils( rounded-b, ( border-bottom-left-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
+@include generate-utils( rounded-l, ( border-top-left-radius, border-bottom-left-radius ), $kendo-utils-border-radius );

package/scss/border/_border-style.scss

@@ -0,0 +1,11 @@
+// TODO DOCS
+
+$kendo-utils-border-style: map-get( $kendo-utils, "border-style" ) !default;
+
+@include generate-utils( border, border-style, $kendo-utils-border-style );
+@include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
+@include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
+@include generate-utils( border-b, border-bottom-style, $kendo-utils-border-style );
+@include generate-utils( border-l, border-left-style, $kendo-utils-border-style );
+@include generate-utils( border-x, border-inline-style, $kendo-utils-border-style );
+@include generate-utils( border-y, border-block-style, $kendo-utils-border-style );

package/scss/border/_border-width.scss

@@ -0,0 +1,11 @@
+// TODO DOCS
+
+$kendo-utils-border-width: map-get( $kendo-utils, "border-width" ) !default;
+
+@include generate-utils( border, border-width, $kendo-utils-border-width );
+@include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
+@include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
+@include generate-utils( border-b, border-bottom-width, $kendo-utils-border-width );
+@include generate-utils( border-l, border-left-width, $kendo-utils-border-width );
+@include generate-utils( border-x, border-inline-width, $kendo-utils-border-width );
+@include generate-utils( border-y, border-block-width, $kendo-utils-border-width );

package/scss/border/_outline-color.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-outline-color: map-get( $kendo-utils, "outline-color" ) !default;
+
+@include generate-utils( outline, outline-color, $kendo-utils-outline-color );

package/scss/border/_outline-offset.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-outline-offset: map-get( $kendo-utils, "outline-offset" ) !default;
+
+@include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );

package/scss/border/_outline-style.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-outline-style: map-get( $kendo-utils, "outline-style" ) !default;
+
+@include generate-utils( outline, outline-style, $kendo-utils-outline-style );

package/scss/border/_outline-width.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-outline-width: map-get( $kendo-utils, "outline-width" ) !default;
+
+@include generate-utils( outline, outline-width, $kendo-utils-outline-width );

package/scss/border/index.import.scss

@@ -0,0 +1,8 @@
+@import "./_border-width.scss";
+@import "./_border-style.scss";
+@import "./_border-color.scss";
+@import "./_border-radius.scss";
+@import "./_outline-width.scss";
+@import "./_outline-style.scss";
+@import "./_outline-color.scss";
+@import "./_outline-offset.scss";

package/scss/flex-grid/_align-content.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-align-content: map-get( $kendo-utils, "align-content" ) !default;
+
+@include generate-utils( align-content, align-content, $kendo-utils-align-content );

package/scss/flex-grid/_align-items.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-align-items: map-get( $kendo-utils, "align-items" ) !default;
+
+@include generate-utils( align-items, align-items, $kendo-utils-align-items );

package/scss/flex-grid/_align-self.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-align-self: map-get( $kendo-utils, "align-self" ) !default;
+
+@include generate-utils( align-self, align-self, $kendo-utils-align-self );

package/scss/flex-grid/_flex-basis.scss

@@ -0,0 +1,13 @@
+/// @name .k-flex-basis-auto
+/// @description 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.
+/// @group flex-basis
+
+// TODO DOCS
+
+/// @name .k-flex-basis-0
+/// @description This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
+/// @group flex-basis
+
+$kendo-utils-flex-basis: map-get( $kendo-utils, "flex-basis" ) !default;
+
+@include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );

package/scss/flex-grid/_flex-direction.scss

@@ -0,0 +1,19 @@
+/// @name .k-flex-row
+/// @description 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`.
+/// @group flex-direction
+
+/// @name .k-flex-row-reverse
+/// @description This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
+/// @group flex-direction
+
+/// @name .k-flex-col
+/// @description This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
+/// @group flex-direction
+
+/// @name .k-flex-col-reverse
+/// @description This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
+/// @group flex-direction
+
+$kendo-utils-flex-direction: map-get( $kendo-utils, "flex-direction" ) !default;
+
+@include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );

package/scss/flex-grid/_flex-grow.scss

@@ -0,0 +1,11 @@
+/// @name .k-flex-grow
+/// @description 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.
+/// @group flex-grow
+
+/// @name .k-flex-grow-0
+/// @description This is equivalent to `flex-grow: 0`. The item will not grow.
+/// @group flex-grow
+
+$kendo-utils-flex-grow: map-get( $kendo-utils, "flex-grow" ) !default;
+
+@include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );

package/scss/flex-grid/_flex-shrink.scss

@@ -0,0 +1,11 @@
+/// @name .k-flex-shrink
+/// @description 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.
+/// @group flex-shrink
+
+/// @name .k-flex-shrink-0
+/// @description This is equivalent to `flex-shrink: 0`. The item will not shrink.
+/// @group flex-shrink
+
+$kendo-utils-flex-shrink: map-get( $kendo-utils, "flex-shrink" ) !default;
+
+@include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );

package/scss/flex-grid/_flex-wrap.scss

@@ -0,0 +1,15 @@
+/// @name .k-flex-wrap
+/// @description This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
+/// @group flex-wrap
+
+/// @name .k-flex-nowrap
+/// @description This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
+/// @group flex-wrap
+
+/// @name .k-flex-wrap-reverse
+/// @description This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
+/// @group flex-wrap
+
+$kendo-utils-flex-wrap: map-get( $kendo-utils, "flex-wrap" ) !default;
+
+@include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );

package/scss/flex-grid/_flex.scss

@@ -0,0 +1,19 @@
+/// @name .k-flex-1
+/// @description 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.
+/// @group flex
+
+/// @name .k-flex-auto
+/// @description This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
+/// @group flex
+
+/// @name .k-flex-initial
+/// @description This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
+/// @group flex
+
+/// @name .k-flex-none
+/// @description This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
+/// @group flex
+
+$kendo-utils-flex: map-get( $kendo-utils, "flex" ) !default;
+
+@include generate-utils( flex, flex, $kendo-utils-flex );

package/scss/flex-grid/_gap.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-gap: map-get( $kendo-utils, "gap" ) !default;
+
+@include generate-utils( gap, gap, $kendo-utils-gap );

package/scss/flex-grid/_grid-auto-columns.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-grid-auto-columns: map-get( $kendo-utils, "grid-auto-columns" ) !default;
+
+@include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );

package/scss/flex-grid/_grid-auto-flow.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-grid-auto-flow: map-get( $kendo-utils, "grid-auto-flow" ) !default;
+
+@include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );

package/scss/flex-grid/_grid-auto-rows.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-grid-auto-rows: map-get( $kendo-utils, "grid-auto-rows" ) !default;
+
+@include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );

package/scss/flex-grid/_grid-column-start-end.scss

@@ -0,0 +1,15 @@
+// TODO DOCS
+
+$kendo-utils-grid-column-start: map-get( $kendo-utils, "grid-column-start" ) !default;
+
+@include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
+
+
+$kendo-utils-grid-column-end: map-get( $kendo-utils, "grid-column-end" ) !default;
+
+@include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
+
+
+$kendo-utils-grid-column-span: map-get( $kendo-utils, "grid-column-span" ) !default;
+
+@include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );

package/scss/flex-grid/_grid-row-start-end.scss

@@ -0,0 +1,15 @@
+// TODO DOCS
+
+$kendo-utils-grid-row-start: map-get( $kendo-utils, "grid-row-start" ) !default;
+
+@include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
+
+
+$kendo-utils-grid-row-end: map-get( $kendo-utils, "grid-row-end" ) !default;
+
+@include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
+
+
+$kendo-utils-grid-row-span: map-get( $kendo-utils, "grid-row-span" ) !default;
+
+@include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );

package/scss/flex-grid/_grid-template-columns.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-grid-template-columns: map-get( $kendo-utils, "grid-template-columns" ) !default;
+
+@include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );

package/scss/flex-grid/_grid-template-rows.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-grid-template-rows: map-get( $kendo-utils, "grid-template-rows" ) !default;
+
+@include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );

package/scss/flex-grid/_justify-content.scss

@@ -0,0 +1,8 @@
+// TODO DOCS
+
+$kendo-utils-justify-content: map-get( $kendo-utils, "justify-content" ) !default;
+
+@include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
+
+.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0%; }
+.\!.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0% !important; } // sass-lint:disable-line no-important class-name-format

package/scss/flex-grid/_justify-items.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-justify-items: map-get( $kendo-utils, "justify-items" ) !default;
+
+@include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );

package/scss/flex-grid/_justify-self.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-justify-self: map-get( $kendo-utils, "justify-self" ) !default;
+
+@include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );

package/scss/flex-grid/_order.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-order: map-get( $kendo-utils, "order" ) !default;
+
+@include generate-utils( order, order, $kendo-utils-order );

package/scss/flex-grid/_place-content.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-place-content: map-get( $kendo-utils, "place-content" ) !default;
+
+@include generate-utils( place-content, place-content, $kendo-utils-place-content );

package/scss/flex-grid/_place-items.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-place-items: map-get( $kendo-utils, "place-items" ) !default;
+
+@include generate-utils( place-items, place-items, $kendo-utils-place-items );

package/scss/flex-grid/_place-self.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-place-self: map-get( $kendo-utils, "place-self" ) !default;
+
+@include generate-utils( place-self, place-self, $kendo-utils-place-self );

package/scss/flex-grid/index.import.scss

@@ -0,0 +1,24 @@
+@import "./_flex-direction.scss";
+@import "./_flex-wrap.scss";
+@import "./_flex.scss";
+@import "./_flex-grow.scss";
+@import "./_flex-shrink.scss";
+@import "./_flex-basis.scss";
+@import "./_order.scss";
+@import "./_grid-template-columns.scss";
+@import "./_grid-template-rows.scss";
+@import "./_grid-column-start-end.scss";
+@import "./_grid-row-start-end.scss";
+@import "./_grid-auto-flow.scss";
+@import "./_grid-auto-columns.scss";
+@import "./_grid-auto-rows.scss";
+@import "./_gap.scss";
+@import "./_align-content.scss";
+@import "./_align-items.scss";
+@import "./_align-self.scss";
+@import "./_justify-content.scss";
+@import "./_justify-items.scss";
+@import "./_justify-self.scss";
+@import "./_place-content.scss";
+@import "./_place-items.scss";
+@import "./_place-self.scss";

package/scss/index.import.scss

@@ -0,0 +1,18 @@
+@import "./_functions.scss";
+@import "./_variables.scss";
+@import "./_mixins.scss";
+
+@import "./accessibility/index.import.scss";
+@import "./layout/index.import.scss";
+@import "./flex-grid/index.import.scss";
+@import "./spacing/index.import.scss";
+@import "./sizing/index.import.scss";
+@import "./typography/index.import.scss";
+// background
+@import "./border/index.import.scss";
+// effects
+// filter
+@import "./table/index.import.scss";
+// transition
+@import "./transform/index.import.scss";
+@import "./interactivity/index.import.scss";

package/scss/interactivity/_accent-color.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-accent-color: map-get( $kendo-utils, "accent-color" ) !default;
+
+@include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );

package/scss/interactivity/_appearance.scss

@@ -0,0 +1,11 @@
+/// @name .k-appearance-none
+/// @description This is equivalent to `appearance: none;`. Resets any browser specific styling on an element.
+/// @group appearance
+
+/// @name .k-appearance-auto
+/// @description This is equivalent to `appearance: auto;`. The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.
+/// @group appearance
+
+$kendo-utils-appearance: map-get( $kendo-utils, "appearance" ) !default;
+
+@include generate-utils( appearance, appearance, $kendo-utils-appearance );

package/scss/interactivity/_caret-color.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-caret-color: map-get( $kendo-utils, "caret-color" ) !default;
+
+@include generate-utils( caret, caret-color, $kendo-utils-caret-color );

package/scss/interactivity/_cursor.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-cursor: map-get( $kendo-utils, "cursor" ) !default;
+
+@include generate-utils( cursor, cursor, $kendo-utils-cursor );

package/scss/interactivity/_pointer-events.scss

@@ -0,0 +1,11 @@
+/// @name .k-pointer-events-none
+/// @description 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.
+/// @group pointer-events
+
+/// @name .k-pointer-events-auto
+/// @description This is equivalent to `pointer-events: auto;`. The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.
+/// @group pointer-events
+
+$kendo-utils-pointer-events: map-get( $kendo-utils, "pointer-events" ) !default;
+
+@include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );

package/scss/interactivity/_resize.scss

@@ -0,0 +1,19 @@
+/// @name .k-resize
+/// @description 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.
+/// @group resize
+
+/// @name .k-resize-none
+/// @description This is equivalent to `resize: none;`. The element offers no user-controllable method for resizing it.
+/// @group resize
+
+/// @name .k-resize-x
+/// @description This is equivalent to `resize: horizontal;`. The element displays a mechanism for allowing the user to resize it in the horizontal direction.
+/// @group resize
+
+/// @name .k-resize-y
+/// @description This is equivalent to `resize: vertical;`. The element displays a mechanism for allowing the user to resize it in the vertical direction.
+/// @group resize
+
+$kendo-utils-resize: map-get( $kendo-utils, "resize" ) !default;
+
+@include generate-utils( resize, resize, $kendo-utils-resize );

package/scss/interactivity/_scroll.scss

@@ -0,0 +1,45 @@
+// TODO DOCS
+
+$kendo-utils-scroll-behavior: map-get( $kendo-utils, "scroll-behavior" ) !default;
+
+@include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
+
+
+$kendo-utils-scroll-snap-type: map-get( $kendo-utils, "scroll-snap-type" ) !default;
+
+@include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
+
+.#{$kendo-prefix}scroll-snap-mandatory { #{--#{$kendo-prefix}scroll-snap-strictness}: mandatory; }
+.#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }
+
+
+$kendo-utils-scroll-snap-stop: map-get( $kendo-utils, "scroll-snap-stop" ) !default;
+
+@include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
+
+
+$kendo-utils-scroll-snap-align: map-get( $kendo-utils, "scroll-snap-align" ) !default;
+
+@include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
+
+
+$kendo-utils-scroll-margin: 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 );
+
+
+$kendo-utils-scroll-padding: 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

@@ -0,0 +1,13 @@
+// TODO DOCS
+
+/// @name .k-touch-action-none
+/// @description This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
+/// @group touch-action
+
+/// @name .k-touch-action-auto
+/// @description This is equivalent to `touch-action: auto;`. Enable browser handling of all panning and zooming gestures.
+/// @group touch-action
+
+$kendo-utils-touch-action: map-get( $kendo-utils, "touch-action" ) !default;
+
+@include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );

package/scss/interactivity/_user-select.scss

@@ -0,0 +1,23 @@
+/// @name .k-user-select-auto
+/// @description This is equivalent to `user-select: auto;`. This is the default value of the `user-select` property.
+/// @group user-select
+
+/// @name .k-user-select-none
+/// @description 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.
+/// @group user-select
+
+/// @name .k-user-select-text
+/// @description This is equivalent to `user-select: text;`. The text can be selected by the user.
+/// @group user-select
+
+/// @name .k-user-select-all
+/// @description This is equivalent to `user-select: all;`. The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.  If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
+/// @group user-select
+
+/// @name .k-user-select-contain
+/// @description This is equivalent to `user-select: contain;`. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
+/// @group user-select
+
+$kendo-utils-user-select: map-get( $kendo-utils, "user-select" ) !default;
+
+@include generate-utils( user-select, user-select, $kendo-utils-user-select );

package/scss/interactivity/_will-change.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-will-change: map-get( $kendo-utils, "will-change" ) !default;
+
+@include generate-utils( will-change, will-change, $kendo-utils-will-change );

package/scss/interactivity/index.import.scss

@@ -0,0 +1,10 @@
+@import "./_accent-color.scss";
+@import "./_appearance.scss";
+@import "./_cursor.scss";
+@import "./_caret-color.scss";
+@import "./_pointer-events.scss";
+@import "./_resize.scss";
+@import "./_scroll.scss";
+@import "./_touch-action.scss";
+@import "./_user-select.scss";
+@import "./_will-change.scss";

package/scss/layout/_aspect-ratio.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-aspect-ratio: map-get( $kendo-utils, "aspect-ratio" ) !default;
+
+@include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );

package/scss/layout/_clear.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-clear: map-get( $kendo-utils, "clear" ) !default;
+
+@include generate-utils( clear, clear, $kendo-utils-clear );