@progress/kendo-theme-fluent 6.8.0-dev.1 → 7.0.0-dev.0

package/scss/dock-manager/_layout.scss

@@ -0,0 +1,224 @@
+@use "../core/_variables.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-dock-manager--layout() {
+
+    // DockManager
+    .k-dock-manager {
+        width: 100%;
+        height: 100%;
+        border-width: var( --kendo-dock-manager-border-width, #{$kendo-dock-manager-border-width} );
+        border-style: var( --kendo-dock-manager-border-style, #{$kendo-dock-manager-border-style} );
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: auto;
+        box-sizing: border-box;
+    }
+
+    // Toolbar
+    .k-dock-manager-toolbar {
+        border-width: 0 $kendo-dock-manager-border-width 0 0;
+        border-color: inherit;
+        flex-shrink: 0;
+        writing-mode: vertical-lr;
+
+        &::before {
+            height: 0;
+        }
+
+        .k-separator-horizontal {
+            width:  $kendo-line-height-em;
+            height: 0;
+            border-width: var( --kendo-dock-manager-border-width, #{$kendo-dock-manager-border-width} ) 0 0;
+        }
+
+        // Needed because of a bug in Chrome - Issue 1473554
+        // A fix will be shipped likely in milestone 118 and then we can revisit this
+        @supports  (not (-ms-ime-mode: none)) and (not (overflow: -webkit-marquee)) and (not (-moz-appearance:none)) {
+            .k-toolbar-button {
+                padding-block: var(--INTERNAL--kendo-button-padding-y, 0 );
+                padding-inline: var(--INTERNAL--kendo-button-padding-x, 0 );
+            }
+            .k-toolbar-button .k-button-text {
+                writing-mode: vertical-lr;
+            }
+        }
+    }
+
+    // Panes
+    .k-dock-manager-pane-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
+   // Splitter
+   .k-dock-manager-splitter,
+   .k-dock-manager-unpinned-container {
+        height: 100%;
+        border-width: 0;
+        align-items: stretch;
+
+        > .k-pane {
+            height: auto;
+            flex-direction: column;
+            border-color: inherit;
+        }
+
+        .k-pane-header {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-block: var( --kendo-dock-manager-pane-header-padding-y, #{$kendo-dock-manager-pane-header-padding-y} );
+            padding-inline: var( --kendo-dock-manager-pane-header-padding-x, #{$kendo-dock-manager-pane-header-padding-x} );
+            border-block-end-width: var( --kendo-dock-manager-pane-header-border-width, #{$kendo-dock-manager-pane-header-border-width} );
+            border-block-end-style: var( --kendo-dock-manager-pane-header-border-style, #{$kendo-dock-manager-pane-header-border-style} );
+            border-color: inherit;
+        }
+
+        .k-pane-title {
+            padding-block: var( --kendo-dock-manager-pane-title-padding-y, #{$kendo-dock-manager-pane-title-padding-y} );
+            padding-inline: var( --kendo-dock-manager-pane-title-padding-x, #{$kendo-dock-manager-pane-title-padding-x} );
+            font-family: var( --kendo-dock-manager-pane-title-font-family, #{$kendo-font-family} );
+            font-size: var( --kendo-dock-manager-pane-title-font-size, #{$kendo-dock-manager-pane-title-font-size} );
+            line-height: var( --kendo-dock-manager-pane-title-line-height, #{$kendo-dock-manager-pane-title-line-height} );
+            font-weight: var( --kendo-dock-manager-pane-title-font-weight, #{$kendo-dock-manager-pane-title-font-weight} );
+            flex: 1 1 auto;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .k-pane-scrollable {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            border-color: inherit;
+        }
+
+        .k-pane-content {
+            height: 100%;
+            padding-block: var( --kendo-dock-manager-pane-content-padding-y, #{$kendo-dock-manager-pane-content-padding-y} );
+            padding-inline: var( --kendo-dock-manager-pane-content-padding-x, #{$kendo-dock-manager-pane-content-padding-x} );
+            overflow: auto;
+            flex: 1;
+        }
+
+        .k-pane-actions {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .k-pane-tabbed {
+            padding-block: var( --kendo-dock-manager-tabbed-pane-padding-y, #{$kendo-dock-manager-tabbed-pane-padding-y} );
+            padding-inline: var( --kendo-dock-manager-tabbed-pane-padding-x, #{$kendo-dock-manager-tabbed-pane-padding-x} );
+        }
+
+        .k-splitbar {
+            border-width: 0 1px;
+            border-style: solid;
+            border-color: inherit;
+        }
+        .k-splitbar-vertical {
+            border-width: 1px 0;
+        }
+    }
+
+    // Unpinned pane
+    .k-dock-manager-unpinned-container {
+        width: var( --kendo-dock-manager-unpinned-container-width, #{$kendo-dock-manager-unpinned-container-width} );
+        position: absolute;
+        display: flex;
+        height: 100%;
+        border-color: inherit;
+        z-index: 20;
+
+        .k-pane {
+            display: inline-flex;
+            flex-direction: column;
+            position: relative;
+            flex: 1 1 auto;
+        }
+
+        .k-splitbar {
+            height: 100%;
+            position: relative;
+            flex: none;
+        }
+    }
+
+    // Docking preview
+    .k-docking-preview {
+        display: flex;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        border-width: var( --kendo-dock-manager-dock-preview-border-width, #{$kendo-dock-manager-dock-preview-border-width} );
+        border-style: var( --kendo-dock-manager-dock-preview-border-style, #{$kendo-dock-manager-dock-preview-border-style} );
+        border-radius: var( --kendo-dock-manager-dock-preview-border-radius, #{$kendo-dock-manager-dock-preview-border-radius} );
+    }
+
+}
+
+@mixin  kendo-dock-indicator--layout() {
+
+    // DockNavigator
+    .k-dock-navigator-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+        z-index: 10001;
+        pointer-events: none;
+    }
+
+    .k-dock-navigator {
+        display: grid;
+        grid-template-columns: repeat(3, auto);
+        grid-template-rows: repeat(3, auto);
+        justify-content: center;
+        position: absolute;
+    }
+
+    .k-dock-indicator {
+        padding: var( --kendo-dock-indicator-padding, #{$kendo-dock-indicator-padding} );
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        position: relative;
+        pointer-events: all;
+        outline-width: var( --kendo-dock-indicator-outline-width, #{$kendo-dock-indicator-outline-width} );
+        outline-style: var( --kendo-dock-indicator-outline-style, #{$kendo-dock-indicator-outline-style} );
+
+        &.k-dock-indicator-middle {
+            box-shadow: none;
+        }
+    }
+
+    .k-dock-indicator-top {
+        grid-area: 1 / 2 / auto;
+    }
+    .k-dock-indicator-right {
+        grid-area: 2 / 3 / auto;
+    }
+    .k-dock-indicator-bottom {
+        grid-area: 3 / 2 / auto;
+    }
+    .k-dock-indicator-left {
+        grid-area: 2 / 1 / auto;
+    }
+    .k-dock-indicator-middle {
+        grid-area: 2 / 2 / auto;
+    }
+
+}

package/scss/dock-manager/_theme.scss

@@ -0,0 +1,47 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-dock-manager--theme() {
+
+      // DockManager
+      .k-dock-manager {
+        border-color: var( --kendo-dock-manager-border, #{$kendo-dock-manager-border} );
+    }
+
+    .k-dock-manager-splitter .k-pane-header,
+    .k-dock-manager-unpinned-container .k-pane-header {
+        background-color: var( --kendo-dock-manager-pane-header-bg, #{$kendo-dock-manager-pane-header-bg} );
+
+        > .k-pane-title {
+            color: var( --kendo-dock-manager-pane-header-text, #{$kendo-dock-manager-pane-header-text} );
+        }
+    }
+
+    .k-dock-manager-unpinned-container {
+        background-color: var( --kendo-dock-manager-unpinned-container-bg, #{$kendo-dock-manager-unpinned-container-bg} );
+        box-shadow:  $kendo-dock-manager-unpinned-container-shadow;
+    }
+
+    // Docking preview
+    .k-docking-preview {
+        background-color: var( --kendo-dock-manager-dock-preview-bg, #{$kendo-dock-manager-dock-preview-bg} );
+        border-color: var( --kendo-dock-manager-dock-preview-border, #{$kendo-dock-manager-dock-preview-border} );
+    }
+
+}
+
+@mixin kendo-dock-indicator--theme() {
+
+    .k-dock-indicator {
+        background-color: var( --kendo-dock-indicator-bg, #{$kendo-dock-indicator-bg} );
+        color: var( --kendo-dock-indicator-text, #{$kendo-dock-indicator-text} );
+        outline-color: var( --kendo-dock-indicator-outline, #{$kendo-dock-indicator-outline} );
+        box-shadow: var( --kendo-dock-indicator-shadow, #{$kendo-dock-indicator-shadow} );
+
+        &:hover,
+        &.k-hover {
+            background-color: var( --kendo-dock-indicator-hover-bg, #{$kendo-dock-indicator-hover-bg} );
+            color: var( --kendo-dock-indicator-hover-text, #{$kendo-dock-indicator-hover-text} );
+        }
+    }
+
+}

package/scss/dock-manager/_variables.scss

@@ -0,0 +1,119 @@
+@use "sass:map";
+@use "../core/" as *;
+
+///  The width of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border-width: 1px !default;
+/// The style of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border-style: solid !default;
+/// The color of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border: var( --kendo-component-border, inherit ) !default;
+
+/// The vertical padding of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-padding-y: map.get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-padding-x: map.get( $kendo-spacing, 6 ) !default;
+/// The width of the border around the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
+///  The style of the border around the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-border-style: solid !default;
+/// The background color of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-bg: var( --kendo-component-bg, inherit ) !default;
+/// The text color of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-text: k-get-theme-color-var( primary-100 ) !default;
+
+/// The vertical padding of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-padding-y: null !default;
+/// The horizontal padding of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-padding-x: null !default;
+/// The font family of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height, normal ) !default;
+/// The font weight of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight, normal ) !default;
+
+/// The horizontal padding of the pane content in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-content-padding-x: map.get( $kendo-spacing, 3 ) !default;
+/// The vertical padding of the pane content in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-content-padding-y: map.get( $kendo-spacing, 3 ) !default;
+
+/// The horizontal padding of the tabbed pane in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-tabbed-pane-padding-y: null !default;
+/// The horizontal padding of the tabbed pane in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-tabbed-pane-padding-x: null !default;
+
+/// The width of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-width: 300px !default;
+/// The background-color of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-bg: $kendo-color-white !default;
+/// The box shadow of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-shadow: 25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18) !default;
+
+/// The padding of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-padding: map.get( $kendo-spacing, 1.5 ) !default;
+/// The background color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-bg: $kendo-component-bg !default;
+/// The text color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-text: k-get-theme-color-var( primary-100 ) !default;
+/// The outline width of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline-width: 1px !default;
+/// The outline style of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline-style: solid !default;
+/// The outline color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
+/// The box shadow of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20) !default;
+
+///  The background color of the hovered dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-hover-bg: k-get-theme-color-var( primary-110 ) !default;
+/// The text color of the hovered dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-hover-text: $kendo-color-white !default;
+
+/// The width of the border around the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-width: 1px !default;
+/// The style of the border around the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-style: dashed !default;
+/// The border radius of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-radius: var( --kendo-border-radius-md, 0) !default;
+/// The background color of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent) !default;
+/// The border color of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border: k-get-theme-color-var( primary-100 ) !default;

package/scss/fab/_layout.scss

@@ -10,7 +10,6 @@
         border-style: solid;
         border-color: transparent;
         box-sizing: border-box;
-        position: relative;
         color: inherit;
         background-color: transparent;
         font-family: var( --kendo-fab-font-family, #{$kendo-fab-font-family} );

package/scss/grid/_variables.scss

@@ -454,7 +454,7 @@ $kendo-grid-column-menu-max-width: 320px !default;
 $kendo-grid-column-menu-spacing: map.get( $kendo-spacing, 2 ) !default;
 /// Focus shadow of the grid column menu.
 /// @group grid
-$kendo-grid-column-menu-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-grid-column-menu-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
 /// Background color of the grid column menu.
 /// @group grid
 $kendo-grid-column-menu-bg: var( --kendo-component-bg, inherit ) !default;

package/scss/index.scss

@@ -118,6 +118,7 @@
 @forward "./panelbar";
 @forward "./splitter";
 @forward "./tilelayout";
+@forward "./dock-manager";
 
 
 // Editors
@@ -279,6 +280,7 @@
 @use "./panelbar" as *;
 @use "./splitter" as *;
 @use "./tilelayout" as *;
+@use "./dock-manager" as *;
 
 
 // Data management
@@ -336,6 +338,10 @@
     // Color system css variables
     @include color-system-styles();
 
+    // Elevation
+    @include kendo-elevation--styles();
+    @include elevation--styles-legacy();
+
     // Typography and utils
     @include typography-styles();
     @include utils-styles();
@@ -452,7 +458,7 @@
     @include panelbar-styles();
     @include splitter-styles();
     @include tilelayout-styles();
-
+    @include dock-manager-styles();
 
     // Data management
     @include grid-styles();

package/scss/listview/_layout.scss

@@ -47,7 +47,7 @@
         grid-gap: var( --kendo-listview-grid-gap, #{$kendo-listview-grid-gap} );
     }
     .k-listview-content-padding-rectangle {
-        padding-inline: var( --$kendo-listview-padding-x, #{$kendo-listview-padding-x} );
+        padding-inline: var( --kendo-listview-padding-x, #{$kendo-listview-padding-x} );
         padding-block: var( --kendo-listview-padding-y, #{$kendo-listview-padding-y} );
     }
     .k-listview-content-padding-square {

package/scss/menu/_variables.scss

@@ -125,7 +125,7 @@ $kendo-menu-popup-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-menu-popup-border: initial !default;
 /// The shadow of the menu popup.
 /// @group menu
-$kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
 
 /// Horizontal padding of the menu item in popup.
 /// @group menu

package/scss/pdf-viewer/_layout.scss

@@ -34,36 +34,33 @@
             background: none;
             overflow: visible;
         }
+    }
 
+    // Canvas
+    .k-pdf-viewer-canvas {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        outline: none;
 
-        // Canvas
-        .k-canvas {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-            outline: none;
-
-            .k-enable-text-select,
-            &.k-enable-text-select {
-                user-select: text;
-                cursor: text;
-            }
+        &.k-enable-text-select {
+            user-select: text;
+            cursor: text;
+        }
 
-            .k-enable-panning,
-            &.k-enable-panning {
-                cursor: grab;
-            }
-            .k-enable-panning span::selection,
-            &.k-enable-panning span::selection {
+        &.k-enable-panning {
+            cursor: grab;
+
+            span::selection {
                 background-color: transparent;
             }
         }
+    }
 
 
-        // Pages
-        .k-pdf-viewer-pages {
-            flex: 1 1 auto;
-        }
+    // Pages
+    .k-pdf-viewer-pages {
+        flex: 1 1 auto;
 
         .k-page {
             position: relative;
@@ -88,10 +85,6 @@
                     color: transparent;
                 }
 
-                mark {
-                    color: transparent;
-                }
-
                 .k-search-highlight-mark {
                     color: transparent;
                 }
@@ -115,23 +108,26 @@
                 background: none;
             }
         }
-
     }
 
-    // Search
-    .k-pdf-viewer-search-dialog {
-        padding: 0 !important; // stylelint-disable-line declaration-no-important
-    }
 
-    .k-search-panel {
-        padding-block: var( --kendo-pdf-viewer-search-dialog-padding-y, #{$kendo-pdf-viewer-search-dialog-padding-y} );
-        padding-inline: var( --kendo-pdf-viewer-search-dialog-padding-x, #{$kendo-pdf-viewer-search-dialog-padding-x} );
+    // Search
+    .k-pdf-viewer-canvas > .k-search-panel {
+        width: max-content;
+        margin-block-start: var( --kendo-pdf-viewer-search-panel-margin-y, #{$kendo-pdf-viewer-search-panel-margin-y} );
+        padding-block: var( --kendo-pdf-viewer-search-panel-padding-y, #{$kendo-pdf-viewer-search-panel-padding-y} );
+        padding-inline: var( --kendo-pdf-viewer-search-panel-padding-x, #{$kendo-pdf-viewer-search-panel-padding-x} );
+        border-width: var( --kendo-pdf-viewer-search-panel-border-width, #{$kendo-pdf-viewer-search-panel-border-width} );
+        border-style: solid;
+        border-radius: var( --kendo-pdf-viewer-search-panel-border-radius, #{$kendo-pdf-viewer-search-panel-border-radius} );
         display: flex;
-        gap: var( --kendo-pdf-viewer-search-dialog-spacing, #{$kendo-pdf-viewer-search-dialog-spacing} );
+        gap: var( --kendo-pdf-viewer-search-panel-spacing, #{$kendo-pdf-viewer-search-panel-spacing} );
         flex-flow: row nowrap;
         flex: 0 0 auto;
         justify-content: flex-start;
         align-items: center;
+        z-index: 10;
+        cursor: default;
 
         .k-search-dialog-draghandle {
             cursor: move;
@@ -153,19 +149,4 @@
         }
     }
 
-    .k-pdf-viewer-canvas > .k-search-panel {
-        width: max-content;
-        margin-block-start: var( --kendo-pdf-viewer-search-panel-margin-y, #{$kendo-pdf-viewer-search-panel-margin-y} );
-        border-width: var( --kendo-pdf-viewer-search-panel-border-width, #{$kendo-pdf-viewer-search-panel-border-width} );
-        border-style: solid;
-        border-radius: var( --kendo-pdf-viewer-search-panel-border-radius, #{$kendo-pdf-viewer-search-panel-border-radius} );
-        z-index: 10;
-        cursor: default;
-    }
-
-    // Alias
-    .k-search-container {
-        @extend .k-search-panel !optional;
-    }
-
 }

package/scss/pdf-viewer/_theme.scss

@@ -67,8 +67,4 @@
         );
     }
 
-    .k-search-container {
-        @extend .k-search-panel !optional;
-    }
-
 }

package/scss/pdf-viewer/_variables.scss

@@ -49,18 +49,17 @@ $kendo-pdf-viewer-page-text: var( --kendo-component-text, inherit )!default;
 $kendo-pdf-viewer-page-border: var( --kendo-component-border, inherit ) !default;
 /// Shadow of the PDF viewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
-/// Horizontal padding of the PDF viewer search dialog.
+/// Horizontal padding of the PDF viewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-dialog-padding-x: map.get( $kendo-spacing, 3 ) !default;
-/// Vertical padding of the PDF viewer search dialog.
+$kendo-pdf-viewer-search-panel-padding-x: map.get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the PDF viewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-dialog-padding-y: $kendo-pdf-viewer-search-dialog-padding-x !default;
-/// Spacing of the PDF viewer search dialog.
+$kendo-pdf-viewer-search-panel-padding-y: $kendo-pdf-viewer-search-panel-padding-x !default;
+/// Spacing of the PDF viewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-dialog-spacing: map.get( $kendo-spacing, 2 ) !default;
-
+$kendo-pdf-viewer-search-panel-spacing: map.get( $kendo-spacing, 2 ) !default;
 /// Border width of the PDF viewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
@@ -84,7 +83,7 @@ $kendo-pdf-viewer-search-panel-shadow: none !default;
 $kendo-pdf-viewer-search-panel-matches-spacing: var( --kendo-icon-spacing, .5rem ) !default;
 /// Vertical margin of the PDF viewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-margin-y: calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-dialog-padding-y} ) ) * -1 ) !default;
+$kendo-pdf-viewer-search-panel-margin-y: calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} ) ) * -1 ) !default;
 
 /// Line height of the PDF viewer selection.
 /// @group pdf-viewer

package/scss/popover/_variables.scss

@@ -33,7 +33,7 @@ $kendo-popover-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-popover-border: var( --kendo-component-border, initial ) !default;
 /// The box shadow of the Popover.
 /// @group popover
-$kendo-popover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-popover-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
 
 /// The horizontal padding of the Popover header.
 /// @group popover
@@ -88,4 +88,4 @@ $kendo-popover-callout-height: $kendo-popover-callout-width !default;
 $kendo-popover-callout-border-width: $kendo-popover-border-width !default;
 /// The border style of the Popover callout.
 /// @group popover
-$kendo-popover-callout-border-style: $kendo-popover-border-style !default;
+$kendo-popover-callout-border-style: $kendo-popover-border-style !default;

package/scss/popup/_variables.scss

@@ -39,4 +39,4 @@ $kendo-popup-text: var( --kendo-component-text, initial ) !default;
 $kendo-popup-border: var( --kendo-component-border, initial ) !default;
 /// Box shadow around the popup.
 /// @group popup
-$kendo-popup-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-popup-shadow: var( --kendo-box-shadow-depth-4, none ) !default;