@progress/kendo-theme-material 5.2.1-dev.2 → 5.2.1-dev.5

package/dist/all.scss

@@ -8427,8 +8427,6 @@ $popup-shadow: 0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevati
     }
     .k-animation-container {
         @include border-bottom-radius-only( $kendo-border-radius-md );
-
-        .k-popup {}
     }
 
     .k-animation-container-shown {
@@ -10223,26 +10221,35 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             margin: 0;
         }
 
+        &::placeholder {
+            color: $kendo-input-placeholder-text;
+            opacity: $kendo-input-placeholder-opacity;
+            user-select: none;
+        }
+        &:-ms-input-placeholder {
+            color: $kendo-input-placeholder-text;
+        }
+    }
+
+    // Input and Textarea
+    .k-input {}
+    input.k-input,
+    textarea.k-textarea {
+        padding: $kendo-input-padding-y $kendo-input-padding-x;
+
         &:disabled,
-        &[disabled],
-        &.k-disabled {
+        &[disabled] {
             @include disabled( $disabled-styling );
 
-            [disabled],
-            .k-disabled,
-            .k-state-disabled {
+            [disabled] &,
+            .k-disabled &,
+            .k-state-disabled & {
                 opacity: 1;
                 filter: grayscale(0);
             }
         }
     }
 
-    // Input
-    .k-input {}
-    input.k-input {
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
-    }
-
 
     // Picker
     .k-picker {
@@ -10251,6 +10258,18 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     select.k-picker {
         padding: $kendo-input-padding-y $kendo-input-padding-x;
         appearance: auto;
+
+        &:disabled,
+        &[disabled] {
+            @include disabled( $disabled-styling );
+
+            [disabled] &,
+            .k-disabled &,
+            .k-state-disabled & {
+                opacity: 1;
+                filter: grayscale(0);
+            }
+        }
     }
 
 
@@ -10684,6 +10703,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 $kendo-input-hover-bg,
                 $kendo-input-hover-border
             );
+            @include box-shadow( $kendo-input-hover-shadow );
         }
 
         // Focus
@@ -10758,6 +10778,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 $kendo-picker-hover-border,
                 $kendo-picker-hover-gradient
             );
+            @include box-shadow( $kendo-picker-hover-shadow );
         }
 
         // Focus
@@ -10844,11 +10865,11 @@ $floating-label-scale: 1 !default;
 $floating-label-font-size: $kendo-input-font-size !default;
 $floating-label-line-height: $kendo-input-line-height !default;
 $floating-label-height: calc( #{$floating-label-line-height} * #{$floating-label-font-size} ) !default;
-$floating-label-offset-x: null !default;
+$floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
 $floating-label-offset-y: calc( #{$floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
 
 $floating-label-focus-scale: .75 !default;
-$floating-label-focus-offset-x: null !default;
+$floating-label-focus-offset-x: 0px !default;
 $floating-label-focus-offset-y: 0px !default;
 
 $floating-label-transition: .15s cubic-bezier( .4, 0, .2, 1 ) !default;
@@ -10894,7 +10915,6 @@ $floating-label-focus-text: $primary !default;
             cursor: text;
             transform-origin: left center;
             transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, left $floating-label-transition;
-            pointer-events: none;
         }
 
         > .k-widget {
@@ -10902,17 +10922,20 @@ $floating-label-focus-text: $primary !default;
             width: auto;
         }
 
-        &.k-state-empty {
+        &.k-state-empty,
+        &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
                 left: $floating-label-offset-x;
                 transform: scale( $floating-label-scale );
+                pointer-events: none;
             }
         }
 
         > .k-label,
         // &:focus-within > .k-label,
-        &.k-state-focused > .k-label {
+        &.k-state-focused > .k-label,
+        &.k-focus > .k-label {
             top: $floating-label-focus-offset-y;
             left: $floating-label-focus-offset-x;
             transform: scale( $floating-label-focus-scale );
@@ -10933,9 +10956,11 @@ $floating-label-focus-text: $primary !default;
 
             > .k-label {
                 transform-origin: right center;
+                transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
             }
 
-            &.k-state-empty {
+            &.k-state-empty,
+            &.k-empty {
                 > .k-label {
                     left: auto;
                     right: $floating-label-offset-x;
@@ -10944,11 +10969,12 @@ $floating-label-focus-text: $primary !default;
 
             > .k-label,
             // &:focus-within > .k-label,
-            &.k-state-focused > .k-label {
+            &.k-state-focused > .k-label,
+            &.k-focus > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
-            &:focus-within {
+            &:focus-within > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
@@ -12294,7 +12320,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the chip.
 /// @group chip
-$kendo-chip-base-bg: if( $dark-theme, $white, $kendo-button-text ) !default;
+$kendo-chip-base-bg: $kendo-button-text !default;
 
 /// Theme colors map for the chip.
 /// @group chip
@@ -15138,6 +15164,7 @@ $fieldset-legend-border: null !default;
         @extend .k-actions;
         margin-top: 2 * $form-field-margin-top;
         padding: 0;
+        overflow: visible;
     }
 
     // Form Hint/Error Messages
@@ -19462,7 +19489,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
 $colorgradient-input-width: 50px !default;
 $colorgradient-input-gap: map-get( $spacing, 2 ) !default;
 $colorgradient-input-label-gap: map-get( $spacing, 1 ) !default;
-$colorgradient-input-label-text: $disabled-text !default;
+$colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
 $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
@@ -20378,211 +20405,15 @@ $kendo-daterange-picker-input-width: 10em;
 // #region @import "~@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss
 @include exports("dropdowngrid/layout") {
 
-    // Dropdown grid
+    // DropdownGrid
     .k-dropdown-grid {}
 
+    // DropdowGrid Popup
     .k-dropdowngrid-popup {
         overflow: hidden;
     }
-    .k-dropdowngrid-popup .k-virtual-wrap {
-        margin: 0;
-    }
-
-    .k-dropdowngrid-popup .k-list-scroller {
-        overflow-x: hidden;
-    }
-
-    // Grid list
-    .k-grid-list {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        max-width: none;
+    .k-dropdowngrid-popup > .k-data-table {
         border-width: 0;
-        border-collapse: collapse;
-        border-spacing: 0;
-        table-layout: fixed;
-        empty-cells: show;
-        outline: none;
-        display: table;
-        list-style: none;
-    }
-
-
-    // Header
-    .k-dropdowngrid-popup .k-grid-header {
-        border-width: 0 0 1px;
-        border-style: solid;
-        border-color: inherit;
-        font-size: $grid-header-font-size;
-        display: block;
-    }
-    .k-dropdowngrid-popup .k-grid-header-wrap {
-        border-width: 0 $grid-cell-vertical-border-width 0 0;
-        border-style: solid;
-        border-color: inherit;
-        vertical-align: top;
-        display: inline-block;
-        overflow: hidden;
-    }
-    .k-dropdowngrid-popup .k-grid-header table {
-        margin-bottom: -1px;
-        width: 100%;
-        max-width: none;
-        border-width: 0;
-        border-collapse: collapse;
-        border-spacing: 0;
-        table-layout: fixed;
-        empty-cells: show;
-        outline: none;
-    }
-    .k-dropdowngrid-popup .k-grid-header .k-header {
-        padding: $grid-header-padding-y $grid-header-padding-x;
-        border-width: 0 0 0 $grid-cell-vertical-border-width;
-        border-style: solid;
-        font-weight: normal;
-        text-align: left;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-
-        &:first-child {
-            border-left: 0;
-        }
-    }
-
-
-    // Rows
-    .k-grid-list > .k-item {
-        box-sizing: border-box;
-        display: table-row;
-        position: relative;
-        cursor: pointer;
-    }
-    .k-grid-list > .k-item > .k-cell,
-    .k-grid-list > .k-item > .k-group,
-    .k-grid-list > .k-item > .k-spacer-group {
-        box-sizing: border-box;
-        display: table-cell;
-        vertical-align: middle;
-    }
-    .k-grid-list.k-virtual-list > .k-item > .k-cell,
-    .k-grid-list.k-virtual-list > .k-item > .k-group,
-    .k-grid-list.k-virtual-list > .k-item > .k-spacer-group {
-        display: inline-block;
-    }
-    .k-grid-list > .k-item:last-child > .k-cell,
-    .k-grid-list > .k-item:last-child > .k-group-cell,
-    .k-grid-list > .k-item:last-child > .k-spacer-cell {
-        border-bottom-width: 0;
-    }
-
-
-    // Cells
-    .k-grid-list > .k-item > .k-cell {
-        padding: $grid-cell-padding-y $grid-cell-padding-x;
-        border-width: 0 0 $grid-cell-horizontal-border-width $grid-cell-vertical-border-width;
-        border-style: solid;
-        text-align: left;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-
-        &:first-child {
-            border-left: 0;
-        }
-    }
-
-
-    // Grouping
-    .k-dropdowngrid-popup .k-group-header,
-    .k-dropdowngrid-popup .k-outer-group-header {
-        margin: 0;
-        padding: $grid-header-padding-y $grid-header-padding-x;
-        min-height: auto;
-        font-size: inherit;
-        text-align: left;
-        font-weight: bold;
-    }
-    .k-grid-list > .k-item.k-first {
-        border-top: 1px solid currentColor;
-    }
-    .k-grid-list > .k-item > .k-group-cell,
-    .k-grid-list > .k-item > .k-spacer-cell {
-        padding: 0;
-        width: 0;
-        border-left-width: 0;
-        border-right-width: 0;
-        overflow: visible;
-        position: relative;
-    }
-    .k-grid-list > .k-item > .k-group-cell > span {
-        padding: 0 ($grid-cell-padding-x / 2);
-        font-size: .75em;
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-    .k-grid-list > .k-outer-group-header {
-        height: calc( #{$grid-header-padding-y * 2} + (#{$font-size} * #{$line-height}) );
-        display: table-row;
-        position: relative;
-    }
-    .k-grid-list > .k-outer-group-header > strong {
-        padding: $grid-header-padding-y $grid-header-padding-x;
-        width: 100%;
-        box-sizing: border-box;
-        position: absolute;
-        left: 0;
-    }
-
-
-    // Footer
-    .k-dropdowngrid-popup .k-footer {
-        padding: $grid-footer-padding-y $grid-footer-padding-x;
-        border-width: 1px 0 0;
-        border-style: solid;
-        text-align: left;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        position: relative;
-        flex-shrink: 0;
-    }
-
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        &.k-dropdowngrid-popup .k-grid-header-wrap,
-        .k-dropdowngrid-popup .k-grid-header-wrap {
-            border-right-width: 0;
-            border-left-width: $grid-cell-vertical-border-width;
-        }
-        &.k-dropdowngrid-popup .k-grid-header .k-header,
-        .k-dropdowngrid-popup .k-grid-header .k-header,
-        .k-grid-list > .k-item > .k-cell {
-            border-left-width: 0;
-            border-right-width: $grid-cell-vertical-border-width;
-            text-align: right;
-        }
-        &.k-dropdowngrid-popup .k-grid-header .k-header:first-child,
-        .k-dropdowngrid-popup .k-grid-header .k-header:first-child,
-        .k-grid-list > .k-item > .k-cell:first-child {
-            border-right-width: 0;
-        }
-        div.k-dropdowngrid-popup .k-group-header,
-        div.k-dropdowngrid-popup .k-outer-group-header {
-            text-align: right;
-        }
-        .k-grid-list > .k-item > .k-group-cell > span {
-            right: auto;
-            left: 0;
-        }
-        .k-grid-list > .k-outer-group-header > strong {
-            left: auto;
-            right: 0;
-        }
     }
 
 }
@@ -20597,91 +20428,6 @@ $kendo-daterange-picker-input-width: 10em;
     // Dropdown grid
     .k-dropdown-grid {}
 
-    // Dropdowngrid
-    .k-dropdowngrid-popup {
-        border-color: $grid-border;
-        color: $grid-text;
-        background-color: $grid-bg;
-    }
-
-
-    // Header
-    .k-dropdowngrid-popup .k-header,
-    .k-dropdowngrid-popup .k-grid-header {
-        border-color: $grid-header-border;
-        color: $grid-header-text;
-        background-color: $grid-header-bg;
-    }
-
-
-    // Footer
-    .k-dropdowngrid-popup .k-footer {
-        border-color: $grid-header-border;
-        color: $grid-header-text;
-        background-color: $grid-header-bg;
-    }
-
-
-    // Group header
-    .k-dropdowngrid-popup .k-group-header,
-    .k-dropdowngrid-popup .k-outer-group-header {
-        border-color: $grid-header-border;
-        color: $grid-header-text;
-        background-color: $grid-header-bg;
-    }
-    .k-grid-list > .k-group-header,
-    .k-grid-list > .k-outer-group-header {
-        background: none;
-        box-shadow: none;
-    }
-
-
-    // Alt
-    .k-grid-list > .k-item:nth-child(2n) {
-        background-color: $grid-alt-bg;
-    }
-    .k-grid-list > .k-outer-group-header:nth-child(2n) {
-
-        > strong {
-            background-color: $grid-alt-bg;
-        }
-    }
-
-
-    // Cells
-    .k-dropdowngrid-popup .k-cell {
-        border-color: $grid-border;
-    }
-
-
-    // Interactive states
-    .k-dropdowngrid-popup .k-item.k-state-hover,
-    .k-dropdowngrid-popup .k-item:hover {
-        border-color: $grid-hovered-border;
-        color: $grid-hovered-text;
-        background-color: $grid-hovered-bg;
-    }
-    .k-dropdowngrid-popup .k-item.k-state-selected {
-        border-color: $grid-selected-border;
-        color: $grid-selected-text;
-        background-color: $grid-selected-bg;
-    }
-    .k-dropdowngrid-popup .k-item.k-state-focused {
-        box-shadow: $grid-focused-shadow;
-    }
-
-
-    // Grouping
-    .k-dropdowngrid-popup .k-group-cell span {
-        background-color: $grid-text;
-        color: $grid-bg;
-    }
-    .k-grid-list > .k-item.k-last > .k-cell,
-    .k-grid-list > .k-item.k-last > .k-group-cell,
-    .k-grid-list > .k-item.k-last > .k-spacer-cell {
-        border-bottom-color: $grid-text;
-    }
-
 }
 
 // #endregion
@@ -22349,7 +22095,7 @@ $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;
 $dropzone-note-spacing: null !default;
-$dropzone-note-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-note-text: $subtle-text !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/dropzone/_layout.scss
@@ -23826,8 +23572,9 @@ $actionsheet-item-icon-size: null !default;
 
 $actionsheet-item-title-font-weight: null !default;
 $actionsheet-item-title-text-transform: null !default;
+
 $actionsheet-item-description-font-size: .875em !default;
-$actionsheet-item-description-opacity: .75 !default;
+$actionsheet-item-description-text: $subtle-text !default;
 
 $actionsheet-item-hover-bg: rgba( black, .04 ) !default;
 $actionsheet-item-hover-text: null !default;
@@ -23946,7 +23693,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
     }
     .k-actionsheet-item-description {
         font-size: $actionsheet-item-description-font-size;
-        opacity: $actionsheet-item-description-opacity;
     }
 
 
@@ -24041,6 +23787,12 @@ $actionsheet-item-disabled-opacity: .42 !default;
     .k-actionsheet-item {}
 
 
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+        @include fill( $color: $actionsheet-item-description-text );
+    }
+
+
     // Actionsheet action
     .k-actionsheet-action {
 
@@ -28588,7 +28340,7 @@ $expander-header-focused-shadow: none !default;
 
 $expander-title-text: $secondary !default;
 
-$expander-header-sub-title-opacity: .62 !default;
+$expander-header-sub-title-text: $subtle-text !default;
 
 $expander-content-padding-x: $padding-x * 1.5 !default;
 $expander-content-padding-y: $padding-y * 6 !default;
@@ -28715,7 +28467,7 @@ $expander-content-padding-y: $padding-y * 6 !default;
     }
 
     .k-expander-sub-title {
-        opacity: $expander-header-sub-title-opacity;
+        color: $expander-header-sub-title-text;
     }
 }
 
@@ -31083,7 +30835,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
         }
 
-        .k-header > .k-link > .k-icon {
+        .k-cell-inner > .k-link > .k-icon {
             &.k-i-sort-desc-sm,
             &.k-i-sort-asc-sm {
                 vertical-align: text-top;
@@ -31516,6 +31268,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
+        justify-content: inherit;
         overflow: hidden;
 
         > .k-link {
@@ -31524,6 +31277,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             display: flex;
             flex-flow: row nowrap;
             align-items: center;
+            justify-content: inherit;
             flex: 1;
             overflow: hidden;
 
@@ -36503,7 +36257,7 @@ $taskboard-card-selected-shadow: none !default;
 
 $taskboard-card-header-text: $primary !default;
 $taskboard-card-header-focus-text: $primary-darker !default;
-$taskboard-card-header-hover-text: try-darken( $primary-lighter, 25% ) !default;
+$taskboard-card-header-hover-text: $primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;

package/lib/swatches/material-aqua-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#3f51b5",
         "#2196f3",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#121212",
         "#212121",