@progress/kendo-theme-core 13.2.0-dev.4 → 14.0.0-dev.0

package/scss/components/file-box/_layout.scss

@@ -83,6 +83,7 @@
             display: flex;
             flex-direction: column;
             align-items: flex-start;
+            gap: $kendo-file-box-info-gap;
             text-align: start;
             flex: 1;
             overflow: hidden;

package/scss/components/file-box/_theme.scss

@@ -10,6 +10,10 @@
         background-color: $kendo-file-box-bg;
         color: $kendo-file-box-text;
         border-color: $kendo-file-box-border;
+
+        .k-file-size {
+            color: $kendo-file-box-size-text;
+        }
     }
 
     .k-file-box-wrapper-scrollable-start::after {

package/scss/components/file-box/_variables.scss

@@ -1,6 +1,7 @@
 $kendo-file-box-padding-x: null !default;
 $kendo-file-box-padding-y: null !default;
 $kendo-file-box-gap: null !default;
+$kendo-file-box-info-gap: null !default;
 $kendo-file-box-min-width: null !default;
 $kendo-file-box-max-width: null !default;
 $kendo-file-box-border-width: null !default;
@@ -15,5 +16,7 @@ $kendo-file-box-bg: null !default;
 $kendo-file-box-text: null !default;
 $kendo-file-box-border: null !default;
 
+$kendo-file-box-size-text: null !default;
+
 $kendo-file-box-wrapper-scroll-gradient: null !default;
 

package/scss/components/filemanager/_layout.scss

@@ -7,6 +7,7 @@
     // File Manager
     .k-filemanager {
         border-width: $kendo-file-manager-border-width;
+        border-radius: $kendo-file-manager-border-radius;
         border-style: solid;
         box-sizing: border-box;
         font-family: $kendo-file-manager-font-family;
@@ -14,6 +15,7 @@
         line-height: $kendo-file-manager-line-height;
         display: flex;
         flex-flow: column nowrap;
+        overflow: hidden;
     }
 
 
@@ -129,6 +131,7 @@
 
     // Filemanager grid
     .k-filemanager-grid {
+        border-radius: 0;
         border-width: 0;
         flex: 1 1 0%;
 

package/scss/components/filemanager/_variables.scss

@@ -2,6 +2,7 @@
 
 $kendo-file-manager-spacer: null !default;
 $kendo-file-manager-border-width: null !default;
+$kendo-file-manager-border-radius: null !default;
 $kendo-file-manager-font-family: null !default;
 $kendo-file-manager-font-size: null !default;
 $kendo-file-manager-line-height: null !default;

package/scss/components/filter/_theme.scss

@@ -7,6 +7,10 @@
     .k-filter {
         color: k-color(on-app-surface);
 
+        .k-filter-toolbar .k-toolbar {
+            border-radius: $kendo-filter-border-radius;
+        }
+
         .k-filter-preview-field {
             color: $kendo-filter-preview-field-text;
         }

package/scss/components/filter/_variables.scss

@@ -3,6 +3,8 @@
 $kendo-filter-padding-x: null !default;
 $kendo-filter-padding-y: null !default;
 
+$kendo-filter-border-radius: null !default;
+
 $kendo-filter-bottom-margin: null !default;
 $kendo-filter-line-size: null !default;
 

package/scss/components/forms/_layout.scss

@@ -40,6 +40,7 @@
         margin-left: $kendo-label-optional-margin-x;
         font-size: $kendo-label-optional-font-size;
         font-style: $kendo-label-optional-font-style;
+        font-weight: $kendo-label-optional-font-weight;
         align-self: center;
     }
 
@@ -62,6 +63,9 @@
             margin-block-end: $kendo-form-label-margin-bottom;
             display: flex;
             flex-flow: row nowrap;
+            font-size: $kendo-label-font-size;
+            font-weight: $kendo-label-font-weight;
+            line-height: $kendo-label-line-height;
         }
 
         .k-label + .k-radio {
@@ -81,6 +85,7 @@
             border-style: $kendo-form-legend-border-style;
             width: $kendo-form-legend-width;
             font-size: $kendo-form-legend-font-size;
+            font-weight: $kendo-form-legend-font-weight;
             text-transform: $kendo-form-legend-text-transform;
         }
 

package/scss/components/forms/_variables.scss

@@ -17,10 +17,15 @@ $kendo-form-legend-border-style: null !default;
 $kendo-form-legend-border-color: null !default;
 $kendo-form-legend-width: null !default;
 $kendo-form-legend-font-size: null !default;
+$kendo-form-legend-font-weight: null !default;
 $kendo-form-legend-text-transform: null !default;
 
 $kendo-form-label-margin-bottom: null !default;
 
+$kendo-label-font-size: null !default;
+$kendo-label-font-weight: null !default;
+$kendo-label-line-height: null !default;
+
 $kendo-form-hint-font-size: null !default;
 $kendo-form-hint-font-style: null !default;
 $kendo-form-hint-margin-top: null !default;
@@ -48,6 +53,7 @@ $kendo-inline-form-field-padding-y: null !default;
 $kendo-label-optional-margin-x: null !default;
 $kendo-label-optional-font-size: null !default;
 $kendo-label-optional-font-style: null !default;
+$kendo-label-optional-font-weight: null !default;
 
 
 $kendo-fieldset-margin: null !default;

package/scss/components/gantt/_layout.scss

@@ -17,6 +17,7 @@
 
     .k-gantt {
         border-width: $kendo-gantt-border-width;
+        border-radius: $kendo-gantt-border-radius;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -26,6 +27,7 @@
         display: flex;
         flex-flow: column nowrap;
         position: relative;
+        overflow: hidden;
         white-space: nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
@@ -64,6 +66,10 @@
             display: inline-block;
         }
 
+        // Grid
+        .k-grid {
+            border-radius: 0;
+        }
 
         // Splitbar
         .k-splitbar {

package/scss/components/gantt/_variables.scss

@@ -1,6 +1,7 @@
 // Gantt
 
 $kendo-gantt-border-width: null !default;
+$kendo-gantt-border-radius: null !default;
 $kendo-gantt-font-family: null !default;
 $kendo-gantt-font-size: null !default;
 $kendo-gantt-line-height: null !default;

package/scss/components/grid/_layout.scss

@@ -25,6 +25,7 @@
     .k-grid {
         border-width: $kendo-grid-border-width;
         border-style: solid;
+        border-radius: $kendo-grid-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-grid-font-family;
@@ -33,6 +34,7 @@
         display: flex;
         flex-direction: column;
         position: relative;
+        overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -83,6 +85,7 @@
         .k-table-tfoot {
             text-align: start;
             border-color: inherit;
+            color: inherit;
         }
 
         .k-table-row {
@@ -430,8 +433,10 @@
     // Toolbar
     .k-grid-toolbar {
         border-width: 0 0 $kendo-grid-toolbar-border-width;
+        border-radius: 0;;
         flex-shrink: 0;
     }
+
     .k-grid-toolbar-bottom {
         border-width: $kendo-grid-toolbar-border-width 0 0;
     }
@@ -786,12 +791,16 @@
 
     // Pager
     .k-grid-pager {
+        font-size: inherit;
         border-width: 1px 0 0;
         border-color: inherit;
-        font-size: inherit;
+        @include border-bottom-radius(inherit);
     }
+
     .k-grid-pager-top {
         border-width: 0 0 1px;
+        @include border-top-radius(inherit);
+        @include border-bottom-radius(0);
     }
 
     .k-grid-virtual .k-grid-content {
@@ -1494,6 +1503,7 @@
 
         .k-expander {
             border: 0;
+            border-radius: 0;
             background: inherit;
 
             .k-columnmenu-item {

package/scss/components/grid/_theme.scss

@@ -18,6 +18,7 @@
 
         .k-table {
             background-color: inherit;
+            color: inherit;
         }
 
         .k-table-th,
@@ -92,7 +93,7 @@
             }
 
             .k-grid-content-sticky {
-                border-color: $kendo-grid-sticky-border;
+                border-inline-color: $kendo-grid-sticky-border;
                 border-block-start-color: $kendo-grid-header-border;
             }
 
@@ -118,7 +119,7 @@
         .k-master-row {
             .k-grid-content-sticky {
                 background-color: $kendo-grid-sticky-bg;
-                border-color: $kendo-grid-sticky-border;
+                border-inline-color: $kendo-grid-sticky-border;
                 border-block-start-color: $kendo-grid-header-border;
             }
 
@@ -280,14 +281,22 @@
         @include fill($bg: $kendo-grid-bg );
     }
 
-    // Grouping
-    .k-grouping-header,
     .k-grid-add-row {
         color: $kendo-grid-header-text;
         background-color: $kendo-grid-header-bg;
         border-color: $kendo-grid-header-border;
     }
 
+    // Grouping
+    .k-grouping-header,
+    .k-grid-grouping-header {
+        @include fill(
+            $kendo-grid-grouping-header-text,
+            $kendo-grid-grouping-header-bg,
+            $kendo-grid-grouping-header-border
+        );
+    }
+
     .k-group-footer .k-table-td,
     .k-table-tbody .k-group-cell {
         @include fill(

package/scss/components/grid/_variables.scss

@@ -4,6 +4,7 @@
 $kendo-grid-default-size: null !default;
 
 $kendo-grid-border-width: null !default;
+$kendo-grid-border-radius: null !default;
 $kendo-grid-font-family: null !default;
 $kendo-grid-font-size: null !default;
 $kendo-grid-line-height: null !default;
@@ -17,6 +18,10 @@ $kendo-grid-header-padding-y: null !default;
 $kendo-grid-grouping-header-padding-x: null !default;
 $kendo-grid-grouping-header-padding-y: null !default;
 
+$kendo-grid-grouping-header-bg: null !default;
+$kendo-grid-grouping-header-text: null !default;
+$kendo-grid-grouping-header-border: null !default;
+
 $kendo-grid-cell-padding-x: null !default;
 $kendo-grid-cell-padding-y: null !default;
 

package/scss/components/imageeditor/_layout.scss

@@ -13,6 +13,7 @@
         padding-inline: $kendo-image-editor-padding-x;
         border-width: $kendo-image-editor-border-width;
         border-style: solid;
+        border-radius: $kendo-image-editor-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-image-editor-font-family;

package/scss/components/imageeditor/_variables.scss

@@ -5,6 +5,7 @@ $kendo-image-editor-padding-y: null !default;
 $kendo-image-editor-padding-x: null !default;
 
 $kendo-image-editor-border-width: null !default;
+$kendo-image-editor-border-radius: null !default;
 $kendo-image-editor-font-size: null !default;
 $kendo-image-editor-line-height: null !default;
 $kendo-image-editor-font-family: null !default;

package/scss/components/listbox/_layout.scss

@@ -54,6 +54,9 @@
             min-width: 0;
             min-height: 0;
             height: inherit;
+            padding-inline: $kendo-listbox-scroller-padding-x;
+            padding-block: $kendo-listbox-scroller-padding-y;
+            border-radius: $kendo-listbox-border-radius;
             border-width: $kendo-listbox-border-width;
             border-style: solid;
             box-sizing: border-box;

package/scss/components/listbox/_variables.scss

@@ -14,3 +14,7 @@ $kendo-listbox-bg: null !default;
 $kendo-listbox-border: null !default;
 
 $kendo-listbox-drop-hint-width: null !default;
+
+$kendo-listbox-scroller-padding-x: null !default;
+$kendo-listbox-scroller-padding-y: null !default;
+$kendo-listbox-border-radius: null !default;

package/scss/components/listview/_layout.scss

@@ -70,6 +70,7 @@
         border-width: 0;
         outline: 0;
         border-style: solid;
+        border-radius: $kendo-listview-item-border-radius;
         box-sizing: border-box;
         flex-shrink: 0;
         transition: color k-transition(snappy), border-color k-transition(snappy), background-color k-transition(snappy);

package/scss/components/listview/_variables.scss

@@ -22,3 +22,5 @@ $kendo-listview-item-focus-text: null !default;
 $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 $kendo-listview-item-focus-shadow: null !default;
+
+$kendo-listview-item-border-radius: null !default;

package/scss/components/mediaplayer/_layout.scss

@@ -9,6 +9,7 @@
     .k-mediaplayer {
         border-width: $kendo-media-player-border-width;
         border-style: solid;
+        border-radius: $kendo-media-player-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-media-player-font-family;
@@ -38,6 +39,9 @@
     .k-mediaplayer-titlebar {
         padding-block: $kendo-media-player-titlebar-padding-y;
         padding-inline: $kendo-media-player-titlebar-padding-x;
+        font-size: $kendo-media-player-titlebar-font-size;
+        font-weight: $kendo-media-player-titlebar-font-weight;
+        line-height: $kendo-media-player-titlebar-line-height;
         position: absolute;
         z-index: k-z-index("base", 2);
         inset-block-start: 0;

package/scss/components/mediaplayer/_variables.scss

@@ -1,6 +1,7 @@
 // Media player
 
 $kendo-media-player-border-width: null !default;
+$kendo-media-player-border-radius: null !default;
 $kendo-media-player-font-family: null !default;
 $kendo-media-player-font-size: null !default;
 $kendo-media-player-line-height: null !default;
@@ -11,5 +12,8 @@ $kendo-media-player-border: null !default;
 
 $kendo-media-player-titlebar-padding-x: null !default;
 $kendo-media-player-titlebar-padding-y: null !default;
+$kendo-media-player-titlebar-font-size: null !default;
+$kendo-media-player-titlebar-font-weight: null !default;
+$kendo-media-player-titlebar-line-height: null !default;
 $kendo-media-player-titlebar-text: null !default;
 $kendo-media-player-titlebar-gradient: null !default;

package/scss/components/messagebox/_layout.scss

@@ -9,7 +9,9 @@
         padding-inline: $kendo-message-box-padding-x;
         border-width: $kendo-message-box-border-width;
         border-style: solid;
+        border-radius: $kendo-message-box-border-radius;
         box-sizing: border-box;
+        overflow: clip;
         font-size: $kendo-message-box-font-size;
         line-height: $kendo-message-box-line-height;
 

package/scss/components/messagebox/_variables.scss

@@ -6,6 +6,7 @@ $kendo-message-box-margin: null !default;
 $kendo-message-box-padding-x: null !default;
 $kendo-message-box-padding-y: null !default;
 $kendo-message-box-border-width: null !default;
+$kendo-message-box-border-radius: null !default;
 
 $kendo-message-box-font-size: null !default;
 $kendo-message-box-line-height: null !default;

package/scss/components/pdf-viewer/_layout.scss

@@ -8,6 +8,7 @@
     // PDF Viewer
     .k-pdf-viewer {
         border-width: $kendo-pdf-viewer-border-width;
+        border-radius: $kendo-pdf-viewer-border-radius;
         border-style: solid;
         box-sizing: border-box;
         position: relative;

package/scss/components/pdf-viewer/_variables.scss

@@ -1,6 +1,7 @@
 // PDFViewer
 
 $kendo-pdf-viewer-border-width: null !default;
+$kendo-pdf-viewer-border-radius: null !default;
 $kendo-pdf-viewer-font-family: null !default;
 $kendo-pdf-viewer-font-size: null !default;
 $kendo-pdf-viewer-line-height: null !default;

package/scss/components/pivotgrid/_layout.scss

@@ -12,6 +12,7 @@
         padding-inline: $kendo-pivotgrid-padding-x;
         border-width: $kendo-pivotgrid-border-width;
         border-style: solid;
+        border-radius: $kendo-pivotgrid-border-radius;
         box-sizing: content-box;
         font-size: $kendo-pivotgrid-font-size;
         font-family: $kendo-pivotgrid-font-family;
@@ -22,6 +23,7 @@
         grid-template-columns: $kendo-pivotgrid-row-header-width auto;
         grid-template-rows: $kendo-pivotgrid-column-header-height auto;
         position: relative;
+        overflow: hidden;
 
         table {
             margin: 0;
@@ -170,6 +172,7 @@
     // Pivotgrid configurator
     .k-pivotgrid-configurator {
         display: flex;
+        border-radius: $kendo-pivotgrid-border-radius;
     }
 
     .k-pivotgrid-configurator-panel {
@@ -182,6 +185,7 @@
         flex-direction: column;
         overflow: hidden;
         z-index: k-z-index("base", 2);
+        border-radius: inherit;
     }
 
     // Configurator Button
@@ -190,6 +194,7 @@
         padding-inline: $kendo-pivotgrid-configurator-button-padding-x;
         border-width: $kendo-pivotgrid-configurator-button-border-width;
         border-style: solid;
+        border-radius: $kendo-pivotgrid-border-radius;
         box-sizing: border-box;
         cursor: pointer;
         user-select: none;
@@ -228,6 +233,7 @@
         padding-inline: $kendo-pivotgrid-configurator-content-padding-x;
         flex: 1 1 auto;
         overflow: auto;
+        border-radius: inherit;
 
         .k-form {
             .k-label {
@@ -470,9 +476,11 @@
     // Legacy pivotgrid
     // TODO: remove
     .k-pivot {
+        border-radius: $kendo-pivotgrid-border-radius;
         border-width: $kendo-pivotgrid-border-width;
         border-style: solid;
         position: relative;
+        overflow: hidden;
 
         .k-grid td {
             white-space: nowrap;

package/scss/components/pivotgrid/_variables.scss

@@ -6,6 +6,7 @@ $kendo-pivotgrid-font-family: null !default;
 $kendo-pivotgrid-font-size: null !default;
 $kendo-pivotgrid-line-height: null !default;
 $kendo-pivotgrid-border-width: null !default;
+$kendo-pivotgrid-border-radius: null !default;
 $kendo-pivotgrid-icon-spacing: null !default;
 
 $kendo-pivotgrid-row-header-width: null !default;

package/scss/components/progressbar/_layout.scss

@@ -56,6 +56,7 @@
             grid-row: 1 / -1;
         }
         .k-progressbar-chunk {
+            border-radius: $kendo-progressbar-chunk-border-radius;
             display: block;
             border-width: 0;
             flex: 1;

package/scss/components/progressbar/_variables.scss

@@ -22,6 +22,9 @@ $kendo-progressbar-indeterminate-bg: null !default;
 $kendo-progressbar-indeterminate-text: null !default;
 $kendo-progressbar-indeterminate-border: null !default;
 
+// Chunk Progressbar
+$kendo-progressbar-chunk-border-radius: null !default;
+
 // Circular Progressbar
 $kendo-circular-progressbar-arc-stroke: null !default;
 $kendo-circular-progressbar-scale-stroke: null !default;

package/scss/components/prompt/_theme.scss

@@ -37,4 +37,12 @@
         @include box-shadow( $kendo-prompt-suggestion-shadow );
     }
 
+    .k-prompt-footer {
+        @include fill(
+            $kendo-prompt-footer-text,
+            $kendo-prompt-footer-bg,
+            $kendo-prompt-footer-border
+        );
+    }
+
 }

package/scss/components/prompt/_variables.scss

@@ -24,3 +24,7 @@ $kendo-prompt-suggestion-text: null !default;
 $kendo-prompt-suggestion-bg: null !default;
 $kendo-prompt-suggestion-border: null !default;
 $kendo-prompt-suggestion-shadow: null !default;
+
+$kendo-prompt-footer-text: null !default;
+$kendo-prompt-footer-bg: null !default;
+$kendo-prompt-footer-border: null !default;

package/scss/components/scheduler/_layout.scss

@@ -13,6 +13,7 @@
     // Layout
     .k-scheduler {
         border-width: $kendo-scheduler-border-width;
+        border-radius: $kendo-scheduler-border-radius;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -22,6 +23,7 @@
         display: flex;
         flex-direction: column;
         position: relative;
+        overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 

package/scss/components/scheduler/_variables.scss

@@ -1,6 +1,7 @@
 // Scheduler
 
 $kendo-scheduler-border-width: null !default;
+$kendo-scheduler-border-radius: null !default;
 $kendo-scheduler-font-family: null !default;
 $kendo-scheduler-font-size: null !default;
 $kendo-scheduler-line-height: null !default;

package/scss/components/scrollview/_layout.scss

@@ -7,6 +7,7 @@
     .k-scrollview {
         border-width: $kendo-scrollview-border-width;
         border-style: solid;
+        border-radius: $kendo-scrollview-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-scrollview-font-family;

package/scss/components/scrollview/_theme.scss

@@ -74,6 +74,16 @@
         &.k-primary {
             background: $kendo-scrollview-pagebutton-primary-bg;
             border: $kendo-scrollview-pagebutton-primary-border;
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-scrollview-pagebutton-primary-shadow );
+            }
+
+            &:hover,
+            &.k-hover {
+                box-shadow: $kendo-scrollview-pagebutton-primary-shadow;
+            }
         }
 
         &:focus,

package/scss/components/scrollview/_variables.scss

@@ -1,6 +1,7 @@
 // ScrollView
 
 $kendo-scrollview-border-width: null !default;
+$kendo-scrollview-border-radius: null !default;
 $kendo-scrollview-font-family: null !default;
 $kendo-scrollview-font-size: null !default;
 $kendo-scrollview-line-height: null !default;
@@ -15,6 +16,7 @@ $kendo-scrollview-pagebutton-border: null !default;
 $kendo-scrollview-pagebutton-primary-bg: null !default;
 $kendo-scrollview-pagebutton-primary-border: null !default;
 $kendo-scrollview-pagebutton-shadow: null !default;
+$kendo-scrollview-pagebutton-primary-shadow: null !default;
 
 $kendo-scrollview-pager-offset: null !default;
 $kendo-scrollview-pager-item-spacing: null !default;

package/scss/components/spreadsheet/_layout.scss

@@ -18,6 +18,7 @@
         height: 600px;
         border-width: $kendo-spreadsheet-border-width;
         border-style: solid;
+        border-radius: $kendo-spreadsheet-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-spreadsheet-font-family;
@@ -42,6 +43,11 @@
         }
     }
 
+    // Header
+    .k-spreadsheet-header {
+        @include border-top-radius(inherit);
+    }
+
     // Toolbar
     .k-spreadsheet-toolbar {
         border-block-start-width: 0;
@@ -168,6 +174,7 @@
         border-width: $kendo-spreadsheet-sheets-bar-border-width 0 0;
         border-style: solid;
         border-color: inherit;
+        @include border-bottom-radius(inherit);
         display: flex;
         flex-direction: row;
         align-items: center;

package/scss/components/spreadsheet/_variables.scss

@@ -1,6 +1,7 @@
 // Spreadsheet
 
 $kendo-spreadsheet-border-width: null !default;
+$kendo-spreadsheet-border-radius: null !default;
 $kendo-spreadsheet-font-family: null !default;
 $kendo-spreadsheet-font-size: null !default;
 $kendo-spreadsheet-line-height: null !default;

package/scss/components/stepper/_layout.scss

@@ -140,7 +140,7 @@
         }
 
         .k-step-current .k-step-label {
-            font-weight: bold;
+            font-weight: $kendo-stepper-label-current-font-weight;
         }