@db-ux/core-components 4.5.4 → 4.6.0

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 (57) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +44 -19
  3. package/agent/Best-Practise_Common-AI-Mistakes.md +83 -1
  4. package/agent/_instructions.md +19 -0
  5. package/build/components/accordion/accordion.css +0 -34
  6. package/build/components/accordion-item/accordion-item.css +3 -94
  7. package/build/components/badge/badge.css +6 -102
  8. package/build/components/brand/brand.css +3 -94
  9. package/build/components/button/button.css +6 -100
  10. package/build/components/card/card.css +0 -34
  11. package/build/components/checkbox/checkbox.css +6 -100
  12. package/build/components/custom-button/custom-button.css +6 -100
  13. package/build/components/custom-select/custom-select.css +453 -566
  14. package/build/components/custom-select-dropdown/custom-select-dropdown.css +147 -238
  15. package/build/components/custom-select-form-field/custom-select-form-field.css +0 -88
  16. package/build/components/custom-select-list/custom-select-list.css +0 -88
  17. package/build/components/custom-select-list-item/custom-select-list-item.css +3 -94
  18. package/build/components/divider/divider.css +0 -34
  19. package/build/components/drawer/drawer.css +4 -38
  20. package/build/components/drawer/drawer.scss +4 -4
  21. package/build/components/header/header.css +255 -373
  22. package/build/components/icon/icon.css +0 -34
  23. package/build/components/infotext/infotext.css +6 -100
  24. package/build/components/input/input.css +306 -416
  25. package/build/components/link/link.css +6 -100
  26. package/build/components/navigation/navigation.css +0 -88
  27. package/build/components/navigation-item/navigation-item.css +3 -95
  28. package/build/components/notification/notification.css +741 -868
  29. package/build/components/page/page.css +0 -34
  30. package/build/components/popover/popover.css +0 -34
  31. package/build/components/radio/radio.css +6 -100
  32. package/build/components/section/section.css +0 -34
  33. package/build/components/select/select.css +306 -416
  34. package/build/components/stack/stack-web-component.css +0 -34
  35. package/build/components/stack/stack.css +0 -34
  36. package/build/components/switch/switch.css +9 -106
  37. package/build/components/tab-item/tab-item.css +0 -88
  38. package/build/components/tab-list/tab-list.css +3 -94
  39. package/build/components/tab-panel/tab-panel.css +0 -34
  40. package/build/components/tabs/tabs.css +0 -88
  41. package/build/components/tag/tag.css +741 -854
  42. package/build/components/textarea/textarea.css +12 -116
  43. package/build/components/tooltip/tooltip.css +3 -94
  44. package/build/styles/absolute.css +1641 -1669
  45. package/build/styles/absolute.scss +2 -4
  46. package/build/styles/bundle.css +1989 -0
  47. package/build/styles/bundle.scss +15 -0
  48. package/build/styles/dialog-init.css +1 -1
  49. package/build/styles/index.css +487 -515
  50. package/build/styles/relative.css +1641 -1669
  51. package/build/styles/relative.scss +2 -15
  52. package/build/styles/rollup.css +1641 -1669
  53. package/build/styles/rollup.scss +2 -4
  54. package/build/styles/visually-hidden.css +1 -1
  55. package/build/styles/webpack.css +1641 -1669
  56. package/build/styles/webpack.scss +2 -4
  57. package/package.json +6 -6
package/build/components/stack/stack-web-component.css CHANGED
@@ -1,38 +1,4 @@
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
2
  .db-stack {
37
3
  gap: var(--db-spacing-fixed-sm);
38
4
  justify-content: flex-start;
package/build/components/stack/stack.css CHANGED
@@ -1,38 +1,4 @@
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
2
  .db-stack {
37
3
  gap: var(--db-spacing-fixed-sm);
38
4
  justify-content: flex-start;
package/build/components/switch/switch.css CHANGED
@@ -19,124 +19,27 @@
19
19
  pointer-events: none !important;
20
20
  }
21
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
- @layer variables {}
63
-
64
- @layer variables {}
65
-
66
- @layer variables {}
67
-
68
- @layer variables {}
69
-
70
- @layer variables {}
71
-
72
- @layer variables {}
73
-
74
- @layer variables {}
75
-
76
- @layer variables {}
77
-
78
- @layer variables {}
79
-
80
- @layer variables {}
81
-
82
22
  .db-switch {
83
23
  font: var(--db-type-body-md);
84
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
24
+ /* Those variables are only for components to calculate heights and change icons */
25
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
26
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
85
27
  }
86
- @layer variables {
87
- .db-switch {
88
- /* Those variables are only for components to calculate heights and change icons */
89
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
90
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
91
- }
92
- }
93
-
94
- @layer variables {}
95
-
96
- @layer variables {}
97
28
 
98
29
  .db-switch[data-size=small], .db-switch input {
99
30
  font: var(--db-type-body-sm);
100
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
101
- }
102
- @layer variables {
103
- .db-switch[data-size=small], .db-switch input {
104
- /* Those variables are only for components to calculate heights and change icons */
105
- --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
106
- --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
107
- }
31
+ /* Those variables are only for components to calculate heights and change icons */
32
+ --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
33
+ --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
108
34
  }
109
35
 
110
- @layer variables {}
111
-
112
- @layer variables {}
113
-
114
36
  .db-switch[data-size=small] input {
115
37
  font: var(--db-type-body-xs);
116
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
117
- }
118
- @layer variables {
119
- .db-switch[data-size=small] input {
120
- /* Those variables are only for components to calculate heights and change icons */
121
- --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
122
- --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
123
- }
38
+ /* Those variables are only for components to calculate heights and change icons */
39
+ --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
40
+ --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
124
41
  }
125
42
 
126
- @layer variables {}
127
-
128
- @layer variables {}
129
-
130
- @layer variables {}
131
-
132
- @layer variables {}
133
-
134
- @layer variables {}
135
-
136
- @layer variables {}
137
-
138
- @layer variables {}
139
-
140
43
  .db-switch input:not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
141
44
  color: var(--db-icon-color, inherit);
142
45
  display: inline-block;
package/build/components/tab-item/tab-item.css CHANGED
@@ -18,40 +18,6 @@
18
18
  pointer-events: none !important;
19
19
  }
20
20
 
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
21
  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
56
22
  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
57
23
  outline-offset: var(--db-border-width-xs);
@@ -66,60 +32,6 @@
66
32
  border-radius: var(--db-border-radius-xs);
67
33
  }
68
34
 
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
- @layer variables {}
110
-
111
- @layer variables {}
112
-
113
- @layer variables {}
114
-
115
- @layer variables {}
116
-
117
- @layer variables {}
118
-
119
- @layer variables {}
120
-
121
- @layer variables {}
122
-
123
35
  .db-tab-item {
124
36
  position: relative;
125
37
  list-style-type: "";
package/build/components/tab-list/tab-list.css CHANGED
@@ -18,40 +18,6 @@
18
18
  pointer-events: none !important;
19
19
  }
20
20
 
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
21
  .db-tab-list > ul::-webkit-scrollbar, .db-tab-list > ul::-webkit-scrollbar-corner {
56
22
  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
57
23
  }
@@ -73,70 +39,13 @@
73
39
  transform: rotate(1turn);
74
40
  }
75
41
  }
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
-
102
42
  .db-tab-list {
103
43
  font: var(--db-type-body-md);
104
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
105
- }
106
- @layer variables {
107
- .db-tab-list {
108
- /* Those variables are only for components to calculate heights and change icons */
109
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
110
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
111
- }
44
+ /* Those variables are only for components to calculate heights and change icons */
45
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
46
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
112
47
  }
113
48
 
114
- @layer variables {}
115
-
116
- @layer variables {}
117
-
118
- @layer variables {}
119
-
120
- @layer variables {}
121
-
122
- @layer variables {}
123
-
124
- @layer variables {}
125
-
126
- @layer variables {}
127
-
128
- @layer variables {}
129
-
130
- @layer variables {}
131
-
132
- @layer variables {}
133
-
134
- @layer variables {}
135
-
136
- @layer variables {}
137
-
138
- @layer variables {}
139
-
140
49
  .db-tab-list > ul {
141
50
  /* Buttons */
142
51
  /* Up */
package/build/components/tab-panel/tab-panel.css CHANGED
@@ -1,38 +1,4 @@
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
2
  .db-tab-panel:not([hidden]) {
37
3
  display: none;
38
4
  }
package/build/components/tabs/tabs.css CHANGED
@@ -18,94 +18,6 @@
18
18
  pointer-events: none !important;
19
19
  }
20
20
 
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-tabs .db-tab-item::after {
110
22
  content: "";
111
23
  position: absolute;