@db-ux/core-components 4.3.0 → 4.3.2-consolidation-7549d9f

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 (55) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/build/assets/icons/LICENCES.json +72 -0
  3. package/build/assets/icons/chat.svg +1 -0
  4. package/build/assets/icons/circle_small.svg +1 -0
  5. package/build/assets/icons/copy.svg +1 -0
  6. package/build/assets/icons/double_chevron_down.svg +1 -0
  7. package/build/assets/icons/double_chevron_left.svg +1 -0
  8. package/build/assets/icons/double_chevron_right.svg +1 -0
  9. package/build/assets/icons/double_chevron_up.svg +1 -0
  10. package/build/assets/icons/eye.svg +1 -0
  11. package/build/assets/icons/eye_disabled.svg +1 -0
  12. package/build/assets/icons/fonts/all/db-ux.woff2 +0 -0
  13. package/build/assets/icons/fonts/default/db-ux.woff2 +0 -0
  14. package/build/assets/icons/fonts/default_12/db-ux.woff2 +0 -0
  15. package/build/assets/icons/fonts/default_14/db-ux.woff2 +0 -0
  16. package/build/assets/icons/fonts/default_16/db-ux.woff2 +0 -0
  17. package/build/assets/icons/fonts/default_20/db-ux.woff2 +0 -0
  18. package/build/assets/icons/fonts/default_24/db-ux.woff2 +0 -0
  19. package/build/assets/icons/fonts/default_28/db-ux.woff2 +0 -0
  20. package/build/assets/icons/fonts/default_32/db-ux.woff2 +0 -0
  21. package/build/assets/icons/fonts/default_48/db-ux.woff2 +0 -0
  22. package/build/assets/icons/fonts/default_64/db-ux.woff2 +0 -0
  23. package/build/assets/icons/fonts/filled/db-ux.woff2 +0 -0
  24. package/build/assets/icons/fonts/filled_12/db-ux.woff2 +0 -0
  25. package/build/assets/icons/fonts/filled_14/db-ux.woff2 +0 -0
  26. package/build/assets/icons/fonts/filled_16/db-ux.woff2 +0 -0
  27. package/build/assets/icons/fonts/filled_20/db-ux.woff2 +0 -0
  28. package/build/assets/icons/fonts/filled_24/db-ux.woff2 +0 -0
  29. package/build/assets/icons/fonts/filled_28/db-ux.woff2 +0 -0
  30. package/build/assets/icons/fonts/filled_32/db-ux.woff2 +0 -0
  31. package/build/assets/icons/fonts/filled_48/db-ux.woff2 +0 -0
  32. package/build/assets/icons/fonts/filled_64/db-ux.woff2 +0 -0
  33. package/build/assets/icons/house.svg +1 -0
  34. package/build/assets/icons/moon.svg +1 -0
  35. package/build/assets/icons/sun.svg +1 -0
  36. package/build/components/accordion-item/accordion-item.css +0 -64
  37. package/build/components/custom-select-dropdown/custom-select-dropdown.css +0 -64
  38. package/build/components/drawer/drawer.css +18 -90
  39. package/build/components/drawer/drawer.scss +24 -37
  40. package/build/components/link/link.css +0 -64
  41. package/build/components/navigation-item/navigation-item.css +12 -72
  42. package/build/components/navigation-item/navigation-item.scss +13 -6
  43. package/build/components/notification/notification.css +0 -64
  44. package/build/components/popover/popover.css +0 -64
  45. package/build/components/tab-list/tab-list.css +0 -64
  46. package/build/components/tag/tag.css +0 -64
  47. package/build/components/textarea/textarea.css +0 -64
  48. package/build/components/tooltip/tooltip.css +0 -64
  49. package/build/styles/absolute.css +3 -3
  50. package/build/styles/component-animations.css +1 -1
  51. package/build/styles/index.css +2 -2
  52. package/build/styles/relative.css +3 -3
  53. package/build/styles/rollup.css +3 -3
  54. package/build/styles/webpack.css +3 -3
  55. package/package.json +2 -2
package/build/components/navigation-item/navigation-item.css CHANGED
@@ -121,70 +121,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
121
121
  * @mixin screen-min-max
122
122
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
123
123
  */
124
- @keyframes show-right-to-left {
125
- from {
126
- transform: translateX(110%);
127
- }
128
- to {
129
- transform: translateX(0%);
130
- }
131
- }
132
- @keyframes hide-right-to-left {
133
- from {
134
- transform: translateX(0%);
135
- }
136
- to {
137
- transform: translateX(110%);
138
- }
139
- }
140
- @keyframes show-left-to-right {
141
- from {
142
- transform: translateX(-110%);
143
- }
144
- to {
145
- transform: translateX(0%);
146
- }
147
- }
148
- @keyframes hide-left-to-right {
149
- from {
150
- transform: translateX(0%);
151
- }
152
- to {
153
- transform: translateX(-110%);
154
- }
155
- }
156
- @keyframes show-bottom-to-top {
157
- from {
158
- transform: translateY(110%);
159
- }
160
- to {
161
- transform: translateY(0%);
162
- }
163
- }
164
- @keyframes hide-bottom-to-top {
165
- from {
166
- transform: translateY(0%);
167
- }
168
- to {
169
- transform: translateY(110%);
170
- }
171
- }
172
- @keyframes show-top-to-bottom {
173
- from {
174
- transform: translateY(-110%);
175
- }
176
- to {
177
- transform: translateY(0%);
178
- }
179
- }
180
- @keyframes hide-top-to-bottom {
181
- from {
182
- transform: translateY(0%);
183
- }
184
- to {
185
- transform: translateY(-110%);
186
- }
187
- }
188
124
  @keyframes popover-animation {
189
125
  0% {
190
126
  opacity: 0;
@@ -377,42 +313,46 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
377
313
  }
378
314
  .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
379
315
  visibility: visible;
316
+ transform: translateX(0%);
380
317
  }
381
318
  @media screen and (prefers-reduced-motion: no-preference) {
382
319
  .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
383
- transition: visibility 0ms linear 0ms;
384
- animation: show-right-to-left var(--db-transition-straight-show);
320
+ transition: visibility 0ms linear 0ms, transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
385
321
  }
386
322
  }
387
323
  .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
388
324
  inset-block: 0;
389
325
  }
326
+ .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true]:not(.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true]) ~ .db-sub-navigation {
327
+ transform: translateX(110%);
328
+ }
390
329
  @media screen and (prefers-reduced-motion: no-preference) {
391
330
  .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true]:not(.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true]) ~ .db-sub-navigation {
392
- transition: visibility 0ms linear 410ms;
393
- animation: hide-right-to-left var(--db-transition-straight-hide);
331
+ transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
394
332
  }
395
333
  }
396
334
  @media screen and (max-width: 63.9375em) {
397
335
  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
398
336
  visibility: visible;
337
+ transform: translateX(0%);
399
338
  }
400
339
  }
401
340
  @media screen and (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
402
341
  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
403
- transition: visibility 0ms linear 0ms;
404
- animation: show-right-to-left var(--db-transition-straight-show);
342
+ transition: visibility 0ms linear 0ms, transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
405
343
  }
406
344
  }
407
345
  @media screen and (max-width: 63.9375em) {
408
346
  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
409
347
  inset-block: 0;
410
348
  }
349
+ .db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
350
+ transform: translateX(110%);
351
+ }
411
352
  }
412
353
  @media screen and (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
413
354
  .db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
414
- transition: visibility 0ms linear 410ms;
415
- animation: hide-right-to-left var(--db-transition-straight-hide);
355
+ transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
416
356
  }
417
357
  }
418
358
  .db-navigation-item .db-navigation-item-expand-button:is(button),
package/build/components/navigation-item/navigation-item.scss CHANGED
@@ -24,11 +24,13 @@
24
24
  &[aria-expanded="true"] {
25
25
  ~ .db-sub-navigation {
26
26
  visibility: visible;
27
+ transform: translateX(0%);
27
28
 
28
29
  @media screen and (prefers-reduced-motion: no-preference) {
29
- transition: visibility 0ms linear 0ms;
30
- animation: show-right-to-left
31
- #{variables.$db-transition-straight-show};
30
+ transition:
31
+ visibility 0ms linear 0ms,
32
+ transform #{variables.$db-transition-duration-extra-slow}
33
+ #{variables.$db-transition-timing-emotional};
32
34
  }
33
35
 
34
36
  .db-sub-navigation {
@@ -38,11 +40,16 @@
38
40
  }
39
41
 
40
42
  &:not(&[aria-expanded="true"]) {
43
+ ~ .db-sub-navigation {
44
+ transform: translateX(110%);
45
+ }
46
+
41
47
  @media screen and (prefers-reduced-motion: no-preference) {
42
48
  ~ .db-sub-navigation {
43
- transition: visibility 0ms linear 410ms; // hide animation is 0.4s
44
- animation: hide-right-to-left
45
- #{variables.$db-transition-straight-hide};
49
+ transition:
50
+ visibility 0ms linear 410ms,
51
+ transform #{variables.$db-transition-duration-slow}
52
+ #{variables.$db-transition-timing-emotional}; // hide animation is 0.4s
46
53
  }
47
54
  }
48
55
  }
package/build/components/notification/notification.css CHANGED
@@ -965,70 +965,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
965
965
  transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
966
966
  }
967
967
 
968
- @keyframes show-right-to-left {
969
- from {
970
- transform: translateX(110%);
971
- }
972
- to {
973
- transform: translateX(0%);
974
- }
975
- }
976
- @keyframes hide-right-to-left {
977
- from {
978
- transform: translateX(0%);
979
- }
980
- to {
981
- transform: translateX(110%);
982
- }
983
- }
984
- @keyframes show-left-to-right {
985
- from {
986
- transform: translateX(-110%);
987
- }
988
- to {
989
- transform: translateX(0%);
990
- }
991
- }
992
- @keyframes hide-left-to-right {
993
- from {
994
- transform: translateX(0%);
995
- }
996
- to {
997
- transform: translateX(-110%);
998
- }
999
- }
1000
- @keyframes show-bottom-to-top {
1001
- from {
1002
- transform: translateY(110%);
1003
- }
1004
- to {
1005
- transform: translateY(0%);
1006
- }
1007
- }
1008
- @keyframes hide-bottom-to-top {
1009
- from {
1010
- transform: translateY(0%);
1011
- }
1012
- to {
1013
- transform: translateY(110%);
1014
- }
1015
- }
1016
- @keyframes show-top-to-bottom {
1017
- from {
1018
- transform: translateY(-110%);
1019
- }
1020
- to {
1021
- transform: translateY(0%);
1022
- }
1023
- }
1024
- @keyframes hide-top-to-bottom {
1025
- from {
1026
- transform: translateY(0%);
1027
- }
1028
- to {
1029
- transform: translateY(-110%);
1030
- }
1031
- }
1032
968
  @keyframes popover-animation {
1033
969
  0% {
1034
970
  opacity: 0;
package/build/components/popover/popover.css CHANGED
@@ -43,70 +43,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
43
43
 
44
44
  @layer variables {}
45
45
 
46
- @keyframes show-right-to-left {
47
- from {
48
- transform: translateX(110%);
49
- }
50
- to {
51
- transform: translateX(0%);
52
- }
53
- }
54
- @keyframes hide-right-to-left {
55
- from {
56
- transform: translateX(0%);
57
- }
58
- to {
59
- transform: translateX(110%);
60
- }
61
- }
62
- @keyframes show-left-to-right {
63
- from {
64
- transform: translateX(-110%);
65
- }
66
- to {
67
- transform: translateX(0%);
68
- }
69
- }
70
- @keyframes hide-left-to-right {
71
- from {
72
- transform: translateX(0%);
73
- }
74
- to {
75
- transform: translateX(-110%);
76
- }
77
- }
78
- @keyframes show-bottom-to-top {
79
- from {
80
- transform: translateY(110%);
81
- }
82
- to {
83
- transform: translateY(0%);
84
- }
85
- }
86
- @keyframes hide-bottom-to-top {
87
- from {
88
- transform: translateY(0%);
89
- }
90
- to {
91
- transform: translateY(110%);
92
- }
93
- }
94
- @keyframes show-top-to-bottom {
95
- from {
96
- transform: translateY(-110%);
97
- }
98
- to {
99
- transform: translateY(0%);
100
- }
101
- }
102
- @keyframes hide-top-to-bottom {
103
- from {
104
- transform: translateY(0%);
105
- }
106
- to {
107
- transform: translateY(-110%);
108
- }
109
- }
110
46
  @keyframes popover-animation {
111
47
  0% {
112
48
  opacity: 0;
package/build/components/tab-list/tab-list.css CHANGED
@@ -66,70 +66,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
66
66
  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
67
67
  }
68
68
 
69
- @keyframes show-right-to-left {
70
- from {
71
- transform: translateX(110%);
72
- }
73
- to {
74
- transform: translateX(0%);
75
- }
76
- }
77
- @keyframes hide-right-to-left {
78
- from {
79
- transform: translateX(0%);
80
- }
81
- to {
82
- transform: translateX(110%);
83
- }
84
- }
85
- @keyframes show-left-to-right {
86
- from {
87
- transform: translateX(-110%);
88
- }
89
- to {
90
- transform: translateX(0%);
91
- }
92
- }
93
- @keyframes hide-left-to-right {
94
- from {
95
- transform: translateX(0%);
96
- }
97
- to {
98
- transform: translateX(-110%);
99
- }
100
- }
101
- @keyframes show-bottom-to-top {
102
- from {
103
- transform: translateY(110%);
104
- }
105
- to {
106
- transform: translateY(0%);
107
- }
108
- }
109
- @keyframes hide-bottom-to-top {
110
- from {
111
- transform: translateY(0%);
112
- }
113
- to {
114
- transform: translateY(110%);
115
- }
116
- }
117
- @keyframes show-top-to-bottom {
118
- from {
119
- transform: translateY(-110%);
120
- }
121
- to {
122
- transform: translateY(0%);
123
- }
124
- }
125
- @keyframes hide-top-to-bottom {
126
- from {
127
- transform: translateY(0%);
128
- }
129
- to {
130
- transform: translateY(-110%);
131
- }
132
- }
133
69
  @keyframes popover-animation {
134
70
  0% {
135
71
  opacity: 0;
package/build/components/tag/tag.css CHANGED
@@ -12,70 +12,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
12
12
  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
13
13
  }
14
14
 
15
- @keyframes show-right-to-left {
16
- from {
17
- transform: translateX(110%);
18
- }
19
- to {
20
- transform: translateX(0%);
21
- }
22
- }
23
- @keyframes hide-right-to-left {
24
- from {
25
- transform: translateX(0%);
26
- }
27
- to {
28
- transform: translateX(110%);
29
- }
30
- }
31
- @keyframes show-left-to-right {
32
- from {
33
- transform: translateX(-110%);
34
- }
35
- to {
36
- transform: translateX(0%);
37
- }
38
- }
39
- @keyframes hide-left-to-right {
40
- from {
41
- transform: translateX(0%);
42
- }
43
- to {
44
- transform: translateX(-110%);
45
- }
46
- }
47
- @keyframes show-bottom-to-top {
48
- from {
49
- transform: translateY(110%);
50
- }
51
- to {
52
- transform: translateY(0%);
53
- }
54
- }
55
- @keyframes hide-bottom-to-top {
56
- from {
57
- transform: translateY(0%);
58
- }
59
- to {
60
- transform: translateY(110%);
61
- }
62
- }
63
- @keyframes show-top-to-bottom {
64
- from {
65
- transform: translateY(-110%);
66
- }
67
- to {
68
- transform: translateY(0%);
69
- }
70
- }
71
- @keyframes hide-top-to-bottom {
72
- from {
73
- transform: translateY(0%);
74
- }
75
- to {
76
- transform: translateY(-110%);
77
- }
78
- }
79
15
  @keyframes popover-animation {
80
16
  0% {
81
17
  opacity: 0;
package/build/components/textarea/textarea.css CHANGED
@@ -201,70 +201,6 @@ input[type=radio]:checked) > label {
201
201
  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
202
202
  }
203
203
 
204
- @keyframes show-right-to-left {
205
- from {
206
- transform: translateX(110%);
207
- }
208
- to {
209
- transform: translateX(0%);
210
- }
211
- }
212
- @keyframes hide-right-to-left {
213
- from {
214
- transform: translateX(0%);
215
- }
216
- to {
217
- transform: translateX(110%);
218
- }
219
- }
220
- @keyframes show-left-to-right {
221
- from {
222
- transform: translateX(-110%);
223
- }
224
- to {
225
- transform: translateX(0%);
226
- }
227
- }
228
- @keyframes hide-left-to-right {
229
- from {
230
- transform: translateX(0%);
231
- }
232
- to {
233
- transform: translateX(-110%);
234
- }
235
- }
236
- @keyframes show-bottom-to-top {
237
- from {
238
- transform: translateY(110%);
239
- }
240
- to {
241
- transform: translateY(0%);
242
- }
243
- }
244
- @keyframes hide-bottom-to-top {
245
- from {
246
- transform: translateY(0%);
247
- }
248
- to {
249
- transform: translateY(110%);
250
- }
251
- }
252
- @keyframes show-top-to-bottom {
253
- from {
254
- transform: translateY(-110%);
255
- }
256
- to {
257
- transform: translateY(0%);
258
- }
259
- }
260
- @keyframes hide-top-to-bottom {
261
- from {
262
- transform: translateY(0%);
263
- }
264
- to {
265
- transform: translateY(-110%);
266
- }
267
- }
268
204
  @keyframes popover-animation {
269
205
  0% {
270
206
  opacity: 0;
package/build/components/tooltip/tooltip.css CHANGED
@@ -115,70 +115,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
115
115
 
116
116
  /* Use for body tags like <p> */
117
117
  /* Use for headline tags like <h1> */
118
- @keyframes show-right-to-left {
119
- from {
120
- transform: translateX(110%);
121
- }
122
- to {
123
- transform: translateX(0%);
124
- }
125
- }
126
- @keyframes hide-right-to-left {
127
- from {
128
- transform: translateX(0%);
129
- }
130
- to {
131
- transform: translateX(110%);
132
- }
133
- }
134
- @keyframes show-left-to-right {
135
- from {
136
- transform: translateX(-110%);
137
- }
138
- to {
139
- transform: translateX(0%);
140
- }
141
- }
142
- @keyframes hide-left-to-right {
143
- from {
144
- transform: translateX(0%);
145
- }
146
- to {
147
- transform: translateX(-110%);
148
- }
149
- }
150
- @keyframes show-bottom-to-top {
151
- from {
152
- transform: translateY(110%);
153
- }
154
- to {
155
- transform: translateY(0%);
156
- }
157
- }
158
- @keyframes hide-bottom-to-top {
159
- from {
160
- transform: translateY(0%);
161
- }
162
- to {
163
- transform: translateY(110%);
164
- }
165
- }
166
- @keyframes show-top-to-bottom {
167
- from {
168
- transform: translateY(-110%);
169
- }
170
- to {
171
- transform: translateY(0%);
172
- }
173
- }
174
- @keyframes hide-top-to-bottom {
175
- from {
176
- transform: translateY(0%);
177
- }
178
- to {
179
- transform: translateY(-110%);
180
- }
181
- }
182
118
  @keyframes popover-animation {
183
119
  0% {
184
120
  opacity: 0;