@progress/kendo-theme-fluent 7.1.0-dev.6 → 7.1.0-dev.7

package/dist/all.css

@@ -31028,6 +31028,9 @@ select.k-picker {
 .k-input-inner:invalid {
   box-shadow: none;
 }
+.k-input-inner:valid {
+  box-shadow: none;
+}
 
 span.k-input-inner {
   white-space: nowrap;
@@ -31085,22 +31088,44 @@ textarea.k-input-inner {
 
 .k-input-prefix,
 .k-input-suffix {
-  border: none;
+  border-color: inherit;
   display: flex;
-  flex-flow: row nowrap;
   align-items: center;
   flex: none;
 }
 .k-input-prefix > *,
 .k-input-suffix > * {
   flex-shrink: 0;
+  border: none;
+}
+.k-input-prefix-vertical,
+.k-input-suffix-vertical {
+  flex-flow: column wrap;
+}
+.k-input-prefix-horizontal,
+.k-input-suffix-horizontal {
+  flex-flow: row wrap;
+}
+
+.k-input-separator {
+  margin: 0;
+  border-style: solid;
+  border-color: inherit;
+  height: auto;
+  align-self: stretch;
+}
+.k-input-separator-horizontal {
+  margin-inline: 0.375rem;
+  border-width: 1px 0 0;
+}
+.k-input-separator-vertical {
+  margin-block: 0.375rem;
+  border-width: 0 0 0 1px;
 }
 
 .k-input-icon,
 .k-input-validation-icon,
-.k-input-loading-icon,
-.k-input-prefix > .k-icon,
-.k-input-suffix > .k-icon {
+.k-input-loading-icon {
   padding-inline: var(--INTERNAL--kendo-input-padding-y, 0.375rem);
   padding-block: var(--INTERNAL--kendo-input-padding-y, 0.375rem);
   flex: none;
@@ -31282,16 +31307,28 @@ textarea.k-input-inner {
 .k-picker-flat:focus-within::after {
   border-width: 0 0 var(--kendo-input-focus-border-width, 2px) 0;
 }
-.k-input-flat.k-invalid:focus::after, .k-input-flat.k-invalid.k-focus::after, .k-input-flat.k-invalid:focus-within::after, .k-input-flat.ng-invalid.ng-touched:focus::after, .k-input-flat.ng-invalid.ng-touched.k-focus::after, .k-input-flat.ng-invalid.ng-touched:focus-within::after, .k-input-flat.ng-invalid.ng-dirty:focus::after, .k-input-flat.ng-invalid.ng-dirty.k-focus::after, .k-input-flat.ng-invalid.ng-dirty:focus-within::after,
+.k-input-flat.k-valid:focus::after, .k-input-flat.k-valid.k-focus::after, .k-input-flat.k-valid:focus-within::after, .k-input-flat.k-invalid:focus::after, .k-input-flat.k-invalid.k-focus::after, .k-input-flat.k-invalid:focus-within::after, .k-input-flat.ng-valid.ng-touched:focus::after, .k-input-flat.ng-valid.ng-touched.k-focus::after, .k-input-flat.ng-valid.ng-touched:focus-within::after, .k-input-flat.ng-invalid.ng-touched:focus::after, .k-input-flat.ng-invalid.ng-touched.k-focus::after, .k-input-flat.ng-invalid.ng-touched:focus-within::after, .k-input-flat.ng-valid.ng-dirty .k-input-flat.ng-invalid.ng-dirty:focus::after, .k-input-flat.ng-valid.ng-dirty .k-input-flat.ng-invalid.ng-dirty.k-focus::after, .k-input-flat.ng-valid.ng-dirty .k-input-flat.ng-invalid.ng-dirty:focus-within::after,
+.k-picker-flat.k-valid:focus::after,
+.k-picker-flat.k-valid.k-focus::after,
+.k-picker-flat.k-valid:focus-within::after,
 .k-picker-flat.k-invalid:focus::after,
 .k-picker-flat.k-invalid.k-focus::after,
 .k-picker-flat.k-invalid:focus-within::after,
+.k-picker-flat.ng-valid.ng-touched:focus::after,
+.k-picker-flat.ng-valid.ng-touched.k-focus::after,
+.k-picker-flat.ng-valid.ng-touched:focus-within::after,
 .k-picker-flat.ng-invalid.ng-touched:focus::after,
 .k-picker-flat.ng-invalid.ng-touched.k-focus::after,
 .k-picker-flat.ng-invalid.ng-touched:focus-within::after,
-.k-picker-flat.ng-invalid.ng-dirty:focus::after,
-.k-picker-flat.ng-invalid.ng-dirty.k-focus::after,
-.k-picker-flat.ng-invalid.ng-dirty:focus-within::after {
+.k-input-flat.ng-valid.ng-dirty .k-picker-flat.ng-invalid.ng-dirty:focus::after,
+.k-input-flat.ng-valid.ng-dirty .k-picker-flat.ng-invalid.ng-dirty.k-focus::after,
+.k-input-flat.ng-valid.ng-dirty .k-picker-flat.ng-invalid.ng-dirty:focus-within::after,
+.k-picker-flat.ng-valid.ng-dirty .k-input-flat.ng-invalid.ng-dirty:focus::after,
+.k-picker-flat.ng-valid.ng-dirty .k-input-flat.ng-invalid.ng-dirty.k-focus::after,
+.k-picker-flat.ng-valid.ng-dirty .k-input-flat.ng-invalid.ng-dirty:focus-within::after,
+.k-picker-flat.ng-valid.ng-dirty .k-picker-flat.ng-invalid.ng-dirty:focus::after,
+.k-picker-flat.ng-valid.ng-dirty .k-picker-flat.ng-invalid.ng-dirty.k-focus::after,
+.k-picker-flat.ng-valid.ng-dirty .k-picker-flat.ng-invalid.ng-dirty:focus-within::after {
   border-width: 0 0 var(--kendo-input-focus-border-width, 2px) 0;
 }
 
@@ -31322,6 +31359,26 @@ textarea.k-input-inner {
 .k-picker-sm.k-icon-picker .k-input-inner {
   width: var(--kendo-input-icon-picker-width, calc(var(--kendo-line-height, normal)*1em + 0.5rem));
 }
+.k-input-sm .k-input-prefix > .k-icon,
+.k-input-sm .k-input-prefix > .k-input-prefix-text,
+.k-input-sm .k-input-suffix > .k-icon,
+.k-input-sm .k-input-suffix > .k-input-suffix-text,
+.k-picker-sm .k-input-prefix > .k-icon,
+.k-picker-sm .k-input-prefix > .k-input-prefix-text,
+.k-picker-sm .k-input-suffix > .k-icon,
+.k-picker-sm .k-input-suffix > .k-input-suffix-text {
+  padding-block: 0.25rem;
+  padding-inline: 0.25rem;
+  box-sizing: content-box;
+}
+.k-input-sm .k-input-separator-horizontal,
+.k-picker-sm .k-input-separator-horizontal {
+  margin-inline: 0.25rem;
+}
+.k-input-sm .k-input-separator-vertical,
+.k-picker-sm .k-input-separator-vertical {
+  margin-block: 0.25rem;
+}
 
 .k-input-md,
 .k-picker-md {
@@ -31345,6 +31402,26 @@ textarea.k-input-inner {
 .k-picker-md.k-icon-picker .k-input-inner {
   width: var(--kendo-input-icon-picker-width, calc(var(--kendo-line-height, normal)*1em + 0.75rem));
 }
+.k-input-md .k-input-prefix > .k-icon,
+.k-input-md .k-input-prefix > .k-input-prefix-text,
+.k-input-md .k-input-suffix > .k-icon,
+.k-input-md .k-input-suffix > .k-input-suffix-text,
+.k-picker-md .k-input-prefix > .k-icon,
+.k-picker-md .k-input-prefix > .k-input-prefix-text,
+.k-picker-md .k-input-suffix > .k-icon,
+.k-picker-md .k-input-suffix > .k-input-suffix-text {
+  padding-block: 0.375rem;
+  padding-inline: 0.375rem;
+  box-sizing: content-box;
+}
+.k-input-md .k-input-separator-horizontal,
+.k-picker-md .k-input-separator-horizontal {
+  margin-inline: 0.375rem;
+}
+.k-input-md .k-input-separator-vertical,
+.k-picker-md .k-input-separator-vertical {
+  margin-block: 0.375rem;
+}
 
 .k-input-lg,
 .k-picker-lg {
@@ -31368,6 +31445,26 @@ textarea.k-input-inner {
 .k-picker-lg.k-icon-picker .k-input-inner {
   width: var(--kendo-input-icon-picker-width, calc(var(--kendo-line-height, normal)*1em + 1rem));
 }
+.k-input-lg .k-input-prefix > .k-icon,
+.k-input-lg .k-input-prefix > .k-input-prefix-text,
+.k-input-lg .k-input-suffix > .k-icon,
+.k-input-lg .k-input-suffix > .k-input-suffix-text,
+.k-picker-lg .k-input-prefix > .k-icon,
+.k-picker-lg .k-input-prefix > .k-input-prefix-text,
+.k-picker-lg .k-input-suffix > .k-icon,
+.k-picker-lg .k-input-suffix > .k-input-suffix-text {
+  padding-block: 0.5rem;
+  padding-inline: 0.5rem;
+  box-sizing: content-box;
+}
+.k-input-lg .k-input-separator-horizontal,
+.k-picker-lg .k-input-separator-horizontal {
+  margin-inline: 0.5rem;
+}
+.k-input-lg .k-input-separator-vertical,
+.k-picker-lg .k-input-separator-vertical {
+  margin-block: 0.5rem;
+}
 
 .k-input > kendo-popup,
 .k-picker > kendo-popup {
@@ -31423,6 +31520,12 @@ textarea.k-input-inner {
   --INTERNAL--kendo-input-bg: var( --kendo-input-disabled-bg );
   --INTERNAL--kendo-input-border: var( --kendo-input-disabled-border );
 }
+.k-input:disabled .k-input-prefix, .k-input[disabled] .k-input-prefix, .k-input.k-disabled .k-input-prefix {
+  color: var(--kendo-input-prefix-disabled-text, var(--kendo-neutral-60, inherit));
+}
+.k-input:disabled .k-input-suffix, .k-input[disabled] .k-input-suffix, .k-input.k-disabled .k-input-suffix {
+  color: var(--kendo-input-prefix-disabled-text, var(--kendo-neutral-60, inherit));
+}
 .k-input.k-invalid, .k-input.ng-invalid.ng-touched, .k-input.ng-invalid.ng-dirty {
   --INTERNAL--kendo-input-border: var( --kendo-input-invalid-border, var(--kendo-invalid-border, var(--kendo-error-190, inherit)) );
 }
@@ -31438,6 +31541,30 @@ textarea.k-input-inner {
 .k-input.k-invalid:focus:hover .k-input-validation-icon, .k-input.k-invalid.k-focus:hover .k-input-validation-icon, .k-input.k-invalid:focus.k-hover .k-input-validation-icon, .k-input.k-invalid.k-focus.k-hover .k-input-validation-icon, .k-input.ng-invalid.ng-touched:focus:hover .k-input-validation-icon, .k-input.ng-invalid.ng-touched.k-focus:hover .k-input-validation-icon, .k-input.ng-invalid.ng-touched:focus.k-hover .k-input-validation-icon, .k-input.ng-invalid.ng-touched.k-focus.k-hover .k-input-validation-icon, .k-input.ng-invalid.ng-dirty:focus:hover .k-input-validation-icon, .k-input.ng-invalid.ng-dirty.k-focus:hover .k-input-validation-icon, .k-input.ng-invalid.ng-dirty:focus.k-hover .k-input-validation-icon, .k-input.ng-invalid.ng-dirty.k-focus.k-hover .k-input-validation-icon {
   color: var(--kendo-input-invalid-text, var(--kendo-invalid-text, var(--kendo-error-190, inherit)));
 }
+.k-input.k-valid, .k-input.ng-valid.ng-touched, .k-input.ng-valid.ng-dirty {
+  --INTERNAL--kendo-input-border: var( --kendo-input-valid-border, var(--kendo-valid-border, var(--kendo-success-190, inherit)) );
+}
+.k-input.k-valid::after, .k-input.ng-valid.ng-touched::after, .k-input.ng-valid.ng-dirty::after {
+  border-color: var(--kendo-input-valid-border, var(--kendo-valid-border, var(--kendo-success-190, inherit)));
+}
+.k-input.k-valid .k-input-validation-icon, .k-input.ng-valid.ng-touched .k-input-validation-icon, .k-input.ng-valid.ng-dirty .k-input-validation-icon {
+  color: var(--kendo-input-valid-text, var(--kendo-valid-text, var(--kendo-success-190, inherit)));
+}
+.k-input.k-valid:focus:hover, .k-input.k-valid.k-focus:hover, .k-input.k-valid:focus.k-hover, .k-input.k-valid.k-focus.k-hover, .k-input.ng-valid.ng-touched:focus:hover, .k-input.ng-valid.ng-touched.k-focus:hover, .k-input.ng-valid.ng-touched:focus.k-hover, .k-input.ng-valid.ng-touched.k-focus.k-hover, .k-input.ng-valid.ng-dirty:focus:hover, .k-input.ng-valid.ng-dirty.k-focus:hover, .k-input.ng-valid.ng-dirty:focus.k-hover, .k-input.ng-valid.ng-dirty.k-focus.k-hover {
+  --INTERNAL--kendo-input-border: var( --kendo-input-valid-border, var(--kendo-valid-border, var(--kendo-success-190, inherit)) );
+}
+.k-input.k-valid:focus:hover .k-input-validation-icon, .k-input.k-valid.k-focus:hover .k-input-validation-icon, .k-input.k-valid:focus.k-hover .k-input-validation-icon, .k-input.k-valid.k-focus.k-hover .k-input-validation-icon, .k-input.ng-valid.ng-touched:focus:hover .k-input-validation-icon, .k-input.ng-valid.ng-touched.k-focus:hover .k-input-validation-icon, .k-input.ng-valid.ng-touched:focus.k-hover .k-input-validation-icon, .k-input.ng-valid.ng-touched.k-focus.k-hover .k-input-validation-icon, .k-input.ng-valid.ng-dirty:focus:hover .k-input-validation-icon, .k-input.ng-valid.ng-dirty.k-focus:hover .k-input-validation-icon, .k-input.ng-valid.ng-dirty:focus.k-hover .k-input-validation-icon, .k-input.ng-valid.ng-dirty.k-focus.k-hover .k-input-validation-icon {
+  color: var(--kendo-input-valid-text, var(--kendo-valid-text, var(--kendo-success-190, inherit)));
+}
+.k-input .k-input-prefix {
+  color: var(--kendo-input-prefix-text, var(--kendo-neutral-130, inherit));
+}
+.k-input .k-input-suffix {
+  color: var(--kendo-input-suffix-text, var(--kendo-neutral-130, inherit));
+}
+.k-input .k-input-separator {
+  border-color: var(--kendo-input-separator-text, var(--kendo-neutral-30, inherit));
+}
 
 .k-picker {
   --INTERNAL--kendo-picker-text: var( --kendo-picker-text );
@@ -31485,6 +31612,21 @@ textarea.k-input-inner {
 .k-picker.k-invalid:focus:hover .k-input-validation-icon, .k-picker.k-invalid.k-focus:hover .k-input-validation-icon, .k-picker.k-invalid:focus.k-hover .k-input-validation-icon, .k-picker.k-invalid.k-focus.k-hover .k-input-validation-icon, .k-picker.ng-invalid.ng-touched:focus:hover .k-input-validation-icon, .k-picker.ng-invalid.ng-touched.k-focus:hover .k-input-validation-icon, .k-picker.ng-invalid.ng-touched:focus.k-hover .k-input-validation-icon, .k-picker.ng-invalid.ng-touched.k-focus.k-hover .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty:focus:hover .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty.k-focus:hover .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty:focus.k-hover .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty.k-focus.k-hover .k-input-validation-icon {
   color: var(--kendo-input-invalid-text, var(--kendo-invalid-text, var(--kendo-error-190, inherit)));
 }
+.k-picker.k-valid, .k-picker.ng-valid.ng-touched, .k-picker.ng-valid.ng-dirty {
+  --INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, var(--kendo-valid-border, var(--kendo-success-190, inherit)) );
+}
+.k-picker.k-valid::after, .k-picker.ng-valid.ng-touched::after, .k-picker.ng-valid.ng-dirty::after {
+  border-color: var(--kendo-input-valid-border, var(--kendo-valid-border, var(--kendo-success-190, inherit)));
+}
+.k-picker.k-valid .k-input-validation-icon, .k-picker.ng-valid.ng-touched .k-input-validation-icon, .k-picker.ng-valid.ng-dirty .k-input-validation-icon {
+  color: var(--kendo-input-valid-text, var(--kendo-valid-text, var(--kendo-success-190, inherit)));
+}
+.k-picker.k-valid:focus:hover, .k-picker.k-valid.k-focus:hover, .k-picker.k-valid:focus.k-hover, .k-picker.k-valid.k-focus.k-hover, .k-picker.ng-valid.ng-touched:focus:hover, .k-picker.ng-valid.ng-touched.k-focus:hover, .k-picker.ng-valid.ng-touched:focus.k-hover, .k-picker.ng-valid.ng-touched.k-focus.k-hover, .k-picker.ng-valid.ng-dirty:focus:hover, .k-picker.ng-valid.ng-dirty.k-focus:hover, .k-picker.ng-valid.ng-dirty:focus.k-hover, .k-picker.ng-valid.ng-dirty.k-focus.k-hover {
+  --INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, var(--kendo-valid-border, var(--kendo-success-190, inherit)) );
+}
+.k-picker.k-valid:focus:hover .k-input-validation-icon, .k-picker.k-valid.k-focus:hover .k-input-validation-icon, .k-picker.k-valid:focus.k-hover .k-input-validation-icon, .k-picker.k-valid.k-focus.k-hover .k-input-validation-icon, .k-picker.ng-valid.ng-touched:focus:hover .k-input-validation-icon, .k-picker.ng-valid.ng-touched.k-focus:hover .k-input-validation-icon, .k-picker.ng-valid.ng-touched:focus.k-hover .k-input-validation-icon, .k-picker.ng-valid.ng-touched.k-focus.k-hover .k-input-validation-icon, .k-picker.ng-valid.ng-dirty:focus:hover .k-input-validation-icon, .k-picker.ng-valid.ng-dirty.k-focus:hover .k-input-validation-icon, .k-picker.ng-valid.ng-dirty:focus.k-hover .k-input-validation-icon, .k-picker.ng-valid.ng-dirty.k-focus.k-hover .k-input-validation-icon {
+  color: var(--kendo-input-valid-text, var(--kendo-valid-text, var(--kendo-success-190, inherit)));
+}
 
 .k-input-solid {
   --kendo-input-text: var( --kendo-input-solid-text, var(--kendo-neutral-160, inherit) );
@@ -34357,6 +34499,19 @@ textarea.k-input-inner {
   padding-inline: var(--kendo-dropdowntree-popup-padding-x, 0.5rem);
 }
 
+.k-multiselecttree .k-input-values {
+  width: auto;
+  max-width: 100%;
+}
+.k-multiselecttree .k-input-inner::before {
+  content: "​";
+  width: 0px;
+  overflow: hidden;
+  flex: none;
+  display: inline-block;
+  vertical-align: top;
+}
+
 .k-rating {
   margin: 0;
   padding: 0;
@@ -37068,6 +37223,7 @@ kendo-drawer .k-drawer-wrapper {
 
 .k-drawer-content {
   flex: 1 1 auto;
+  overflow: auto;
 }
 
 .k-drawer-overlay .k-drawer {