@kdcloudjs/kdesign 1.7.22 → 1.7.23

package/dist/kdesign-complete.less

@@ -1026,7 +1026,7 @@
 
   // 小号尺寸按钮
   &-size-small {
-    .btn-size(@btn-small-height, @btn-small-font-size, @btn-small-padding-vertical, @btn-small-padding-horizontal, @btn-small-min-width);
+    .btn-size(@btn-small-height, @btn-small-font-size, @btn-small-padding-vertical, @btn-small-padding-horizontal, @btn-small-min-width, @btn-small-max-width);
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-small-font-size;
       padding: 0 @btn-icon-padding-horizontal;
@@ -1042,7 +1042,7 @@
 
   // 中号尺寸按钮
   &-size-middle {
-    .btn-size(@btn-middle-height, @btn-middle-font-size, @btn-middle-padding-vertical, @btn-middle-padding-horizontal, @btn-middle-min-width);
+    .btn-size(@btn-middle-height, @btn-middle-font-size, @btn-middle-padding-vertical, @btn-middle-padding-horizontal, @btn-middle-min-width, @btn-middle-max-width);
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-middle-font-size;
       padding: 0 @btn-icon-padding-horizontal;
@@ -1058,7 +1058,7 @@
 
   // 大号尺寸按钮
   &-size-large {
-    .btn-size(@btn-large-height, @btn-large-font-size, @btn-large-padding-vertical, @btn-large-padding-horizontal, @btn-large-min-width);
+    .btn-size(@btn-large-height, @btn-large-font-size, @btn-large-padding-vertical, @btn-large-padding-horizontal, @btn-large-min-width, @btn-large-max-width);
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-large-font-size;
       padding: 0 @btn-icon-padding-horizontal;
@@ -1302,12 +1302,13 @@
 	color: @color;
 }
 // 各个按钮尺寸的样式Mixins
-.btn-size(@height, @font-size, @padding-vertical, @padding-horizontal, @min-width) {
+.btn-size(@height, @font-size, @padding-vertical, @padding-horizontal, @min-width,@max-width) {
 	height: @height;
 	min-width: @min-width;
 	line-height: calc(@height - (@padding-vertical * 2) - (@btn-border-width * 2));
 	font-size: @font-size;
 	padding: @padding-vertical @padding-horizontal;
+	max-width: @max-width;
 }
 // 圆形按钮不同尺寸的样式Mixins
 .btn-shape-circle-width(@width) {
@@ -1405,11 +1406,14 @@
 @btn-border-width: var(~'@{button-custom-prefix}-sizing-border', 1px);
 @btn-small-height: var(~'@{button-custom-prefix}-sizing-height-small', 24px); // 小号 高度
 @btn-small-min-width: var(~'@{button-custom-prefix}-sizing-min-width-small', 60px); // 小号 最小宽度
+@btn-small-max-width: var(~'@{button-custom-prefix}-sizing-max-width-small'); // 小号 最大宽度
 @btn-middle-height: var(~'@{button-custom-prefix}-sizing-height-middle', 28px); // 中号 高度     高度配置
 @btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-width-middle', 60px); // 中号 最小宽度
+@btn-middle-max-width: var(~'@{button-custom-prefix}-sizing-max-width-middle'); // 中号 最大宽度
 @btn-large-height: var(~'@{button-custom-prefix}-sizing-height-large', 32px); // 大号 高度
 @btn-middle-max-width: var(~'@{button-custom-prefix}-sizing-max-width-middle'); // 中号 最大宽度
 @btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-width-large', 80px); // 大号 最小宽度
+@btn-large-max-width: var(~'@{button-custom-prefix}-sizing-max-width-large'); // 大号 最大宽度
 @btn-group-dropdown-item-height: var(~'@{button-custom-prefix}--group-dropdown-item-height', 30px);
 @btn-group-dropdown-min-width: var(~'@{button-custom-prefix}-group-dropdown-min-width', 80px);
 
@@ -2211,6 +2215,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    max-width: @checkbox-default-input-label-max-width;
 
     .kd-input-underline {
       background-color: transparent;
@@ -2466,6 +2471,7 @@
 @checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height', 14px); // 勾选输入框高度
 @checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width', 14px); // 勾选输入框宽度
 @checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width', 1px); // 勾选输入框边框大小 不需要
+@checkbox-default-input-label-max-width: var(~'@{checkbox-prefix}-default-input-label-max-width'); // 勾选输入框便签文本最大宽度，默认为未设置。
 @checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height', 18px); // 边框类型右下角三角高度
 @checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width', 18px); // 边框类型右下角三角宽度
 @checkbox-default-indeterminate-square: var(~'@{checkbox-prefix}-default-indeterminate-sizing-square', 6px); // 半选框的大小
@@ -4713,6 +4719,7 @@
       &-item-text {
         max-width: 224px;
         .ellipsis;
+        display: block;
       }
     }
 
@@ -4807,6 +4814,7 @@
         padding: 11px 0 10px;
         color: @color-text-third;
         line-height: 18px;
+        width: @filter-body-condition-label-width;
       }
 
       &-options {
@@ -4831,6 +4839,11 @@
         border: 1px solid transparent;
         cursor: pointer;
         white-space: nowrap;
+        max-width: @filter-body-condition-option-max-width;
+        overflow: hidden;
+        display: inline-block;
+        text-overflow: ellipsis;
+
 
         &:not(:last-child) {
           margin-right: 24px;
@@ -4971,6 +4984,10 @@
 @filter-handle-font-size: var(~'@{filter-custom-prefix}-handle-font-size', @font-size-middle);
 @filter-body-tabs-item-font-size: var(~'@{filter-custom-prefix}-body-tabs-item-font-size', @font-size-middle);
 
+//sizing
+@filter-body-condition-label-width: var(~'@{filter-custom-prefix}-body-condition-label-width');
+@filter-body-condition-option-max-width: var(~'@{filter-custom-prefix}-body-condition-option-max-width');
+
 
 
 
@@ -5012,7 +5029,7 @@
     flex-direction: column;
 
     .@{field-label-cls} {
-      margin-bottom: 5px;
+      margin-bottom: @form-field-label-spacing-margin-bottom;
     }
   }
 
@@ -5085,7 +5102,7 @@
 @form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
 @form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
 @form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
-
+@form-field-label-spacing-margin-bottom: var(~'@{form-prefix}-field-label-spacing-margin-bottom', 5px);
 
 
 
@@ -6791,7 +6808,8 @@ textarea {
   position: relative;
   width: 100%;
   height: 100%;
-  min-width: 138px;
+  min-width: @menu-min-width;
+  max-width: @menu-max-width;
   background-color: @menu-color-background;
   color: @menu-sub-color;
 }
@@ -6968,6 +6986,8 @@ textarea {
 @menu-motion-duration: var(~'@{menu-prefix}-motion-duration', @duration-promptly);
 
 // sizing
+@menu-max-width: var(~'@{menu-prefix}-sizing-max-width');
+@menu-min-width: var(~'@{menu-prefix}-sizing-min-width',138px);
 @menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
 
 // z-index
@@ -8543,6 +8563,8 @@ textarea {
   vertical-align: middle;
   color: @radio-font-color;
   font-size: @radio-font-size;
+  max-width: @radio-default-label-max-width;
+  overflow: hidden;
 
   &::before {
     position: absolute;
@@ -8673,6 +8695,7 @@ textarea {
   border-radius: @radius-size;
   border: @radio-border-width solid @radio-color-border;
   transition: all @transition-duration;
+  max-width: @radio-square-label-max-width;
 
   &::after {
     position: absolute;
@@ -8762,7 +8785,7 @@ textarea {
 // 按钮类型（切换按钮）
 .@{radio-button-prefix-cls} {
   .reset-component();
-
+  .ellipsis();
   // 默认状态
   position: relative;
   display: inline-block;
@@ -8780,6 +8803,7 @@ textarea {
   border: @radio-border-width solid @radio-color-border;
   border-left: none;
   transition: all @transition-duration;
+  max-width: @radio-button-label-max-width;
 
   &:first-child {
     border-radius: @radius-size 0 0 @radius-size;
@@ -8905,6 +8929,9 @@ textarea {
 // sizing
 @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',14px);//单选图标大小
 @radio-square-height:  var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
+@radio-default-label-max-width:  var(~'@{radio-prefix}-default-label-max-width');//单选默认模式 最大宽度
+@radio-square-label-max-width:  var(~'@{radio-prefix}-square-label-max-width');//单选框模式 最大宽度
+@radio-button-label-max-width:  var(~'@{radio-prefix}-button-label-max-width');//单选按 最大宽度
 
 // spacing
 @radio-margin-right:   var(~'@{radio-prefix}-spacing-margin-right',8px);
@@ -9155,6 +9182,7 @@ textarea {
         padding: 0 4px;
         align-self: center;
         .ellipsis();
+        max-width: @search-tag-max-width;
       }
       &-del {
         height: 14px;
@@ -9581,6 +9609,7 @@ textarea {
 @search-panel-height: var(~'@{search-prefix}-panel-sizing-height', 60px);
 @quick-search-dropdown-option-height: var(~'@{search-prefix}-dropdown-option-sizing-height', 32px);
 @search-sizing-border-width: var(~'@{search-prefix}-sizing-border-width', 1px);
+@search-tag-max-width: var(~'@{search-prefix}-tag-sizing-max-width');
 
 // color
 @search-icon-color: var(~'@{search-prefix}-icon-color', #B2B2B2);
@@ -13692,15 +13721,15 @@ template {
   }
 
   &-size-small {
-    .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal);
+    .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   &-size-middle {
-    .tag-size(@tag-middle-font-size, @tag-middle-height, @tag-middle-padding-horizontal);
+    .tag-size(@tag-middle-font-size, @tag-middle-height, @tag-middle-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   &-size-large {
-    .tag-size(@tag-large-font-size, @tag-large-height, @tag-large-padding-horizontal);
+    .tag-size(@tag-large-font-size, @tag-large-height, @tag-large-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   transition: all @tag-g-motion-duration;
@@ -13813,7 +13842,7 @@ template {
 
 
 // code component mixin here
-.tag-size(@size, @height, @padding) {
+.tag-size(@size, @height, @padding, @max-width, @min-width) {
   font-size: @size;
   height: @height;
   box-sizing: border-box;
@@ -13822,6 +13851,8 @@ template {
   vertical-align: middle;
   padding: 0 @padding;
   border-radius:  calc(@height / 2);
+  max-width: @max-width;
+  min-width: @min-width;
 }
 .tag-status(@color) {
   border: 1px solid @color;
@@ -13880,6 +13911,8 @@ template {
 @tag-small-height: var(~'@{tag-custom-prefix}-sizing-height-small', 20px);
 @tag-middle-height: var(~'@{tag-custom-prefix}-sizing-height-middle', 20px);
 @tag-large-height: var(~'@{tag-custom-prefix}-sizing-height-large', 24px);
+@tag-max-width: var(~'@{tag-custom-prefix}-sizing-max-width');
+@tag-min-width: var(~'@{tag-custom-prefix}-sizing-min-width');
 
 // spacing
 @tag-small-padding-horizontal: var(~'@{tag-custom-prefix}-spacing-padding-horizontal-small', 6px);
@@ -13901,6 +13934,7 @@ template {
   overflow: hidden;
   list-style: none;
 
+
   .@{timeline-item-prefix-cls} {
     .reset-component;
     position: relative;
@@ -13972,6 +14006,8 @@ template {
       margin: 0 0 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap);
       word-break: break-word;
       color: @timeline-content-color-text;
+      max-width: @timeline-content-max-width;
+      min-width: @timeline-content-min-width;
 
       > * {
         margin: 0;
@@ -14171,6 +14207,8 @@ template {
 
 // sizing
 @timeline-width: var(~'@{timeline-prefix}-sizing-width',1px);
+@timeline-content-max-width: var(~'@{timeline-prefix}-content-sizing-max-width');
+@timeline-content-min-width: var(~'@{timeline-prefix}-content-sizing-min-width');
 
 // spacing
 @timeline-item-padding-bottom: var(~'@{timeline-prefix}-spacing-padding-bottom',24px);
@@ -14260,12 +14298,12 @@ template {
   &-list {
     display: flex;
     flex-direction: column;
-    width: 250px;
+    width: @transfer-list-width;
     min-height: 300px;
     border: 1px solid @transfer-border-color;
 
     &-with-pagination {
-      width: 250px;
+      width: @transfer-list-width;
       height: auto;
     }
 
@@ -14445,6 +14483,7 @@ template {
 @transfer-header-height: var(~'@{transfer-custom-prefix}-header-sizing-height', 36px);
 @transfer-search-height: var(~'@{transfer-custom-prefix}-search-sizing-height', 32px);
 @transfer-pagination-height: var(~'@{transfer-custom-prefix}-pagination-sizing-height', 36px);
+@transfer-list-width: var(~'@{transfer-custom-prefix}-list-sizing-width', 250px);
 
 // spacing
 @transfer-padding-base: var(~'@{transfer-custom-prefix}-spacing-horizontal', 14px);
@@ -14470,6 +14509,8 @@ template {
   color: @tree-color-text;
   margin-left: @tree-margin-left;
   padding: @tree-padding-vertical 0;
+  max-width: @tree-root-max-width;
+  min-width: @tree-root-min-width;
   &-root {
     min-width: 100%;
     flex-shrink: 0;
@@ -14684,6 +14725,8 @@ template {
 @tree-expand-icon-loading-width: var(~'@{tree-prefix}-expand-icon-loading-sizing-width', 16px);
 @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 16px);
 @tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 16px);
+@tree-root-max-width: var(~'@{tree-prefix}-root-sizing-max-width');
+@tree-root-min-width: var(~'@{tree-prefix}-root-sizing-min-width');
 
 // spacing
 @tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 0px);

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.7.21
+ *   @kdcloudjs/kdesign v1.7.22
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -3600,6 +3600,7 @@ template {
   line-height: calc(var(--kd-c-button-sizing-height-small, 24px) - (var(--kd-c-button-spacing-padding-vertical-small, 3px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
   font-size: var(--kd-c-button-font-size-small, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-button-spacing-padding-vertical-small, 3px) var(--kd-c-button-spacing-padding-horizontal-small, 8px);
+  max-width: var(--kd-c-button-sizing-max-width-small);
 }
 .kd-btn-size-small.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-small, 14px);
@@ -3623,6 +3624,7 @@ template {
   line-height: calc(var(--kd-c-button-sizing-height-middle, 28px) - (var(--kd-c-button-spacing-padding-vertical-middle, 5px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
   font-size: var(--kd-c-button-font-size-middle, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-button-spacing-padding-vertical-middle, 5px) var(--kd-c-button-spacing-padding-horizontal-middle, 8px);
+  max-width: var(--kd-c-button-sizing-max-width-middle);
 }
 .kd-btn-size-middle.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-middle, 16px);
@@ -3646,6 +3648,7 @@ template {
   line-height: calc(var(--kd-c-button-sizing-height-large, 32px) - (var(--kd-c-button-spacing-padding-vertical-large, 6px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
   font-size: var(--kd-c-button-font-size-large, var(--kd-g-font-size-large, 16px));
   padding: var(--kd-c-button-spacing-padding-vertical-large, 6px) var(--kd-c-button-spacing-padding-horizontal-large, 8px);
+  max-width: var(--kd-c-button-sizing-max-width-large);
 }
 .kd-btn-size-large.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-large, 18px);
@@ -4987,6 +4990,7 @@ template {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  max-width: var(--kd-c-checkbox-default-input-label-max-width);
 }
 .kd-checkbox-children .kd-input-underline {
   background-color: transparent;
@@ -8007,6 +8011,7 @@ template {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: block;
 }
 .kd-filter .kd-filter-header-search {
   min-width: 200px;
@@ -8102,6 +8107,7 @@ template {
   padding: 11px 0 10px;
   color: var(--kd-g-color-text-third, #999);
   line-height: 18px;
+  width: var(--kd-c-filter-body-condition-label-width);
 }
 .kd-filter .kd-filter-body-condition-options {
   display: -webkit-box;
@@ -8131,6 +8137,10 @@ template {
   border: 1px solid transparent;
   cursor: pointer;
   white-space: nowrap;
+  max-width: var(--kd-c-filter-body-condition-option-max-width);
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
 }
 .kd-filter .kd-filter-body-condition-option:not(:last-child) {
   margin-right: 24px;
@@ -8370,7 +8380,7 @@ template {
           flex-direction: column;
 }
 .kd-form-field-vertical .kd-form-field-label {
-  margin-bottom: 5px;
+  margin-bottom: var(--kd-c-form-field-label-spacing-margin-bottom, 5px);
 }
 .kd-form-field-hidden {
   display: none !important;
@@ -10857,7 +10867,8 @@ textarea {
   position: relative;
   width: 100%;
   height: 100%;
-  min-width: 138px;
+  min-width: var(--kd-c-menu-sizing-min-width, 138px);
+  max-width: var(--kd-c-menu-sizing-max-width);
   background-color: var(--kd-c-menu-color-background, #343848);
   color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
@@ -13474,6 +13485,8 @@ textarea {
   vertical-align: middle;
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
+  max-width: var(--kd-c-radio-default-label-max-width);
+  overflow: hidden;
 }
 .kd-radio::before {
   position: absolute;
@@ -13605,6 +13618,7 @@ textarea {
   border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  max-width: var(--kd-c-radio-square-label-max-width);
 }
 .kd-radio-square::after {
   position: absolute;
@@ -13697,6 +13711,9 @@ textarea {
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   position: relative;
   display: inline-block;
   height: var(--kd-c-radio-square-sizing-height, 32px);
@@ -13714,6 +13731,7 @@ textarea {
   border-left: none;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  max-width: var(--kd-c-radio-button-label-max-width);
 }
 .kd-radio-button:first-child {
   border-radius: 2px 0 0 2px;
@@ -14346,6 +14364,7 @@ textarea {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  max-width: var(--kd-c-search-tag-sizing-max-width);
 }
 .kd-quick-search-selection-overflow-item-del {
   height: 14px;
@@ -18068,6 +18087,8 @@ textarea {
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
   border-radius: calc(var(--kd-c-tag-sizing-height-small, 20px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-size-middle {
   font-size: var(--kd-c-tag-font-size-middle, var(--kd-g-font-size-small, 12px));
@@ -18083,6 +18104,8 @@ textarea {
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
   border-radius: calc(var(--kd-c-tag-sizing-height-middle, 20px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-size-large {
   font-size: var(--kd-c-tag-font-size-large, var(--kd-g-font-size-middle, 14px));
@@ -18098,6 +18121,8 @@ textarea {
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
   border-radius: calc(var(--kd-c-tag-sizing-height-large, 24px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-shape-status {
   border: 1px solid var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
@@ -18647,6 +18672,8 @@ textarea {
   margin: 0 0 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
   word-break: break-word;
   color: var(--kd-c-timeline-content-color-text, var(--kd-g-color-text-primary, #212121));
+  max-width: var(--kd-c-timeline-content-sizing-max-width);
+  min-width: var(--kd-c-timeline-content-sizing-min-width);
 }
 .kd-timeline .kd-timeline-item-content > * {
   margin: 0;
@@ -19101,12 +19128,12 @@ textarea {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  width: 250px;
+  width: var(--kd-c-transfer-list-sizing-width, 250px);
   min-height: 300px;
   border: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-transfer-list-with-pagination {
-  width: 250px;
+  width: var(--kd-c-transfer-list-sizing-width, 250px);
   height: auto;
 }
 .kd-transfer-list-header {
@@ -19962,6 +19989,8 @@ textarea {
   color: var(--kd-c-tree-color-text, var(--kd-g-color-text-primary, #212121));
   margin-left: var(--kd-c-tree-spacing-margin-left, 0px);
   padding: var(--kd-c-tree-spacing-padding-vertical, 3px) 0;
+  max-width: var(--kd-c-tree-root-sizing-max-width);
+  min-width: var(--kd-c-tree-root-sizing-min-width);
 }
 .kd-tree-root {
   min-width: 100%;