@progress/kendo-theme-fluent 9.1.0-dev.4 → 9.1.0-dev.6

package/dist/meta/variables.json

@@ -750,7 +750,7 @@
     },
     "kendo-components": {
         "type": "List",
-        "value": "\"utils\", \"utils-accessibility-screen-readers\", \"utils-background-clip\", \"utils-background-color\", \"utils-background-position\", \"utils-background-size\", \"utils-border-color\", \"utils-border-radius\", \"utils-border-style\", \"utils-border-width\", \"utils-outline-color\", \"utils-outline-offset\", \"utils-outline-style\", \"utils-outline-width\", \"utils-effects-opacity\", \"utils-elevation\", \"utils-filter-backdrop\", \"utils-flex-grid-align-content\", \"utils-flex-grid-align-items\", \"utils-flex-grid-align-self\", \"utils-flex-grid-flex-basis\", \"utils-flex-grid-flex-direction\", \"utils-flex-grid-flex-grow\", \"utils-flex-grid-flex-shrink\", \"utils-flex-grid-flex-wrap\", \"utils-flex-grid-flex\", \"utils-flex-grid-gap\", \"utils-flex-grid-grid-auto-columns\", \"utils-flex-grid-grid-auto-flow\", \"utils-flex-grid-grid-auto-rows\", \"utils-flex-grid-grid-column-start-end\", \"utils-flex-grid-grid-row-start-end\", \"utils-flex-grid-grid-template-columns\", \"utils-flex-grid-grid-template-rows\", \"utils-flex-grid-justify-content\", \"utils-flex-grid-justify-items\", \"utils-flex-grid-justify-self\", \"utils-flex-grid-order\", \"utils-flex-grid-place-content\", \"utils-flex-grid-place-items\", \"utils-flex-grid-place-self\", \"utils-interactivity-accent-color\", \"utils-interactivity-appearance\", \"utils-interactivity-caret-color\", \"utils-interactivity-cursor\", \"utils-interactivity-pointer-events\", \"utils-interactivity-resize\", \"utils-interactivity-scroll\", \"utils-interactivity-touch-action\", \"utils-interactivity-user-select\", \"utils-interactivity-will-change\", \"utils-layout-aspect-ratio\", \"utils-layout-box-sizing\", \"utils-layout-clear\", \"utils-layout-columns\", \"utils-layout-display\", \"utils-layout-float\", \"utils-layout-object-fit\", \"utils-layout-object-position\", \"utils-layout-overflow\", \"utils-layout-placement\", \"utils-layout-position\", \"utils-layout-visibility\", \"utils-layout-zindex\", \"utils-sizing-height\", \"utils-sizing-width\", \"utils-spacing-margin\", \"utils-spacing-padding\", \"utils-spacing-space-between\", \"utils-svg-fill\", \"utils-svg-stroke\", \"utils-table-border-collapse\", \"utils-table-table-layout\", \"utils-transform-flip\", \"utils-transform-origin\", \"utils-transform-rotate\", \"utils-transform-scale\", \"utils-transform-skew\", \"utils-transform-translate\", \"utils-typography-font-family\", \"utils-typography-font-size\", \"utils-typography-font-style\", \"utils-typography-font-weight\", \"utils-typography-letter-spacing\", \"utils-typography-line-height\", \"utils-typography-list-style\", \"utils-typography-text-align\", \"utils-typography-text-color\", \"utils-typography-text-decoration\", \"utils-typography-text-overflow\", \"utils-typography-text-transform\", \"utils-typography-vertical-align\", \"utils-typography-white-space\", \"typography\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"time-marker\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"action-buttons\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panel\", \"panelbar\", \"splitter\", \"tile-layout\", \"dock-manager\", \"chart-wizard\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"prompt\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
+        "value": "\"utils\", \"utils-accessibility-screen-readers\", \"utils-background-clip\", \"utils-background-color\", \"utils-background-position\", \"utils-background-size\", \"utils-border-color\", \"utils-border-radius\", \"utils-border-style\", \"utils-border-width\", \"utils-outline-color\", \"utils-outline-offset\", \"utils-outline-style\", \"utils-outline-width\", \"utils-effects-opacity\", \"utils-elevation\", \"utils-filter-backdrop\", \"utils-flex-grid-align-content\", \"utils-flex-grid-align-items\", \"utils-flex-grid-align-self\", \"utils-flex-grid-flex-basis\", \"utils-flex-grid-flex-direction\", \"utils-flex-grid-flex-grow\", \"utils-flex-grid-flex-shrink\", \"utils-flex-grid-flex-wrap\", \"utils-flex-grid-flex\", \"utils-flex-grid-gap\", \"utils-flex-grid-grid-auto-columns\", \"utils-flex-grid-grid-auto-flow\", \"utils-flex-grid-grid-auto-rows\", \"utils-flex-grid-grid-column-start-end\", \"utils-flex-grid-grid-row-start-end\", \"utils-flex-grid-grid-template-columns\", \"utils-flex-grid-grid-template-rows\", \"utils-flex-grid-justify-content\", \"utils-flex-grid-justify-items\", \"utils-flex-grid-justify-self\", \"utils-flex-grid-order\", \"utils-flex-grid-place-content\", \"utils-flex-grid-place-items\", \"utils-flex-grid-place-self\", \"utils-interactivity-accent-color\", \"utils-interactivity-appearance\", \"utils-interactivity-caret-color\", \"utils-interactivity-cursor\", \"utils-interactivity-pointer-events\", \"utils-interactivity-resize\", \"utils-interactivity-scroll\", \"utils-interactivity-touch-action\", \"utils-interactivity-user-select\", \"utils-interactivity-will-change\", \"utils-layout-aspect-ratio\", \"utils-layout-box-sizing\", \"utils-layout-clear\", \"utils-layout-columns\", \"utils-layout-display\", \"utils-layout-float\", \"utils-layout-object-fit\", \"utils-layout-object-position\", \"utils-layout-overflow\", \"utils-layout-placement\", \"utils-layout-position\", \"utils-layout-visibility\", \"utils-layout-zindex\", \"utils-sizing-height\", \"utils-sizing-width\", \"utils-spacing-margin\", \"utils-spacing-padding\", \"utils-spacing-space-between\", \"utils-svg-fill\", \"utils-svg-stroke\", \"utils-table-border-collapse\", \"utils-table-table-layout\", \"utils-transform-flip\", \"utils-transform-origin\", \"utils-transform-rotate\", \"utils-transform-scale\", \"utils-transform-skew\", \"utils-transform-translate\", \"utils-typography-font-family\", \"utils-typography-font-size\", \"utils-typography-font-style\", \"utils-typography-font-weight\", \"utils-typography-letter-spacing\", \"utils-typography-line-height\", \"utils-typography-list-style\", \"utils-typography-text-align\", \"utils-typography-text-color\", \"utils-typography-text-decoration\", \"utils-typography-text-overflow\", \"utils-typography-text-transform\", \"utils-typography-vertical-align\", \"utils-typography-white-space\", \"typography\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"no-data\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"time-marker\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"action-buttons\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panel\", \"panelbar\", \"splitter\", \"tile-layout\", \"dock-manager\", \"chart-wizard\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"prompt\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
     },
     "kendo-prefix": {
         "type": "String",
@@ -2158,10 +2158,6 @@
         "type": "String",
         "value": "none"
     },
-    "kendo-list-no-data-text": {
-        "type": "String",
-        "value": "var(--kendo-color-on-app-surface, #323130)"
-    },
     "kendo-list-option-label-text": {
         "type": "String",
         "value": "var(--kendo-color-subtle, #605e5c)"
@@ -2487,6 +2483,14 @@
         "type": "String",
         "value": "var(--kendo-component-border, initial)"
     },
+    "kendo-no-data-min-height": {
+        "type": "Number",
+        "value": "140px"
+    },
+    "kendo-no-data-text": {
+        "type": "String",
+        "value": "var(--kendo-color-on-app-surface, #323130)"
+    },
     "kendo-button-border-width": {
         "type": "Number",
         "value": "1px"
@@ -10296,9 +10300,33 @@
         "type": "String",
         "value": "var(--kendo-component-border, initial)"
     },
+    "kendo-toolbar-outline-text": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-toolbar-outline-border": {
+        "type": "String",
+        "value": "var(--kendo-color-border, #8a8886)"
+    },
+    "kendo-toolbar-outline-border-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-toolbar-flat-text": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-toolbar-flat-border": {
+        "type": "String",
+        "value": "var(--kendo-component-border, initial)"
+    },
+    "kendo-toolbar-flat-border-width": {
+        "type": "Number",
+        "value": "1px"
+    },
     "kendo-toolbar-separator-border": {
         "type": "String",
-        "value": "color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)"
+        "value": "inherit"
     },
     "kendo-toolbar-input-width": {
         "type": "Number",
@@ -10316,10 +10344,6 @@
         "type": "String",
         "value": "var(--kendo-color-base-emphasis, #605e5c)"
     },
-    "kendo-toolbar-flat-border-width": {
-        "type": "Number",
-        "value": "1px"
-    },
     "kendo-toolbar-sizes": {
         "type": "Map",
         "value": "(sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-2, 0.5rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem)), lg: (padding-x: var(--kendo-spacing-2\\.5, 0.625rem), padding-y: var(--kendo-spacing-2\\.5, 0.625rem), spacing: var(--kendo-spacing-2, 0.5rem)))",
@@ -16559,6 +16583,34 @@
         "type": "String",
         "value": "var(--kendo-color-subtle, #605e5c)"
     },
+    "kendo-pdf-viewer-popup-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-pdf-viewer-popup-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-pdf-viewer-highlight-annotation-border": {
+        "type": "String",
+        "value": "var(--kendo-color-primary, #0078d4)"
+    },
+    "kendo-pdf-viewer-highlight-annotation-hover-border": {
+        "type": "String",
+        "value": "var(--kendo-color-primary-hover, #106ebe)"
+    },
+    "kendo-pdf-viewer-free-text-annotation-border": {
+        "type": "String",
+        "value": "var(--kendo-color-primary, #0078d4)"
+    },
+    "kendo-pdf-viewer-free-text-annotation-placeholder-text": {
+        "type": "Color",
+        "value": "rgba(124, 22, 27, 0.5)"
+    },
+    "kendo-pdf-viewer-free-text-annotation-text": {
+        "type": "Color",
+        "value": "rgba(124, 22, 27, 0.7)"
+    },
     "kendo-scrollview-border-width": {
         "type": "Number",
         "value": "0px"
@@ -17155,6 +17207,10 @@
         "type": "String",
         "value": "var(--kendo-component-border, initial)"
     },
+    "kendo-chart-computed-title-height": {
+        "type": "Number",
+        "value": "0px"
+    },
     "kendo-treemap-font-family": {
         "type": "String",
         "value": "var(--kendo-font-family, inherit)"
@@ -17191,6 +17247,26 @@
         "type": "String",
         "value": "var(--kendo-component-border, initial)"
     },
+    "kendo-chart-overlay-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-app-surface, #ffffff)"
+    },
+    "kendo-chart-no-data-font-size": {
+        "type": "String",
+        "value": "var(--kendo-font-size-lg, inherit)"
+    },
+    "kendo-chart-no-data-font-weight": {
+        "type": "String",
+        "value": "var(--kendo-font-weight, normal)"
+    },
+    "kendo-chart-no-data-text": {
+        "type": "String",
+        "value": "var(--kendo-color-on-app-surface, #323130)"
+    },
+    "kendo-chart-no-data-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-25, 7rem)"
+    },
     "kendo-map-font-size": {
         "type": "String",
         "value": "var(--kendo-font-size, inherit)"

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.1.0-dev.4",
+    "version": "9.1.0-dev.6",
     "api": "modern",
     "previewColors": [
         "#ffffff",

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

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.1.0-dev.4",
+    "version": "9.1.0-dev.6",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.1.0-dev.4",
+    "version": "9.1.0-dev.6",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "9.1.0-dev.4",
+  "version": "9.1.0-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^3.1.0",
-    "@progress/kendo-theme-core": "9.1.0-dev.4",
-    "@progress/kendo-theme-utils": "9.1.0-dev.4"
+    "@progress/kendo-theme-core": "9.1.0-dev.6",
+    "@progress/kendo-theme-utils": "9.1.0-dev.6"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "295adb221984032533fbde2b3adb167504eded91"
+  "gitHead": "e8189a5544630a4e77c7e078ed996accff7b5b7e"
 }

package/scss/core/module-system/_components.scss

@@ -18,6 +18,7 @@ $components: (
     "overlay",
     "ripple",
     "virtual-scroller",
+    "no-data",
 
     // Indicators
     "avatar",

package/scss/dataviz/_layout.scss

@@ -251,6 +251,29 @@
         }
     }
 
+        // Chart Overlay
+        .k-chart-overlay {
+            margin: 0;
+            width: 100%;
+            height: if( --kendo-chart-computed-title-height, calc( 100% - var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} ) ), 100% );
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 1;
+            z-index: 10001;
+
+            &-top {
+                top: var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} );
+            }
+
+            .k-no-data {
+                min-height: auto;
+                padding-block-start: var( --kendo-chart-no-data-padding-y, #{$kendo-chart-no-data-padding-y} );
+                font-size: var( --kendo-chart-no-data-font-size, #{$kendo-chart-no-data-font-size} );
+                font-weight: var( --kendo-chart-no-data-font-weight, #{$kendo-chart-no-data-font-weight} );
+            }
+        }
+
     .k-diagram {
         height: 600px;
     }

package/scss/dataviz/_theme.scss

@@ -119,6 +119,14 @@
         opacity: .8;
     }
 
+    .k-chart-overlay {
+        background-color: var( --kendo-chart-overlay-bg, #{$kendo-chart-overlay-bg} );
+
+        .k-no-data {
+            color: var( --kendo-chart-no-data-text, #{$kendo-chart-no-data-text} );
+        }
+    }
+
     // Treemap
     .k-treemap {
         @include fill(

package/scss/dataviz/_variables.scss

@@ -213,6 +213,10 @@ $kendo-selection-handle-size: 24px !default;
 /// @group charts
 $kendo-selection-border-color: var( --kendo-component-border, initial ) !default;
 
+/// The computed height of the Chart title.
+/// @group charts
+$kendo-chart-computed-title-height: 0px !default;
+
 /// The font-family of the treemap.
 /// @group charts
 $kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
@@ -241,3 +245,22 @@ $kendo-treemap-title-text: if($kendo-enable-color-system, k-color( on-app-surfac
 /// The border color of the treemap title.
 /// @group charts
 $kendo-treemap-title-border: var( --kendo-component-border, initial ) !default;
+
+// Chart Overlay
+/// The background color of the Chart overlay.
+/// @group charts
+$kendo-chart-overlay-bg: if($kendo-enable-color-system, k-color(app-surface), $kendo-color-white) !default;
+
+// No Data
+/// The font-size of the Chart no data message.
+/// @group charts
+$kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The font-weight of the Chart no data message.
+/// @group charts
+$kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default;
+/// The text color of the Chart no data message.
+/// @group charts
+$kendo-chart-no-data-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+/// The vertical padding of the Chart no data message.
+/// @group charts
+$kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;

package/scss/dataviz/index.scss

@@ -4,7 +4,8 @@ $_kendo-module-meta: (
     dependencies: (
         "icon",
         "popup",
-        "tooltip"
+        "tooltip",
+        "no-data"
     )
 );
 

package/scss/grid/_theme.scss

@@ -441,14 +441,6 @@
             }
         }
 
-        .k-column-menu-group-header-text {
-            @include fill(
-                var( --kendo-grid-column-menu-group-header-text, #{$kendo-grid-column-menu-group-header-text} ),
-                var( --kendo-grid-column-menu-group-header-bg, #{$kendo-grid-column-menu-group-header-bg} ),
-                var( --kendo-grid-column-menu-group-header-border, #{$kendo-grid-column-menu-group-header-border} )
-            );
-        }
-
         .k-check-all-wrap {
             @include fill( $border: $kendo-popup-border );
         }
@@ -465,6 +457,13 @@
         background-color: var( --kendo-grid-column-menu-tabbed-bg, #{$kendo-grid-column-menu-tabbed-bg} );
     }
 
+    .k-column-menu-group-header-text {
+        @include fill(
+            var( --kendo-grid-column-menu-group-header-text, #{$kendo-grid-column-menu-group-header-text} ),
+            var( --kendo-grid-column-menu-group-header-bg, #{$kendo-grid-column-menu-group-header-bg} ),
+            var( --kendo-grid-column-menu-group-header-border, #{$kendo-grid-column-menu-group-header-border} )
+        );
+    }
 
     .k-grid-norecords-template {
         background-color: $kendo-grid-bg;

package/scss/index.scss

@@ -21,6 +21,7 @@
 @forward "./ripple/index.scss";
 @forward "./table/index.scss";
 @forward "./virtual-scroller/index.scss";
+@forward "./no-data/index.scss";
 
 
 // Native forms
@@ -184,6 +185,7 @@
 @use "./ripple/index.scss" as *;
 @use "./table/index.scss" as *;
 @use "./virtual-scroller/index.scss" as *;
+@use "./no-data/index.scss" as *;
 
 
 // Indicators
@@ -372,6 +374,7 @@
     @include ripple-styles();
     @include table-styles();
     @include virtual-scroller-styles();
+    @include no-data-styles();
 
 
     // Indicators

package/scss/list/_layout.scss

@@ -249,22 +249,4 @@
         }
     }
 
-
-    // No data
-    .k-no-data {
-        min-height: 140px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: lighter;
-        text-align: center;
-        white-space: normal;
-    }
-
-
-    // Alias
-    .k-nodata {
-        @extend .k-no-data !optional;
-    }
-
 }

package/scss/list/_theme.scss

@@ -110,10 +110,4 @@
         );
     }
 
-
-    // No data
-    .k-no-data {
-        color: var( --kendo-list-no-data-text, #{$kendo-list-no-data-text} );
-    }
-
 }

package/scss/list/_variables.scss

@@ -273,10 +273,6 @@ $kendo-list-group-item-border: inherit !default;
 /// @group list
 $kendo-list-group-item-shadow: none !default;
 
-/// The text color of the 'No Data' text.
-/// @group list
-$kendo-list-no-data-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
-
 /// The color of the 'Option Label' text.
 /// @group list
 $kendo-list-option-label-text: $kendo-subtle-text !default;

package/scss/list/index.scss

@@ -3,7 +3,8 @@ $_kendo-module-meta: (
     name: "list",
     dependencies: (
         "checkbox",
-        "icon"
+        "icon",
+        "no-data"
     )
 );
 

package/scss/no-data/_layout.scss

@@ -0,0 +1,21 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-no-data--layout() {
+
+    .k-no-data {
+        min-height: var( --kendo-no-data-min-height, #{$kendo-no-data-min-height});
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        text-align: center;
+        white-space: normal;
+    }
+
+
+    // Alias
+    .k-nodata {
+        @extend .k-no-data !optional;
+    }
+
+}

package/scss/no-data/_theme.scss

@@ -0,0 +1,9 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-no-data--theme() {
+
+    .k-no-data {
+        color: var( --kendo-no-data-text, #{$kendo-no-data-text} );
+    }
+
+}

package/scss/no-data/_variables.scss

@@ -0,0 +1,8 @@
+@use "../core/_index.scss" as *;
+
+/// The minimum height of the 'No Data' text container.
+/// @group no-data
+$kendo-no-data-min-height: 140px !default;
+/// The text color of the 'No Data' text.
+/// @group list
+$kendo-no-data-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

package/scss/no-data/index.scss

@@ -0,0 +1,22 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "no-data",
+    dependencies: ()
+);
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Register
+@use "../core/module-system/index.scss" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin no-data-styles() {
+    @include module.render( "no-data" ) {
+        @include kendo-no-data--layout();
+        @include kendo-no-data--theme();
+    }
+}