@kdcloudjs/kdesign 1.7.25 → 1.7.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/kdesign-complete.less +88 -32
  3. package/dist/kdesign.css +68 -27
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +154 -99
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +2 -2
  8. package/dist/kdesign.min.js +6 -6
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/cascader/cascader.js +64 -32
  11. package/es/cascader/style/index.css +40 -24
  12. package/es/cascader/style/index.less +49 -27
  13. package/es/cascader/style/token.less +4 -3
  14. package/es/city-picker/city-picker.js +3 -4
  15. package/es/city-picker/option.js +2 -1
  16. package/es/city-picker/style/index.css +12 -0
  17. package/es/city-picker/style/index.less +14 -0
  18. package/es/collapse/panel.js +31 -18
  19. package/es/collapse/style/index.css +4 -1
  20. package/es/collapse/style/index.less +4 -1
  21. package/es/form/Field.d.ts +1 -0
  22. package/es/form/Field.js +5 -3
  23. package/es/form/FieldWrapper.d.ts +1 -0
  24. package/es/form/FieldWrapper.js +13 -5
  25. package/es/form/style/index.css +11 -1
  26. package/es/form/style/index.less +16 -1
  27. package/es/form/style/token.less +1 -0
  28. package/es/tag/tag.d.ts +1 -0
  29. package/es/tree-select/tree-select.js +2 -1
  30. package/lib/cascader/cascader.js +63 -31
  31. package/lib/cascader/style/index.css +40 -24
  32. package/lib/cascader/style/index.less +49 -27
  33. package/lib/cascader/style/token.less +4 -3
  34. package/lib/city-picker/city-picker.js +3 -4
  35. package/lib/city-picker/option.js +2 -1
  36. package/lib/city-picker/style/index.css +12 -0
  37. package/lib/city-picker/style/index.less +14 -0
  38. package/lib/collapse/panel.js +32 -19
  39. package/lib/collapse/style/index.css +4 -1
  40. package/lib/collapse/style/index.less +4 -1
  41. package/lib/form/Field.d.ts +1 -0
  42. package/lib/form/Field.js +5 -3
  43. package/lib/form/FieldWrapper.d.ts +1 -0
  44. package/lib/form/FieldWrapper.js +13 -5
  45. package/lib/form/style/index.css +11 -1
  46. package/lib/form/style/index.less +16 -1
  47. package/lib/form/style/token.less +1 -0
  48. package/lib/tag/tag.d.ts +1 -0
  49. package/lib/tree-select/tree-select.js +2 -1
  50. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,26 @@
1
+ ## [1.7.25](https://github.com/kdcloudone/kdesign/compare/v1.7.24...v1.7.25) (2023-08-31)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * [city-picker] 新增城市选择Token fix [#555](https://github.com/kdcloudone/kdesign/issues/555) ([9e451db](https://github.com/kdcloudone/kdesign/commit/9e451db0cae93cd14c93762a57631c30904eaede))
7
+ * [city-picker] 修复切换页签导致常用面板显示异常问题 fix [#558](https://github.com/kdcloudone/kdesign/issues/558) ([ac49649](https://github.com/kdcloudone/kdesign/commit/ac49649a330470ee09726f19709a3b02803e3cec))
8
+ * [city-picker] 修复搜索后关闭下拉面板时会闪烁到常用面板问题 fix [#560](https://github.com/kdcloudone/kdesign/issues/560) ([be676f7](https://github.com/kdcloudone/kdesign/commit/be676f7530095d97119cb3bdc1ec04574dff107d))
9
+ * [city-picker] 修复下拉面板省略号显示问题 fix [#553](https://github.com/kdcloudone/kdesign/issues/553) ([a536527](https://github.com/kdcloudone/kdesign/commit/a536527274fa5da825e7505862c1d92eb6ddcc52))
10
+ * [city-picker] 修复选中项出现多余逗号问题 fix [#554](https://github.com/kdcloudone/kdesign/issues/554) ([f7c1bf4](https://github.com/kdcloudone/kdesign/commit/f7c1bf48f15bbdd8eba30d91ebb7c52d8fb22fad))
11
+ * [city-picker] 修复页签文字超出问题 fix [#562](https://github.com/kdcloudone/kdesign/issues/562) ([1bc7aa1](https://github.com/kdcloudone/kdesign/commit/1bc7aa130844fb2b70263711910d44fe521bb18e))
12
+ * [input-number] 修复传入format后中间位置输入内容后光标自动回到末尾的问题 fix [#508](https://github.com/kdcloudone/kdesign/issues/508) ([acdbdf3](https://github.com/kdcloudone/kdesign/commit/acdbdf38d216d1fe8d8b82944e08169493856678))
13
+ * [input-number] 修复输入值超出范围时失焦不触发onChange事件 fix [#464](https://github.com/kdcloudone/kdesign/issues/464) ([df9b40b](https://github.com/kdcloudone/kdesign/commit/df9b40bff73aabc56d2acf347da650fb45d03583))
14
+ * [radio]修复radio在表格中选中发生位置偏移的问题 ([e5c2d2c](https://github.com/kdcloudone/kdesign/commit/e5c2d2c7edbfa613b985b4a45eb7a42a9a823569))
15
+ * [select] 修复快捷键展开收起下拉面板不触发onVisibleChange回调问题 fix [#546](https://github.com/kdcloudone/kdesign/issues/546) ([6c9d16a](https://github.com/kdcloudone/kdesign/commit/6c9d16a63c09bd57f1122eedb61f976855acc799))
16
+
17
+
18
+ ### Features
19
+
20
+ * [city-picker] 新增国际化配置 fix [#557](https://github.com/kdcloudone/kdesign/issues/557) ([5d8a68f](https://github.com/kdcloudone/kdesign/commit/5d8a68fc8322228362c4b23f8f75e579c439218b))
21
+
22
+
23
+
1
24
  ## [1.7.24](https://github.com/kdcloudone/kdesign/compare/v1.7.23...v1.7.24) (2023-08-25)
2
25
 
3
26
 
@@ -1840,22 +1840,6 @@
1840
1840
  cursor: pointer;
1841
1841
  background: @cascader-bg-color;
1842
1842
 
1843
- &:focus > &-input {
1844
- border-color: @cascader-active-color;
1845
-
1846
- .@{kd-prefix}-input-suffix,
1847
- i[class*='kdicon'] {
1848
- color: @cascader-active-color;
1849
- }
1850
- }
1851
-
1852
- &:hover > &-input {
1853
- .@{kd-prefix}-input-suffix,
1854
- i[class*='kdicon'] {
1855
- color: @cascader-active-color;
1856
- }
1857
- }
1858
-
1859
1843
  &.disabled {
1860
1844
  .@{cascader-picker-prefix-cls}-input {
1861
1845
  cursor: not-allowed;
@@ -1882,7 +1866,7 @@
1882
1866
  }
1883
1867
 
1884
1868
  &-input {
1885
- background-color: transparent !important;
1869
+ background-color: transparent;
1886
1870
  transition: all 0.2s;
1887
1871
 
1888
1872
  > input {
@@ -1891,10 +1875,7 @@
1891
1875
  }
1892
1876
 
1893
1877
  &.expand {
1894
- border-color: @cascader-active-color;
1895
-
1896
1878
  i[class*='kdicon'] {
1897
- color: @cascader-active-color;
1898
1879
  transform: rotate(180deg);
1899
1880
  }
1900
1881
  }
@@ -1933,7 +1914,7 @@
1933
1914
  transform: scale(0.9) translateY(-50%);
1934
1915
 
1935
1916
  &:hover {
1936
- color: @cascader-active-color;
1917
+ color: @cascader-clear-color-hover;
1937
1918
  }
1938
1919
  }
1939
1920
  }
@@ -2045,6 +2026,11 @@
2045
2026
  position: relative;
2046
2027
  border-bottom: 1px solid #d9d9d9;
2047
2028
  background: @cascader-bg-color;
2029
+
2030
+ &:not(.@{kd-prefix}-cascader-disabled):focus {
2031
+ border-color: @cascader-selected-color;
2032
+ outline: none;
2033
+ }
2048
2034
  }
2049
2035
 
2050
2036
  &-multiple-wrapper {
@@ -2056,7 +2042,8 @@
2056
2042
 
2057
2043
  &-placeholder {
2058
2044
  position: absolute;
2059
- color: @select-placeholder-color;
2045
+ font-size: @middle-font-size;
2046
+ color: @cascader-placeholder-color;
2060
2047
  overflow: hidden;
2061
2048
  white-space: nowrap;
2062
2049
  text-overflow: ellipsis;
@@ -2095,10 +2082,6 @@
2095
2082
  transform: rotate(0deg);
2096
2083
  transition: transform calc(@transition-duration - 0.1s) @ease;
2097
2084
  }
2098
-
2099
- &-focus {
2100
- color: @cascader-g-color-border-foucs;
2101
- }
2102
2085
  }
2103
2086
 
2104
2087
  &-clear {
@@ -2113,6 +2096,7 @@
2113
2096
  }
2114
2097
  }
2115
2098
  }
2099
+
2116
2100
  &-tag {
2117
2101
  &-describe {
2118
2102
  font-size: 12px;
@@ -2124,7 +2108,6 @@
2124
2108
  &-content {
2125
2109
  display: inline-flex;
2126
2110
  align-items: center;
2127
- vertical-align: middle;
2128
2111
  padding: 0 7px;
2129
2112
  overflow: hidden;
2130
2113
  white-space: nowrap;
@@ -2134,6 +2117,45 @@
2134
2117
  }
2135
2118
  }
2136
2119
  }
2120
+
2121
+ &-disabled {
2122
+ cursor: not-allowed;
2123
+
2124
+ .@{kd-prefix}-cascader-picker-label {
2125
+ color: @cascader-disabled-color;
2126
+ }
2127
+
2128
+ .@{kd-prefix}-cascader-picker-input {
2129
+ background-color: @cascader-disabled-color-background;
2130
+
2131
+ > input {
2132
+ background-color: @cascader-disabled-color-background;
2133
+ }
2134
+ }
2135
+
2136
+ &.@{kd-prefix}-cascader-multiple {
2137
+ background-color: @cascader-disabled-color-background;
2138
+ }
2139
+
2140
+ .@{kd-prefix}-cascader-suffix {
2141
+ color: @cascader-disabled-color;
2142
+ }
2143
+
2144
+ .@{kd-prefix}-cascader-tag-describe-content {
2145
+ color: @cascader-tag-disabled-color;
2146
+ border-color: @cascader-tag-disabled-color;
2147
+ }
2148
+ }
2149
+
2150
+ &-picker:not(&-disabled):hover, &-expand {
2151
+ .kd-input-wrapper {
2152
+ border-color: @cascader-g-color-border-focus;
2153
+ }
2154
+ }
2155
+
2156
+ &-multiple:not(&-disabled):hover, &-expand {
2157
+ border-color: @cascader-g-color-border-focus;
2158
+ }
2137
2159
  }
2138
2160
 
2139
2161
 
@@ -2150,17 +2172,18 @@
2150
2172
  @cascader-menu-item-padding-horizontal: var(~'@{cascader-prefix}-menu-item-spacing-padding-horizontal', 12px);
2151
2173
 
2152
2174
  // colors
2153
- @cascader-active-color: var(~'@{cascader-prefix}-color-active', #999);
2154
2175
  @cascader-color: var(~'@{cascader-prefix}-color-text', @color-text-primary);
2155
2176
  @cascader-bg-color: var(~'@{cascader-prefix}-color-background', @color-white);
2156
2177
  @cascader-hover-bg-color: var(~'@{cascader-prefix}-color-background-hover', @color-hover);
2157
2178
  @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
2158
2179
  @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
2159
2180
  @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
2181
+ @cascader-disabled-color-background: var(~'@{cascader-prefix}-color-background-disabled', @color-background-contain-disabled);
2160
2182
  @cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
2161
- @cascader-g-color-border-foucs: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
2162
- @cascader-clear-color: var(~'@{cascader-prefix}-icon-clear-color-text', #d9d9d9);
2163
2183
  @cascader-clear-color-hover: var(~'@{cascader-prefix}-icon-clear-color-text-hover', #999);
2184
+ @cascader-g-color-border-focus: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
2185
+ @cascader-tag-disabled-color: var(~'@{cascader-prefix}-tag-disabled-color', #d9d9d9);
2186
+ @cascader-placeholder-color: var(~'@{cascader-prefix}-placeholder-color', @color-text-placeholder);
2164
2187
 
2165
2188
  // font
2166
2189
  @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);
@@ -2501,6 +2524,9 @@
2501
2524
  display: flex;
2502
2525
  flex-direction: column;
2503
2526
 
2527
+ &-selector {
2528
+ width: 100%;
2529
+ }
2504
2530
  &-selector:hover {
2505
2531
  .@{city-picker-prefix-cls}-icon-active {
2506
2532
  color: #3761ca;
@@ -2712,6 +2738,10 @@
2712
2738
  &-selected:not(&-disabled) {
2713
2739
  background-color: @city-picker-item-selected-bg;
2714
2740
  color: @city-picker-list-item-color-selected;
2741
+
2742
+ .@{city-picker-prefix-cls}-list-item-info {
2743
+ color: @city-picker-list-item-color-selected;
2744
+ }
2715
2745
  }
2716
2746
 
2717
2747
  &-disabled {
@@ -2720,6 +2750,13 @@
2720
2750
  background-color: @city-picker-disabled-option-bg;
2721
2751
  }
2722
2752
  }
2753
+
2754
+ & > .@{city-picker-prefix-cls}-list-item-match {
2755
+ color: @city-picker-font-color;
2756
+ .@{city-picker-prefix-cls}-list-item-info {
2757
+ color: @city-picker-placeholder-color;
2758
+ }
2759
+ }
2723
2760
  }
2724
2761
 
2725
2762
  &-highlight {
@@ -2914,9 +2951,12 @@
2914
2951
  &-panel:last-child {
2915
2952
  border-top: none;
2916
2953
  }
2917
- &-panel:first-child {
2954
+ &-panel-border&-panel:first-child {
2918
2955
  border-top: @collapse-border-width solid @collapse-border-color;
2919
2956
  }
2957
+ &-panel-border&-panel:not(:nth-child(1)) {
2958
+ border-top: none;
2959
+ }
2920
2960
  &-panel {
2921
2961
  display: inline-flex;
2922
2962
  flex-direction: column;
@@ -5038,6 +5078,10 @@
5038
5078
  &-hidden {
5039
5079
  display: none !important;
5040
5080
  }
5081
+
5082
+ &-extra {
5083
+ margin-bottom: calc(@form-field-spacing-margin-bottom * 2);
5084
+ }
5041
5085
  }
5042
5086
 
5043
5087
  .@{field-label-cls} {
@@ -5068,7 +5112,8 @@
5068
5112
 
5069
5113
  .@{field-wrapper-cls} {
5070
5114
  position: relative;
5071
- &-message {
5115
+
5116
+ &-message, &-extra {
5072
5117
  position: absolute;
5073
5118
  left: -7px;
5074
5119
  right: 0;
@@ -5081,6 +5126,16 @@
5081
5126
  white-space: nowrap;
5082
5127
  text-overflow: ellipsis;
5083
5128
  }
5129
+
5130
+ &-extra {
5131
+ &-message {
5132
+ color: @form-error-color;
5133
+ }
5134
+
5135
+ &-text {
5136
+ color: @form-extra-color;
5137
+ }
5138
+ }
5084
5139
  }
5085
5140
 
5086
5141
 
@@ -5090,6 +5145,7 @@
5090
5145
  // color
5091
5146
  @form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
5092
5147
  @form-error-color: var(~'@{form-prefix}-error-color', @color-error);
5148
+ @form-extra-color: var(~'@{form-prefix}-extra-color', @color-text-third);
5093
5149
 
5094
5150
  // font
5095
5151
  @form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);
package/dist/kdesign.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  *
3
- * @kdcloudjs/kdesign v1.7.24
3
+ * @kdcloudjs/kdesign v1.7.25
4
4
  *
5
5
  * Copyright 2020-present, Kingdee, Inc.
6
6
  * All rights reserved.
@@ -4549,17 +4549,6 @@ template {
4549
4549
  cursor: pointer;
4550
4550
  background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
4551
4551
  }
4552
- .kd-cascader-picker:focus > .kd-cascader-picker-input {
4553
- border-color: var(--kd-c-cascader-color-active, #999);
4554
- }
4555
- .kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
4556
- .kd-cascader-picker:focus > .kd-cascader-picker-input i[class*='kdicon'] {
4557
- color: var(--kd-c-cascader-color-active, #999);
4558
- }
4559
- .kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
4560
- .kd-cascader-picker:hover > .kd-cascader-picker-input i[class*='kdicon'] {
4561
- color: var(--kd-c-cascader-color-active, #999);
4562
- }
4563
4552
  .kd-cascader-picker.disabled .kd-cascader-picker-input {
4564
4553
  cursor: not-allowed;
4565
4554
  border-color: var(--kd-g-color-border-strong, #d9d9d9);
@@ -4585,7 +4574,7 @@ template {
4585
4574
  text-overflow: ellipsis;
4586
4575
  }
4587
4576
  .kd-cascader-picker-input {
4588
- background-color: transparent !important;
4577
+ background-color: transparent;
4589
4578
  -webkit-transition: all 0.2s;
4590
4579
  transition: all 0.2s;
4591
4580
  }
@@ -4593,11 +4582,7 @@ template {
4593
4582
  color: transparent !important;
4594
4583
  cursor: pointer;
4595
4584
  }
4596
- .kd-cascader-picker-input.expand {
4597
- border-color: var(--kd-c-cascader-color-active, #999);
4598
- }
4599
4585
  .kd-cascader-picker-input.expand i[class*='kdicon'] {
4600
- color: var(--kd-c-cascader-color-active, #999);
4601
4586
  -webkit-transform: rotate(180deg);
4602
4587
  transform: rotate(180deg);
4603
4588
  }
@@ -4627,7 +4612,7 @@ template {
4627
4612
  opacity: 0;
4628
4613
  cursor: pointer;
4629
4614
  visibility: hidden;
4630
- color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
4615
+ color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
4631
4616
  -webkit-transition: all 0.1s;
4632
4617
  transition: all 0.1s;
4633
4618
  -webkit-transform-origin: 50% 50%;
@@ -4636,7 +4621,7 @@ template {
4636
4621
  transform: scale(0.9) translateY(-50%);
4637
4622
  }
4638
4623
  .kd-cascader-picker-close:hover {
4639
- color: var(--kd-c-cascader-color-active, #999);
4624
+ color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
4640
4625
  }
4641
4626
  .kd-cascader-menus {
4642
4627
  -webkit-box-sizing: border-box;
@@ -4749,6 +4734,10 @@ template {
4749
4734
  border-bottom: 1px solid #d9d9d9;
4750
4735
  background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
4751
4736
  }
4737
+ .kd-cascader-multiple:not(.kd-cascader-disabled):focus {
4738
+ border-color: var(--kd-c-cascader-color-text-selected, var(--kd-g-color-theme, #5582f3));
4739
+ outline: none;
4740
+ }
4752
4741
  .kd-cascader-multiple-wrapper {
4753
4742
  display: -webkit-box;
4754
4743
  display: -ms-flexbox;
@@ -4762,7 +4751,8 @@ template {
4762
4751
  }
4763
4752
  .kd-cascader-placeholder {
4764
4753
  position: absolute;
4765
- color: #999;
4754
+ font-size: 14px;
4755
+ color: var(--kd-c-cascader-placeholder-color, var(--kd-g-color-text-placeholder, #ccc));
4766
4756
  overflow: hidden;
4767
4757
  white-space: nowrap;
4768
4758
  text-overflow: ellipsis;
@@ -4817,9 +4807,6 @@ template {
4817
4807
  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
4818
4808
  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
4819
4809
  }
4820
- .kd-cascader-icon-arrow-focus {
4821
- color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
4822
- }
4823
4810
  .kd-cascader-icon-clear {
4824
4811
  opacity: 0;
4825
4812
  z-index: 1;
@@ -4827,7 +4814,7 @@ template {
4827
4814
  background: #fff;
4828
4815
  -webkit-transition: opacity 0.15s ease;
4829
4816
  transition: opacity 0.15s ease;
4830
- color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
4817
+ color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
4831
4818
  }
4832
4819
  .kd-cascader-icon-clear:hover {
4833
4820
  color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
@@ -4849,7 +4836,6 @@ template {
4849
4836
  -webkit-box-align: center;
4850
4837
  -ms-flex-align: center;
4851
4838
  align-items: center;
4852
- vertical-align: middle;
4853
4839
  padding: 0 7px;
4854
4840
  overflow: hidden;
4855
4841
  white-space: nowrap;
@@ -4857,6 +4843,36 @@ template {
4857
4843
  border: 1px solid #ccc;
4858
4844
  color: #212121;
4859
4845
  }
4846
+ .kd-cascader-disabled {
4847
+ cursor: not-allowed;
4848
+ }
4849
+ .kd-cascader-disabled .kd-cascader-picker-label {
4850
+ color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
4851
+ }
4852
+ .kd-cascader-disabled .kd-cascader-picker-input {
4853
+ background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
4854
+ }
4855
+ .kd-cascader-disabled .kd-cascader-picker-input > input {
4856
+ background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
4857
+ }
4858
+ .kd-cascader-disabled.kd-cascader-multiple {
4859
+ background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
4860
+ }
4861
+ .kd-cascader-disabled .kd-cascader-suffix {
4862
+ color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
4863
+ }
4864
+ .kd-cascader-disabled .kd-cascader-tag-describe-content {
4865
+ color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
4866
+ border-color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
4867
+ }
4868
+ .kd-cascader-picker:not(.kd-cascader-disabled):hover .kd-input-wrapper,
4869
+ .kd-cascader-expand .kd-input-wrapper {
4870
+ border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
4871
+ }
4872
+ .kd-cascader-multiple:not(.kd-cascader-disabled):hover,
4873
+ .kd-cascader-expand {
4874
+ border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
4875
+ }
4860
4876
 
4861
4877
  /* ----------- color ——————---- start */
4862
4878
  /* ----------- color ——————---- end */
@@ -5384,6 +5400,9 @@ template {
5384
5400
  -ms-flex-direction: column;
5385
5401
  flex-direction: column;
5386
5402
  }
5403
+ .kd-city-picker-selector {
5404
+ width: 100%;
5405
+ }
5387
5406
  .kd-city-picker-selector:hover .kd-city-picker-icon-active {
5388
5407
  color: #3761ca;
5389
5408
  }
@@ -5604,11 +5623,20 @@ template {
5604
5623
  background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
5605
5624
  color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
5606
5625
  }
5626
+ .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) .kd-city-picker-list-item-info {
5627
+ color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
5628
+ }
5607
5629
  .kd-city-picker-list-item-disabled {
5608
5630
  color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
5609
5631
  cursor: not-allowed;
5610
5632
  background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
5611
5633
  }
5634
+ .kd-city-picker-list > .kd-city-picker-list-item-match {
5635
+ color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
5636
+ }
5637
+ .kd-city-picker-list > .kd-city-picker-list-item-match .kd-city-picker-list-item-info {
5638
+ color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
5639
+ }
5612
5640
  .kd-city-picker-highlight {
5613
5641
  color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
5614
5642
  }
@@ -5837,9 +5865,12 @@ template {
5837
5865
  .kd-collapse-panel:last-child {
5838
5866
  border-top: none;
5839
5867
  }
5840
- .kd-collapse-panel:first-child {
5868
+ .kd-collapse-panel-border.kd-collapse-panel:first-child {
5841
5869
  border-top: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
5842
5870
  }
5871
+ .kd-collapse-panel-border.kd-collapse-panel:not(:nth-child(1)) {
5872
+ border-top: none;
5873
+ }
5843
5874
  .kd-collapse-panel {
5844
5875
  display: -webkit-inline-box;
5845
5876
  display: -ms-inline-flexbox;
@@ -8421,6 +8452,9 @@ template {
8421
8452
  .kd-form-field-hidden {
8422
8453
  display: none !important;
8423
8454
  }
8455
+ .kd-form-field-extra {
8456
+ margin-bottom: calc(var(--kd-c-form-field-spacing-margin-bottom, 22px) * 2);
8457
+ }
8424
8458
  .kd-form-field-label {
8425
8459
  font-size: var(--kd-c-form-field-label-font-size, 12px);
8426
8460
  line-height: var(--kd-c-form-field-label-line-height, 18px);
@@ -8447,7 +8481,8 @@ template {
8447
8481
  .kd-form-field-wrapper {
8448
8482
  position: relative;
8449
8483
  }
8450
- .kd-form-field-wrapper-message {
8484
+ .kd-form-field-wrapper-message,
8485
+ .kd-form-field-wrapper-extra {
8451
8486
  position: absolute;
8452
8487
  left: -7px;
8453
8488
  right: 0;
@@ -8460,6 +8495,12 @@ template {
8460
8495
  white-space: nowrap;
8461
8496
  text-overflow: ellipsis;
8462
8497
  }
8498
+ .kd-form-field-wrapper-extra-message {
8499
+ color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
8500
+ }
8501
+ .kd-form-field-wrapper-extra-text {
8502
+ color: var(--kd-c-form-extra-color, var(--kd-g-color-text-third, #999));
8503
+ }
8463
8504
 
8464
8505
  /* ----------- color ——————---- start */
8465
8506
  /* ----------- color ——————---- end */