@progress/kendo-theme-core 12.0.2-dev.1 → 12.1.0-dev.0

package/dist/meta/sassdoc-data.json

@@ -10826,6 +10826,57 @@
                     "description": "The string to escape"
                 }
             ]
+        },
+        {
+            "description": "Return a z-index value based on layer and number of steps.\n",
+            "commentRange": {
+                "start": 23,
+                "end": 27
+            },
+            "context": {
+                "type": "function",
+                "name": "k-z-index",
+                "code": "\n    $layer-value: map.get($kendo-z-layers, $layer);\n\n    @if not $layer-value {\n        @error \"Layer '#{$layer}' not found in $kendo-z-layers map.\";\n    }\n\n    @return $layer-value + ($n * $kendo-z-step) + $delta;\n",
+                "line": {
+                    "start": 28,
+                    "end": 36
+                },
+                "signature": "k-z-index($layer, $Number, $Balancing)"
+            },
+            "return": {
+                "type": "Number",
+                "description": "Calculated z-index value."
+            },
+            "access": "public",
+            "group": [
+                "undefined"
+            ],
+            "require": [],
+            "throw": [
+                "Layer "
+            ],
+            "file": {
+                "path": "core/scss/z-index/index.import.scss",
+                "name": "index.import.scss"
+            },
+            "examples": [],
+            "parameters": [
+                {
+                    "type": "String",
+                    "name": "layer",
+                    "description": "The layer key from the $kendo-z-layers map."
+                },
+                {
+                    "type": "Number} $n [0] - {Optional",
+                    "name": "Number",
+                    "description": "of steps above the base layer."
+                },
+                {
+                    "type": "Number} $delta [0] - {Deprecated, Optional",
+                    "name": "Balancing",
+                    "description": "value."
+                }
+            ]
         }
     ],
     "placeholders": [],

package/dist/meta/sassdoc-raw-data.json

@@ -10041,5 +10041,54 @@
             "path": "styles/_accessibility.scss",
             "name": "_accessibility.scss"
         }
+    },
+    {
+        "description": "Return a z-index value based on layer and number of steps.\n",
+        "commentRange": {
+            "start": 23,
+            "end": 27
+        },
+        "context": {
+            "type": "function",
+            "name": "k-z-index",
+            "code": "\n    $layer-value: map.get($kendo-z-layers, $layer);\n\n    @if not $layer-value {\n        @error \"Layer '#{$layer}' not found in $kendo-z-layers map.\";\n    }\n\n    @return $layer-value + ($n * $kendo-z-step) + $delta;\n",
+            "line": {
+                "start": 28,
+                "end": 36
+            }
+        },
+        "parameter": [
+            {
+                "type": "String",
+                "name": "layer",
+                "description": "The layer key from the $kendo-z-layers map."
+            },
+            {
+                "type": "Number} $n [0] - {Optional",
+                "name": "Number",
+                "description": "of steps above the base layer."
+            },
+            {
+                "type": "Number} $delta [0] - {Deprecated, Optional",
+                "name": "Balancing",
+                "description": "value."
+            }
+        ],
+        "return": {
+            "type": "Number",
+            "description": "Calculated z-index value."
+        },
+        "access": "public",
+        "group": [
+            "undefined"
+        ],
+        "require": [],
+        "throw": [
+            "Layer "
+        ],
+        "file": {
+            "path": "z-index/index.import.scss",
+            "name": "index.import.scss"
+        }
     }
 ]

package/dist/meta/variables.json

@@ -886,5 +886,30 @@
     "kendo-transition": {
         "type": "List",
         "value": "(color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out)"
+    },
+    "kendo-z-step": {
+        "type": "Number",
+        "value": "1"
+    },
+    "kendo-z-layers": {
+        "type": "Map",
+        "value": "(bottom: -1, base: 0, handle: 10, selection: 100, badge: 300, animation: 600, banner: 1000, floating: 5000, overlay: 10000, drawer: 11000, modal: 11500, popup: 12000, loading: 20000, top: 100000, scroll: 200000)",
+        "prettyValue": {
+            "bottom": -1,
+            "base": 0,
+            "handle": 10,
+            "selection": 100,
+            "badge": 300,
+            "animation": 600,
+            "banner": 1000,
+            "floating": 5000,
+            "overlay": 10000,
+            "drawer": 11000,
+            "modal": 11500,
+            "popup": 12000,
+            "loading": 20000,
+            "top": 100000,
+            "scroll": 200000
+        }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "12.0.2-dev.1",
+  "version": "12.1.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "d445807a67dc48f595ab5f34026a6b1da89ff9e8"
+  "gitHead": "b1609a5c919e4965dd210cd03499604f10582cf9"
 }

package/scss/components/action-sheet/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-action-sheet--layout-base() {
 
@@ -12,14 +13,14 @@
         position: fixed;
         inset-block-start: 0;
         inset-inline-start: 0;
-        z-index: 9999;
+        z-index: k-z-index("overlay");
         overflow: hidden;
         transform: translateZ(0);
 
         // Overlay
         > .k-overlay {
             position: absolute;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
         // Nested animation container
@@ -29,7 +30,7 @@
             border-radius: 0;
             overflow: hidden;
             position: absolute;
-            z-index: 2;
+            z-index: k-z-index("base", 2);
             inset-block-start: 0;
             inset-inline-start: 0;
             pointer-events: none;
@@ -42,7 +43,7 @@
         // No animation container
         > .k-actionsheet {
             position: absolute;
-            z-index: 2;
+            z-index: k-z-index("base", 2);
         }
 
         // Enable mouse events for action sheet

package/scss/components/appbar/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-appbar--layout-base() {
 
@@ -94,7 +95,7 @@
     .k-appbar-fixed {
         width: 100%;
         position: fixed;
-        z-index: 1;
+        z-index: k-z-index("floating");
     }
 
 

package/scss/components/badge/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-badge--layout-base() {
 
@@ -90,7 +91,7 @@
 
         .k-badge-#{$placement} {
             position: absolute;
-            z-index: 9999;
+            z-index: k-z-index("badge");
 
             &.k-top-start {
                 @if $translate {

package/scss/components/bottom-navigation/_layout.scss

@@ -1,4 +1,5 @@
 @use "../../color-system/_constants.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-bottom-navigation--layout-base() {
@@ -111,7 +112,7 @@
     // Positioning
     .k-bottom-nav.k-pos-fixed {
         inset-block-end: 0;
-        z-index: 1;
+        z-index: k-z-index("floating");
     }
 
 }

package/scss/components/button/_layout.scss

@@ -3,6 +3,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-button--layout-base() {
 
@@ -172,7 +173,7 @@
         > .k-button:active,
         > .k-button.k-active,
         > .k-button.k-selected {
-            z-index: 2;
+            z-index: k-z-index("base", 2);
         }
 
         .k-button:not(:first-child):not(:last-child) {
@@ -272,7 +273,7 @@
         inset-inline-end: calc( -1 * $kendo-button-border-width );
         inset-block-start: calc( -1 * $kendo-button-border-width );
         inset-block-end: calc( -1 * $kendo-button-border-width );
-        z-index: 0;
+        z-index: k-z-index("base");
         transition: opacity .2s ease-in-out;
     }
 
@@ -337,7 +338,7 @@
             inset-inline-end: calc( -1 * $kendo-button-border-width );
             inset-block-start: calc( -1 * $kendo-button-border-width );
             inset-block-end: calc( -1 * $kendo-button-border-width );
-            z-index: 0;
+            z-index: k-z-index("base");
             transition: opacity .2s ease-in-out;
         }
     }

package/scss/components/calendar/_layout.scss

@@ -2,6 +2,7 @@
 @use "sass:math";
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-calendar--layout-base() {
@@ -47,7 +48,7 @@
         outline: 0;
         display: table;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
     }
     .k-calendar-caption,
     .k-calendar-caption.k-calendar-th,
@@ -128,7 +129,7 @@
         gap: $kendo-calendar-nav-gap;
         align-items: center;
         position: relative;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
     }
 
 
@@ -174,7 +175,7 @@
         box-sizing: content-box;
         gap: $kendo-calendar-view-gap;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
         overflow: hidden;
 
         .k-today {
@@ -219,7 +220,7 @@
 
         .k-calendar-td {
             width: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
-            height: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );;
+            height: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
             inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
             block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
         }
@@ -272,7 +273,7 @@
     // scoped in calendar until it is used elsewhere
     .k-calendar .k-scrollable-placeholder {
         position: absolute;
-        z-index: -1;
+        z-index: k-z-index("bottom");
         width: 1px;
         inset-block-start: 0;
         inset-inline-end: 0;
@@ -358,7 +359,7 @@
                 content: "\200b";
                 height: 0;
                 line-height: 0;
-                z-index: 1;
+                z-index: k-z-index("base", 1);
                 width: 150%;
                 inset-inline-start: -25%;
                 box-shadow: 0 0 $kendo-calendar-cell-size calc( #{$kendo-calendar-cell-size} / 2 ) $kendo-calendar-bg;
@@ -388,7 +389,7 @@
         display: block;
         overflow: hidden;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
 
         &::before,
         &::after {
@@ -397,7 +398,7 @@
             content: "\200b";
             height: 0;
             line-height: 0;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
             width: 200%;
             inset-inline-start: -50%;
             $shadow-size: calc( 3 * #{$kendo-calendar-navigation-item-height} );

package/scss/components/card/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../typography/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../typography/_variables.scss" as *;
 
@@ -71,7 +72,7 @@
         flex-shrink: 0;
         overflow: hidden;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
 
         .k-card-title,
         .k-card-subtitle {
@@ -242,7 +243,7 @@
             @include border-radius( $kendo-card-deck-scroll-button-radius );
             flex: 0 0 auto;
             position: absolute;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
 
             &:first-child {
                 inset-inline-start: $kendo-card-deck-scroll-button-offset;

package/scss/components/chat/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../spacing/index.import.scss" as *;
 @use "../../border-radii/index.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "../bubble/_variables.scss" as *;

package/scss/components/checkbox/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../mixins/index.import.scss" as *;
 @use "../../spacing/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -182,7 +183,7 @@
             top: 50%;
             left: 50%;
             border-radius: 100%;
-            z-index: -1;
+            z-index: k-z-index("bottom");
             transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
             transform: translate(-50%, -50%) scale(0);
             transform-origin: center center;

package/scss/components/color-preview/_layout.scss

@@ -1,5 +1,6 @@
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-color-preview--layout-base() {
 
@@ -60,7 +61,7 @@
         position: absolute;
         inset-block-start: 0;
         inset-inline-start: 0;
-        z-index: -1;
+        z-index: k-z-index("bottom");
         background: $kendo-color-preview-transparent-color-image;
         background-size: contain;
         background-position: 0 0;

package/scss/components/coloreditor/_layout.scss

@@ -2,6 +2,8 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../colorpalette/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
+
 
 @mixin kendo-color-editor--layout-base() {
 
@@ -43,7 +45,7 @@
         justify-content: center;
         gap: $kendo-color-editor-preview-gap;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
     }
 
     .k-coloreditor-preview .k-color-preview {

package/scss/components/colorgradient/_layout.scss

@@ -2,6 +2,7 @@
 @use "sass:math";
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-color-gradient--layout-base() {
@@ -55,7 +56,7 @@
             position: absolute;
             top: 50%;
             left: 50%;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
             cursor: pointer;
         }
 
@@ -113,11 +114,11 @@
             display: block;
             border-radius: 10px;
             position: relative;
-            z-index: -1;
+            z-index: k-z-index("bottom");
         }
 
         .k-slider-track-wrap {
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
         .k-slider-selection {

package/scss/components/colorpalette/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-color-palette--layout-base() {
 
@@ -43,7 +44,7 @@
         &:hover,
         &.k-hover {
             position: relative;
-            z-index: 101;
+            z-index: k-z-index("base", 2);
         }
 
         &:focus,
@@ -51,7 +52,7 @@
         &.k-selected,
         &.k-selected:hover {
             position: relative;
-            z-index: 100;
+            z-index: k-z-index("base", 1);
         }
     }
 

package/scss/components/dataviz/_layout.scss

@@ -5,6 +5,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../typography/index.import.scss" as *;
 @use "../../border-radii/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
 @use "../../functions/index.import.scss" as *;
 @use "../../_variables.scss" as *;
@@ -59,7 +60,7 @@
 
     .k-sparkline-tooltip-wrapper,
     .k-chart-tooltip-wrapper {
-        z-index: 12000;
+        z-index: k-z-index("popup");
 
         .k-popup {
             @include border-radius( k-border-radius(md) );
@@ -136,7 +137,7 @@
         height: $kendo-chart-selection-handle-size;
         border-width: 1px;
         border-style: solid;
-        z-index: 1;
+        z-index: k-z-index("handle");
         position: absolute;
         box-sizing: content-box;
     }
@@ -245,7 +246,7 @@
         inset-block-start: 0;
         inset-inline-start: 0;
         opacity: 1;
-        z-index: 10001;
+        z-index: k-z-index("overlay");
 
         &-top {
             inset-block-start: var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} );

package/scss/components/dialog/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../window/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-dialog--layout-base() {
 
@@ -15,7 +16,7 @@
         inset-inline-start: 0;
         width: 100%;
         height: 100%;
-        z-index: 10001;
+        z-index: k-z-index("overlay", 1);
 
         .k-dialog {
             position: relative;

package/scss/components/dock-manager/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../typography/index.import.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-dock-manager--layout-base() {
 
@@ -126,7 +127,7 @@
         display: flex;
         height: 100%;
         border-color: inherit;
-        z-index: 20;
+        z-index: k-z-index("floating");
 
         .k-pane {
             display: inline-flex;
@@ -155,7 +156,7 @@
         border-width: $kendo-dock-manager-dock-preview-border-width;
         border-style: $kendo-dock-manager-dock-preview-border-style;
         border-radius: $kendo-dock-manager-dock-preview-border-radius;
-        z-index: 10;
+        z-index: k-z-index("top");
     }
 
     .k-dock-manager-window:has(.k-pane) .k-window-content {
@@ -174,7 +175,7 @@
         flex-direction: column;
         align-items: center;
         position: absolute;
-        z-index: 10001;
+        z-index: k-z-index("overlay", 1);
         pointer-events: none;
     }
 
@@ -196,6 +197,7 @@
         pointer-events: all;
         outline-width: $kendo-dock-indicator-outline-width;
         outline-style: $kendo-dock-indicator-outline-style;
+        z-index: k-z-index("top", 1);
 
         &.k-dock-indicator-middle {
             filter: none;

package/scss/components/draggable/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./_variables.scss" as *;
 @use "../../_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-draggable--layout-base() {
 
@@ -24,7 +25,7 @@
         opacity: $kendo-drag-hint-opacity;
         overflow: hidden;
         position: absolute;
-        z-index: 20000;
+        z-index: k-z-index("floating");
         cursor: move;
     }
     .k-drag-status,
@@ -41,7 +42,7 @@
         justify-content: space-between;
         align-items: center;
         position: absolute;
-        z-index: 1000;
+        z-index: k-z-index("floating");
         transform: translate(-50%, -50%);
     }
 

package/scss/components/drawer/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-drawer--layout-base() {
 
@@ -78,7 +79,7 @@
         .k-drawer {
             max-width: 80vw; // limit width
             position: fixed;
-            z-index: 10002;
+            z-index: k-z-index("drawer");
             border: 0;
         }