@taiga-ui/core 4.6.0 → 4.7.0-canary.5ce088a

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 (65) hide show
  1. package/components/calendar/calendar-sheet.component.d.ts +3 -3
  2. package/components/calendar/calendar-year.component.d.ts +3 -6
  3. package/components/data-list/data-list.component.d.ts +2 -0
  4. package/components/textfield/select.directive.d.ts +4 -4
  5. package/components/textfield/textfield.component.d.ts +3 -1
  6. package/components/textfield/textfield.directive.d.ts +11 -8
  7. package/directives/appearance/appearance.bindings.d.ts +3 -0
  8. package/directives/appearance/appearance.directive.d.ts +7 -2
  9. package/directives/appearance/appearance.options.d.ts +2 -1
  10. package/directives/appearance/with-appearance.d.ts +1 -1
  11. package/directives/dropdown/dropdown-options.directive.d.ts +1 -1
  12. package/directives/hint/hint-describe.directive.d.ts +1 -0
  13. package/directives/hint/hint-options.directive.d.ts +1 -1
  14. package/esm2022/components/calendar/calendar-sheet.component.mjs +27 -29
  15. package/esm2022/components/calendar/calendar-year.component.mjs +20 -50
  16. package/esm2022/components/data-list/data-list.component.mjs +10 -4
  17. package/esm2022/components/root/root.component.mjs +8 -2
  18. package/esm2022/components/textfield/select.directive.mjs +2 -3
  19. package/esm2022/components/textfield/textfield.component.mjs +9 -5
  20. package/esm2022/components/textfield/textfield.directive.mjs +11 -7
  21. package/esm2022/directives/appearance/appearance.bindings.mjs +4 -1
  22. package/esm2022/directives/appearance/appearance.directive.mjs +24 -7
  23. package/esm2022/directives/appearance/appearance.options.mjs +1 -1
  24. package/esm2022/directives/appearance/with-appearance.mjs +3 -2
  25. package/esm2022/directives/dropdown/dropdown-options.directive.mjs +3 -2
  26. package/esm2022/directives/group/group.directive.mjs +2 -2
  27. package/esm2022/directives/hint/hint-describe.directive.mjs +5 -4
  28. package/esm2022/directives/hint/hint-options.directive.mjs +3 -2
  29. package/esm2022/pipes/flag/flag.pipe.mjs +1 -1
  30. package/fesm2022/taiga-ui-core-components-calendar.mjs +44 -76
  31. package/fesm2022/taiga-ui-core-components-calendar.mjs.map +1 -1
  32. package/fesm2022/taiga-ui-core-components-data-list.mjs +9 -3
  33. package/fesm2022/taiga-ui-core-components-data-list.mjs.map +1 -1
  34. package/fesm2022/taiga-ui-core-components-root.mjs +7 -1
  35. package/fesm2022/taiga-ui-core-components-root.mjs.map +1 -1
  36. package/fesm2022/taiga-ui-core-components-textfield.mjs +19 -12
  37. package/fesm2022/taiga-ui-core-components-textfield.mjs.map +1 -1
  38. package/fesm2022/taiga-ui-core-directives-appearance.mjs +29 -8
  39. package/fesm2022/taiga-ui-core-directives-appearance.mjs.map +1 -1
  40. package/fesm2022/taiga-ui-core-directives-dropdown.mjs +2 -2
  41. package/fesm2022/taiga-ui-core-directives-dropdown.mjs.map +1 -1
  42. package/fesm2022/taiga-ui-core-directives-group.mjs +2 -2
  43. package/fesm2022/taiga-ui-core-directives-group.mjs.map +1 -1
  44. package/fesm2022/taiga-ui-core-directives-hint.mjs +5 -4
  45. package/fesm2022/taiga-ui-core-directives-hint.mjs.map +1 -1
  46. package/fesm2022/taiga-ui-core-pipes-flag.mjs.map +1 -1
  47. package/package.json +324 -324
  48. package/pipes/flag/flag.pipe.d.ts +6 -3
  49. package/styles/components/appearance.less +5 -1
  50. package/styles/components/group.less +6 -5
  51. package/styles/components/textfield.less +16 -7
  52. package/styles/mixins/date-picker.less +152 -0
  53. package/styles/mixins/picker.less +1 -0
  54. package/styles/mixins/picker.scss +1 -0
  55. package/styles/taiga-ui-local.less +1 -0
  56. package/styles/theme/appearance/floating.less +2 -2
  57. package/styles/theme/appearance/glass.less +3 -3
  58. package/styles/theme/appearance/opposite.less +2 -2
  59. package/styles/theme/appearance/outline.less +6 -5
  60. package/styles/theme/appearance/primary.less +2 -1
  61. package/styles/theme/appearance/secondary.less +11 -6
  62. package/styles/theme/appearance/status.less +12 -6
  63. package/styles/theme/appearance/textfield.less +3 -3
  64. package/styles/theme/palette.less +58 -58
  65. package/styles/theme/wrapper.less +11 -9
package/styles/theme/palette.less CHANGED
@@ -2,12 +2,12 @@
2
2
  // Backgrounds
3
3
  --tui-background-base: #222;
4
4
  --tui-background-base-alt: #333;
5
- --tui-background-neutral-1: rgb(255 255 255 / 8%);
6
- --tui-background-neutral-1-hover: rgb(255 255 255 / 16%);
7
- --tui-background-neutral-1-pressed: rgb(255 255 255 / 24%);
8
- --tui-background-neutral-2: rgb(255 255 255 / 24%);
9
- --tui-background-neutral-2-hover: rgb(255 255 255 / 32%);
10
- --tui-background-neutral-2-pressed: rgb(255 255 255 / 40%);
5
+ --tui-background-neutral-1: rgba(255, 255, 255, 0.08);
6
+ --tui-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
7
+ --tui-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
8
+ --tui-background-neutral-2: rgba(255, 255, 255, 0.24);
9
+ --tui-background-neutral-2-hover: rgba(255, 255, 255, 0.32);
10
+ --tui-background-neutral-2-pressed: rgba(255, 255, 255, 0.4);
11
11
  --tui-background-accent-opposite: #fff;
12
12
  --tui-background-accent-opposite-hover: #f6f6f6;
13
13
  --tui-background-accent-opposite-pressed: #ededed;
@@ -15,28 +15,28 @@
15
15
  --tui-background-elevation-2: #333;
16
16
  --tui-background-elevation-3: #333;
17
17
  // Other
18
- --tui-service-autofill-background: rgb(85 74 42);
19
- --tui-border-normal: rgb(255 255 255 / 14%);
20
- --tui-border-hover: rgb(255 255 255 / 60%);
21
- --tui-border-focus: rgb(255 255 255 / 64%);
18
+ --tui-service-autofill-background: rgb(85, 74, 42);
19
+ --tui-border-normal: rgba(255, 255, 255, 0.14);
20
+ --tui-border-hover: rgba(255, 255, 255, 0.6);
21
+ --tui-border-focus: rgba(255, 255, 255, 0.64);
22
22
  // Statuses
23
- --tui-status-negative: rgb(255 140 103 / 100%);
24
- --tui-status-negative-pale: rgb(244 87 37 / 32%);
25
- --tui-status-negative-pale-hover: rgb(244 87 37 / 40%);
26
- --tui-status-positive: rgb(74 201 155);
27
- --tui-status-positive-pale: rgb(74 201 155 / 32%);
28
- --tui-status-positive-pale-hover: rgb(74 201 155 / 40%);
29
- --tui-status-warning: rgb(255 199 0);
30
- --tui-status-warning-pale: rgb(255 199 0 / 32%);
31
- --tui-status-warning-pale-hover: rgb(255 199 0 / 40%);
32
- --tui-status-info: rgb(112 182 246);
33
- --tui-status-info-pale: rgb(112 182 246 / 32%);
34
- --tui-status-info-pale-hover: rgb(112 182 246 / 40%);
35
- --tui-status-neutral: rgb(149 155 164);
23
+ --tui-status-negative: rgba(255, 140, 103, 1);
24
+ --tui-status-negative-pale: rgba(244, 87, 37, 0.32);
25
+ --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
26
+ --tui-status-positive: rgb(74, 201, 155);
27
+ --tui-status-positive-pale: rgba(74, 201, 155, 0.32);
28
+ --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
29
+ --tui-status-warning: rgb(255, 199, 0);
30
+ --tui-status-warning-pale: rgba(255, 199, 0, 0.32);
31
+ --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
32
+ --tui-status-info: rgb(112, 182, 246);
33
+ --tui-status-info-pale: rgba(112, 182, 246, 0.32);
34
+ --tui-status-info-pale-hover: rgba(112, 182, 246, 0.4);
35
+ --tui-status-neutral: rgb(149, 155, 164);
36
36
  // Text
37
- --tui-text-primary: rgb(255 255 255 / 100%);
38
- --tui-text-secondary: rgb(255 255 255 / 72%);
39
- --tui-text-tertiary: rgb(255 255 255 / 60%);
37
+ --tui-text-primary: rgba(255, 255, 255, 1);
38
+ --tui-text-secondary: rgba(255, 255, 255, 0.72);
39
+ --tui-text-tertiary: rgba(255, 255, 255, 0.6);
40
40
  --tui-text-action: #6788ff;
41
41
  --tui-text-action-hover: #526ed3;
42
42
  --tui-text-positive: #44c596;
@@ -50,12 +50,12 @@
50
50
  // Backgrounds
51
51
  --tui-background-base: #fff;
52
52
  --tui-background-base-alt: #f6f6f6;
53
- --tui-background-neutral-1: rgb(0 0 0 / 4%);
54
- --tui-background-neutral-1-hover: rgb(0 0 0 / 8%);
55
- --tui-background-neutral-1-pressed: rgb(0 0 0 / 12%);
56
- --tui-background-neutral-2: rgb(0 0 0 / 8%);
57
- --tui-background-neutral-2-hover: rgb(0 0 0 / 10%);
58
- --tui-background-neutral-2-pressed: rgb(0 0 0 / 14%);
53
+ --tui-background-neutral-1: rgba(0, 0, 0, 0.04);
54
+ --tui-background-neutral-1-hover: rgba(0, 0, 0, 0.08);
55
+ --tui-background-neutral-1-pressed: rgba(0, 0, 0, 0.12);
56
+ --tui-background-neutral-2: rgba(0, 0, 0, 0.08);
57
+ --tui-background-neutral-2-hover: rgba(0, 0, 0, 0.1);
58
+ --tui-background-neutral-2-pressed: rgba(0, 0, 0, 0.14);
59
59
  --tui-background-accent-1: #526ed3;
60
60
  --tui-background-accent-1-hover: #6c86e2;
61
61
  --tui-background-accent-1-pressed: #314692;
@@ -70,29 +70,29 @@
70
70
  --tui-background-elevation-3: #fff;
71
71
  // Other
72
72
  --tui-service-autofill-background: #fff5c0;
73
- --tui-service-selection-background: rgb(112 182 246 / 12%);
74
- --tui-service-backdrop: rgb(0 0 0 / 75%);
75
- --tui-border-normal: rgb(0 0 0 / 10%);
76
- --tui-border-hover: rgb(0 0 0 / 16%);
77
- --tui-border-focus: rgb(51 51 51 / 64%);
73
+ --tui-service-selection-background: rgba(112, 182, 246, 0.12);
74
+ --tui-service-backdrop: rgba(0, 0, 0, 0.75);
75
+ --tui-border-normal: rgba(0, 0, 0, 0.1);
76
+ --tui-border-hover: rgba(0, 0, 0, 0.16);
77
+ --tui-border-focus: rgba(51, 51, 51, 0.64);
78
78
  // Statuses
79
- --tui-status-negative: rgb(244 87 37 / 100%);
80
- --tui-status-negative-pale: rgb(244 87 37 / 12%);
81
- --tui-status-negative-pale-hover: rgb(244 87 37 / 24%);
82
- --tui-status-positive: rgb(74 201 155 / 100%);
83
- --tui-status-positive-pale: rgb(74 201 155 / 12%);
84
- --tui-status-positive-pale-hover: rgb(74 201 155 / 24%);
85
- --tui-status-warning: rgb(255 199 0 / 100%);
86
- --tui-status-warning-pale: rgb(255 199 0 / 12%);
87
- --tui-status-warning-pale-hover: rgb(255 199 0 / 24%);
88
- --tui-status-info: rgb(112 182 246 / 100%);
89
- --tui-status-info-pale: rgb(112 182 246 / 12%);
90
- --tui-status-info-pale-hover: rgb(112 182 246 / 24%);
91
- --tui-status-neutral: rgb(121 129 140);
79
+ --tui-status-negative: rgba(244, 87, 37, 1);
80
+ --tui-status-negative-pale: rgba(244, 87, 37, 0.12);
81
+ --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
82
+ --tui-status-positive: rgba(74, 201, 155, 1);
83
+ --tui-status-positive-pale: rgba(74, 201, 155, 0.12);
84
+ --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
85
+ --tui-status-warning: rgba(255, 199, 0, 1);
86
+ --tui-status-warning-pale: rgba(255, 199, 0, 0.12);
87
+ --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
88
+ --tui-status-info: rgba(112, 182, 246, 1);
89
+ --tui-status-info-pale: rgba(112, 182, 246, 0.12);
90
+ --tui-status-info-pale-hover: rgba(112, 182, 246, 0.24);
91
+ --tui-status-neutral: rgb(121, 129, 140);
92
92
  // Text
93
- --tui-text-primary: rgb(27 31 59 / 100%);
94
- --tui-text-secondary: rgb(27 31 59 / 65%);
95
- --tui-text-tertiary: rgb(27 31 59 / 40%);
93
+ --tui-text-primary: rgba(27, 31, 59, 1);
94
+ --tui-text-secondary: rgba(27, 31, 59, 0.65);
95
+ --tui-text-tertiary: rgba(27, 31, 59, 0.4);
96
96
  --tui-text-primary-on-accent-1: #fff;
97
97
  --tui-text-primary-on-accent-2: #fff;
98
98
  --tui-text-action: #526ed3;
@@ -126,9 +126,9 @@
126
126
  --tui-chart-categorical-21: #3682db;
127
127
  --tui-chart-categorical-22: #34b41f;
128
128
  // Shadows
129
- --tui-shadow-small: 0 0.25rem 1.25rem rgb(0 0 0 / 10%);
130
- --tui-shadow-small-hover: 0 1rem 2.5rem rgb(0 0 0 / 14%);
131
- --tui-shadow-medium: 0 0.375rem 2rem rgb(0 0 0 / 12%);
132
- --tui-shadow-medium-hover: 0 1.25rem 4rem rgb(0 0 0 / 18%);
133
- --tui-shadow-popup: 0 1.25rem 3rem rgb(0 0 0 / 20%);
129
+ --tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
130
+ --tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14);
131
+ --tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12);
132
+ --tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
133
+ --tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2);
134
134
  }
package/styles/theme/wrapper.less CHANGED
@@ -51,7 +51,7 @@
51
51
 
52
52
  background: var(--tui-background-base);
53
53
  color: var(--tui-text-primary);
54
- box-shadow: 0 0.125rem 0.1875rem rgb(0 0 0 / 10%);
54
+ box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
55
55
 
56
56
  &::after {
57
57
  .transition(color);
@@ -132,14 +132,6 @@
132
132
  background-size: 0.5rem 0.5rem;
133
133
  }
134
134
 
135
- table &[data-appearance='table']:not(._focused)::after {
136
- border-width: 0;
137
- }
138
-
139
- table &._focused {
140
- z-index: 1;
141
- }
142
-
143
135
  &[data-appearance='table']::after {
144
136
  border-width: 1px;
145
137
  color: var(--tui-border-normal);
@@ -191,6 +183,16 @@
191
183
  });
192
184
  }
193
185
 
186
+ table [tuiWrapper][data-appearance='table'] {
187
+ &[data-appearance='table']:not(._focused)::after {
188
+ border-width: 0;
189
+ }
190
+
191
+ &._focused {
192
+ z-index: 1;
193
+ }
194
+ }
195
+
194
196
  [tuiWrapper][data-appearance='icon'] {
195
197
  .transition(opacity);
196
198