@db-ux/core-components 4.5.4 → 4.6.1
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.
- package/CHANGELOG.md +38 -15
- package/README.md +44 -19
- package/agent/Best-Practise_Common-AI-Mistakes.md +83 -1
- package/agent/_instructions.md +19 -0
- package/build/components/accordion/accordion.css +0 -34
- package/build/components/accordion-item/accordion-item.css +3 -94
- package/build/components/badge/badge.css +6 -102
- package/build/components/brand/brand.css +3 -94
- package/build/components/button/button.css +6 -100
- package/build/components/card/card.css +0 -34
- package/build/components/checkbox/checkbox.css +6 -100
- package/build/components/custom-button/custom-button.css +6 -100
- package/build/components/custom-select/custom-select.css +459 -572
- package/build/components/custom-select-dropdown/custom-select-dropdown.css +147 -238
- package/build/components/custom-select-form-field/custom-select-form-field.css +0 -88
- package/build/components/custom-select-list/custom-select-list.css +0 -88
- package/build/components/custom-select-list-item/custom-select-list-item.css +3 -94
- package/build/components/divider/divider.css +0 -34
- package/build/components/drawer/drawer.css +10 -44
- package/build/components/drawer/drawer.scss +4 -10
- package/build/components/header/header.css +255 -373
- package/build/components/icon/icon.css +0 -34
- package/build/components/infotext/infotext.css +6 -100
- package/build/components/input/input.css +306 -416
- package/build/components/link/link.css +6 -100
- package/build/components/navigation/navigation.css +0 -88
- package/build/components/navigation-item/navigation-item.css +21 -101
- package/build/components/navigation-item/navigation-item.scss +9 -12
- package/build/components/notification/notification.css +741 -868
- package/build/components/page/page.css +0 -34
- package/build/components/popover/popover.css +0 -34
- package/build/components/radio/radio.css +6 -100
- package/build/components/section/section.css +0 -34
- package/build/components/select/select.css +306 -416
- package/build/components/stack/stack-web-component.css +0 -34
- package/build/components/stack/stack.css +0 -34
- package/build/components/switch/switch.css +9 -106
- package/build/components/tab-item/tab-item.css +0 -88
- package/build/components/tab-list/tab-list.css +3 -94
- package/build/components/tab-panel/tab-panel.css +0 -34
- package/build/components/tabs/tabs.css +0 -88
- package/build/components/tag/tag.css +741 -854
- package/build/components/textarea/textarea.css +12 -116
- package/build/components/tooltip/tooltip.css +3 -94
- package/build/styles/absolute.css +1641 -1669
- package/build/styles/absolute.scss +2 -4
- package/build/styles/bundle.css +1989 -0
- package/build/styles/bundle.scss +15 -0
- package/build/styles/dialog-init.css +1 -1
- package/build/styles/dialog-init.scss +1 -1
- package/build/styles/index.css +487 -515
- package/build/styles/relative.css +1641 -1669
- package/build/styles/relative.scss +2 -15
- package/build/styles/rollup.css +1641 -1669
- package/build/styles/rollup.scss +2 -4
- package/build/styles/visually-hidden.css +1 -1
- package/build/styles/webpack.css +1641 -1669
- package/build/styles/webpack.scss +2 -4
- package/package.json +7 -7
|
@@ -1,111 +1,17 @@
|
|
|
1
1
|
/* Variants for adaptive components like input, select, notification, ... */
|
|
2
|
-
@layer variables {}
|
|
3
|
-
|
|
4
|
-
@layer variables {}
|
|
5
|
-
|
|
6
|
-
@layer variables {}
|
|
7
|
-
|
|
8
|
-
@layer variables {}
|
|
9
|
-
|
|
10
|
-
@layer variables {}
|
|
11
|
-
|
|
12
|
-
@layer variables {}
|
|
13
|
-
|
|
14
|
-
@layer variables {}
|
|
15
|
-
|
|
16
|
-
@layer variables {}
|
|
17
|
-
|
|
18
|
-
@layer variables {}
|
|
19
|
-
|
|
20
|
-
@layer variables {}
|
|
21
|
-
|
|
22
|
-
@layer variables {}
|
|
23
|
-
|
|
24
|
-
@layer variables {}
|
|
25
|
-
|
|
26
|
-
@layer variables {}
|
|
27
|
-
|
|
28
|
-
@layer variables {}
|
|
29
|
-
|
|
30
|
-
@layer variables {}
|
|
31
|
-
|
|
32
|
-
@layer variables {}
|
|
33
|
-
|
|
34
|
-
@layer variables {}
|
|
35
|
-
|
|
36
|
-
@layer variables {}
|
|
37
|
-
|
|
38
|
-
@layer variables {}
|
|
39
|
-
|
|
40
|
-
@layer variables {}
|
|
41
|
-
|
|
42
|
-
@layer variables {}
|
|
43
|
-
|
|
44
|
-
@layer variables {}
|
|
45
|
-
|
|
46
|
-
@layer variables {}
|
|
47
|
-
|
|
48
|
-
@layer variables {}
|
|
49
|
-
|
|
50
|
-
@layer variables {}
|
|
51
|
-
|
|
52
|
-
@layer variables {}
|
|
53
|
-
|
|
54
|
-
@layer variables {}
|
|
55
|
-
|
|
56
|
-
@layer variables {}
|
|
57
|
-
|
|
58
|
-
@layer variables {}
|
|
59
|
-
|
|
60
|
-
@layer variables {}
|
|
61
|
-
|
|
62
2
|
.db-link {
|
|
63
3
|
font: var(--db-type-body-md);
|
|
64
|
-
/*
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
.db-link {
|
|
68
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
69
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
70
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
71
|
-
}
|
|
4
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
5
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
6
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
72
7
|
}
|
|
73
8
|
|
|
74
|
-
@layer variables {}
|
|
75
|
-
|
|
76
|
-
@layer variables {}
|
|
77
|
-
|
|
78
9
|
.db-link[data-size=small] {
|
|
79
10
|
font: var(--db-type-body-sm);
|
|
80
|
-
/*
|
|
11
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
12
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-sm);
|
|
13
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-sm);
|
|
81
14
|
}
|
|
82
|
-
@layer variables {
|
|
83
|
-
.db-link[data-size=small] {
|
|
84
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
85
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-sm);
|
|
86
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-sm);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@layer variables {}
|
|
91
|
-
|
|
92
|
-
@layer variables {}
|
|
93
|
-
|
|
94
|
-
@layer variables {}
|
|
95
|
-
|
|
96
|
-
@layer variables {}
|
|
97
|
-
|
|
98
|
-
@layer variables {}
|
|
99
|
-
|
|
100
|
-
@layer variables {}
|
|
101
|
-
|
|
102
|
-
@layer variables {}
|
|
103
|
-
|
|
104
|
-
@layer variables {}
|
|
105
|
-
|
|
106
|
-
@layer variables {}
|
|
107
|
-
|
|
108
|
-
@layer variables {}
|
|
109
15
|
|
|
110
16
|
.db-link {
|
|
111
17
|
transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
|
|
@@ -18,94 +18,6 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
/* Variants for adaptive components like input, select, notification, ... */
|
|
21
|
-
@layer variables {}
|
|
22
|
-
|
|
23
|
-
@layer variables {}
|
|
24
|
-
|
|
25
|
-
@layer variables {}
|
|
26
|
-
|
|
27
|
-
@layer variables {}
|
|
28
|
-
|
|
29
|
-
@layer variables {}
|
|
30
|
-
|
|
31
|
-
@layer variables {}
|
|
32
|
-
|
|
33
|
-
@layer variables {}
|
|
34
|
-
|
|
35
|
-
@layer variables {}
|
|
36
|
-
|
|
37
|
-
@layer variables {}
|
|
38
|
-
|
|
39
|
-
@layer variables {}
|
|
40
|
-
|
|
41
|
-
@layer variables {}
|
|
42
|
-
|
|
43
|
-
@layer variables {}
|
|
44
|
-
|
|
45
|
-
@layer variables {}
|
|
46
|
-
|
|
47
|
-
@layer variables {}
|
|
48
|
-
|
|
49
|
-
@layer variables {}
|
|
50
|
-
|
|
51
|
-
@layer variables {}
|
|
52
|
-
|
|
53
|
-
@layer variables {}
|
|
54
|
-
|
|
55
|
-
@layer variables {}
|
|
56
|
-
|
|
57
|
-
@layer variables {}
|
|
58
|
-
|
|
59
|
-
@layer variables {}
|
|
60
|
-
|
|
61
|
-
@layer variables {}
|
|
62
|
-
|
|
63
|
-
@layer variables {}
|
|
64
|
-
|
|
65
|
-
@layer variables {}
|
|
66
|
-
|
|
67
|
-
@layer variables {}
|
|
68
|
-
|
|
69
|
-
@layer variables {}
|
|
70
|
-
|
|
71
|
-
@layer variables {}
|
|
72
|
-
|
|
73
|
-
@layer variables {}
|
|
74
|
-
|
|
75
|
-
@layer variables {}
|
|
76
|
-
|
|
77
|
-
@layer variables {}
|
|
78
|
-
|
|
79
|
-
@layer variables {}
|
|
80
|
-
|
|
81
|
-
@layer variables {}
|
|
82
|
-
|
|
83
|
-
@layer variables {}
|
|
84
|
-
|
|
85
|
-
@layer variables {}
|
|
86
|
-
|
|
87
|
-
@layer variables {}
|
|
88
|
-
|
|
89
|
-
@layer variables {}
|
|
90
|
-
|
|
91
|
-
@layer variables {}
|
|
92
|
-
|
|
93
|
-
@layer variables {}
|
|
94
|
-
|
|
95
|
-
@layer variables {}
|
|
96
|
-
|
|
97
|
-
@layer variables {}
|
|
98
|
-
|
|
99
|
-
@layer variables {}
|
|
100
|
-
|
|
101
|
-
@layer variables {}
|
|
102
|
-
|
|
103
|
-
@layer variables {}
|
|
104
|
-
|
|
105
|
-
@layer variables {}
|
|
106
|
-
|
|
107
|
-
@layer variables {}
|
|
108
|
-
|
|
109
21
|
.db-navigation > menu .db-navigation-item::after {
|
|
110
22
|
content: "";
|
|
111
23
|
position: absolute;
|
|
@@ -1,103 +1,11 @@
|
|
|
1
1
|
/* Variants for adaptive components like input, select, notification, ... */
|
|
2
|
-
@layer variables {}
|
|
3
|
-
|
|
4
|
-
@layer variables {}
|
|
5
|
-
|
|
6
|
-
@layer variables {}
|
|
7
|
-
|
|
8
|
-
@layer variables {}
|
|
9
|
-
|
|
10
|
-
@layer variables {}
|
|
11
|
-
|
|
12
|
-
@layer variables {}
|
|
13
|
-
|
|
14
|
-
@layer variables {}
|
|
15
|
-
|
|
16
|
-
@layer variables {}
|
|
17
|
-
|
|
18
|
-
@layer variables {}
|
|
19
|
-
|
|
20
|
-
@layer variables {}
|
|
21
|
-
|
|
22
|
-
@layer variables {}
|
|
23
|
-
|
|
24
|
-
@layer variables {}
|
|
25
|
-
|
|
26
|
-
@layer variables {}
|
|
27
|
-
|
|
28
|
-
@layer variables {}
|
|
29
|
-
|
|
30
|
-
@layer variables {}
|
|
31
|
-
|
|
32
|
-
@layer variables {}
|
|
33
|
-
|
|
34
|
-
@layer variables {}
|
|
35
|
-
|
|
36
|
-
@layer variables {}
|
|
37
|
-
|
|
38
|
-
@layer variables {}
|
|
39
|
-
|
|
40
|
-
@layer variables {}
|
|
41
|
-
|
|
42
|
-
@layer variables {}
|
|
43
|
-
|
|
44
|
-
@layer variables {}
|
|
45
|
-
|
|
46
|
-
@layer variables {}
|
|
47
|
-
|
|
48
|
-
@layer variables {}
|
|
49
|
-
|
|
50
|
-
@layer variables {}
|
|
51
|
-
|
|
52
|
-
@layer variables {}
|
|
53
|
-
|
|
54
|
-
@layer variables {}
|
|
55
|
-
|
|
56
|
-
@layer variables {}
|
|
57
|
-
|
|
58
|
-
@layer variables {}
|
|
59
|
-
|
|
60
|
-
@layer variables {}
|
|
61
|
-
|
|
62
2
|
.db-navigation-item, .db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
|
|
63
3
|
.db-navigation-item .db-navigation-item-expand-button > button {
|
|
64
4
|
font: var(--db-type-body-md);
|
|
65
|
-
/*
|
|
5
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
6
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
7
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
66
8
|
}
|
|
67
|
-
@layer variables {
|
|
68
|
-
.db-navigation-item, .db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
|
|
69
|
-
.db-navigation-item .db-navigation-item-expand-button > button {
|
|
70
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
71
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
72
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
@layer variables {}
|
|
77
|
-
|
|
78
|
-
@layer variables {}
|
|
79
|
-
|
|
80
|
-
@layer variables {}
|
|
81
|
-
|
|
82
|
-
@layer variables {}
|
|
83
|
-
|
|
84
|
-
@layer variables {}
|
|
85
|
-
|
|
86
|
-
@layer variables {}
|
|
87
|
-
|
|
88
|
-
@layer variables {}
|
|
89
|
-
|
|
90
|
-
@layer variables {}
|
|
91
|
-
|
|
92
|
-
@layer variables {}
|
|
93
|
-
|
|
94
|
-
@layer variables {}
|
|
95
|
-
|
|
96
|
-
@layer variables {}
|
|
97
|
-
|
|
98
|
-
@layer variables {}
|
|
99
|
-
|
|
100
|
-
@layer variables {}
|
|
101
9
|
|
|
102
10
|
@keyframes popover-animation {
|
|
103
11
|
0% {
|
|
@@ -362,10 +270,16 @@
|
|
|
362
270
|
white-space: normal;
|
|
363
271
|
text-align: start;
|
|
364
272
|
}
|
|
273
|
+
.db-navigation-item[data-force-mobile=true]:not([data-width=full]) {
|
|
274
|
+
inline-size: 100%;
|
|
275
|
+
}
|
|
365
276
|
.db-navigation-item[data-force-mobile=true]:not([data-width=full]) .db-navigation-item-expand-button::after {
|
|
366
277
|
--db-icon-margin-start: auto;
|
|
367
278
|
}
|
|
368
279
|
@media (max-width: 63.9375em) {
|
|
280
|
+
.db-navigation-item:not([data-width=full]) {
|
|
281
|
+
inline-size: 100%;
|
|
282
|
+
}
|
|
369
283
|
.db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
|
|
370
284
|
--db-icon-margin-start: auto;
|
|
371
285
|
}
|
|
@@ -389,7 +303,9 @@
|
|
|
389
303
|
}
|
|
390
304
|
}
|
|
391
305
|
.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
|
|
392
|
-
inset
|
|
306
|
+
inset: 0;
|
|
307
|
+
inline-size: 100%;
|
|
308
|
+
border-color: transparent;
|
|
393
309
|
}
|
|
394
310
|
.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 {
|
|
395
311
|
transform: translateX(110%);
|
|
@@ -412,7 +328,9 @@
|
|
|
412
328
|
}
|
|
413
329
|
@media (max-width: 63.9375em) {
|
|
414
330
|
.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
|
|
415
|
-
inset
|
|
331
|
+
inset: 0;
|
|
332
|
+
inline-size: 100%;
|
|
333
|
+
border-color: transparent;
|
|
416
334
|
}
|
|
417
335
|
.db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
|
|
418
336
|
transform: translateX(110%);
|
|
@@ -474,18 +392,20 @@
|
|
|
474
392
|
}
|
|
475
393
|
.db-sub-navigation[data-force-mobile=true] {
|
|
476
394
|
padding: var(--db-spacing-fixed-md);
|
|
477
|
-
inline-size: 100
|
|
395
|
+
inline-size: calc(100% - var(--db-spacing-fixed-xl));
|
|
478
396
|
position: fixed;
|
|
479
397
|
overflow: hidden auto;
|
|
480
|
-
inset-
|
|
398
|
+
inset-inline-start: var(--db-spacing-fixed-xl);
|
|
399
|
+
inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
|
|
481
400
|
}
|
|
482
401
|
@media (max-width: 63.9375em) {
|
|
483
402
|
.db-sub-navigation {
|
|
484
403
|
padding: var(--db-spacing-fixed-md);
|
|
485
|
-
inline-size: 100
|
|
404
|
+
inline-size: calc(100% - var(--db-spacing-fixed-xl));
|
|
486
405
|
position: fixed;
|
|
487
406
|
overflow: hidden auto;
|
|
488
|
-
inset-
|
|
407
|
+
inset-inline-start: var(--db-spacing-fixed-xl);
|
|
408
|
+
inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
|
|
489
409
|
}
|
|
490
410
|
}
|
|
491
411
|
@media (min-width: 64em) {
|
|
@@ -34,7 +34,9 @@
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.db-sub-navigation {
|
|
37
|
-
inset
|
|
37
|
+
inset: 0;
|
|
38
|
+
inline-size: 100%;
|
|
39
|
+
border-color: transparent;
|
|
38
40
|
}
|
|
39
41
|
}
|
|
40
42
|
}
|
|
@@ -104,6 +106,8 @@
|
|
|
104
106
|
|
|
105
107
|
@include screen-sizes.screen("md", "max") {
|
|
106
108
|
&:not([data-width="full"]) {
|
|
109
|
+
inline-size: 100%;
|
|
110
|
+
|
|
107
111
|
.db-navigation-item-expand-button {
|
|
108
112
|
&::after {
|
|
109
113
|
--db-icon-margin-start: auto;
|
|
@@ -175,19 +179,12 @@
|
|
|
175
179
|
|
|
176
180
|
@mixin sub-navigation-mobile() {
|
|
177
181
|
padding: variables.$db-spacing-fixed-md;
|
|
178
|
-
inline-size: 100
|
|
182
|
+
inline-size: calc(100% - #{variables.$db-spacing-fixed-xl});
|
|
179
183
|
position: fixed;
|
|
180
184
|
overflow: hidden auto;
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
#{component.$min-mobile-header-height} +
|
|
185
|
-
#{variables.$db-spacing-fixed-3xs}
|
|
186
|
-
)
|
|
187
|
-
calc(
|
|
188
|
-
#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2 +
|
|
189
|
-
#{variables.$db-spacing-fixed-3xs}
|
|
190
|
-
);
|
|
185
|
+
inset-inline-start: variables.$db-spacing-fixed-xl;
|
|
186
|
+
inset-block: calc(#{component.$min-mobile-header-height})
|
|
187
|
+
calc(#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2);
|
|
191
188
|
}
|
|
192
189
|
|
|
193
190
|
.db-sub-navigation {
|