@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.
Files changed (59) hide show
  1. package/CHANGELOG.md +38 -15
  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 +459 -572
  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 +10 -44
  20. package/build/components/drawer/drawer.scss +4 -10
  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 +21 -101
  28. package/build/components/navigation-item/navigation-item.scss +9 -12
  29. package/build/components/notification/notification.css +741 -868
  30. package/build/components/page/page.css +0 -34
  31. package/build/components/popover/popover.css +0 -34
  32. package/build/components/radio/radio.css +6 -100
  33. package/build/components/section/section.css +0 -34
  34. package/build/components/select/select.css +306 -416
  35. package/build/components/stack/stack-web-component.css +0 -34
  36. package/build/components/stack/stack.css +0 -34
  37. package/build/components/switch/switch.css +9 -106
  38. package/build/components/tab-item/tab-item.css +0 -88
  39. package/build/components/tab-list/tab-list.css +3 -94
  40. package/build/components/tab-panel/tab-panel.css +0 -34
  41. package/build/components/tabs/tabs.css +0 -88
  42. package/build/components/tag/tag.css +741 -854
  43. package/build/components/textarea/textarea.css +12 -116
  44. package/build/components/tooltip/tooltip.css +3 -94
  45. package/build/styles/absolute.css +1641 -1669
  46. package/build/styles/absolute.scss +2 -4
  47. package/build/styles/bundle.css +1989 -0
  48. package/build/styles/bundle.scss +15 -0
  49. package/build/styles/dialog-init.css +1 -1
  50. package/build/styles/dialog-init.scss +1 -1
  51. package/build/styles/index.css +487 -515
  52. package/build/styles/relative.css +1641 -1669
  53. package/build/styles/relative.scss +2 -15
  54. package/build/styles/rollup.css +1641 -1669
  55. package/build/styles/rollup.scss +2 -4
  56. package/build/styles/visually-hidden.css +1 -1
  57. package/build/styles/webpack.css +1641 -1669
  58. package/build/styles/webpack.scss +2 -4
  59. package/package.json +7 -7
package/build/components/brand/brand.css CHANGED
@@ -1,102 +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-brand {
63
3
  font: var(--db-type-body-md);
64
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
65
- }
66
- @layer variables {
67
- .db-brand {
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
- @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
9
  .db-brand {
101
10
  gap: var(--db-spacing-fixed-sm);
102
11
  align-items: center;
package/build/components/button/button.css CHANGED
@@ -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-button {
63
3
  font: var(--db-type-body-md);
64
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
65
- }
66
- @layer variables {
67
- .db-button {
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-button[data-size=small] {
79
10
  font: var(--db-type-body-sm);
80
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
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-button[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-button {
111
17
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
package/build/components/card/card.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-card {
37
3
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
38
4
  }
package/build/components/checkbox/checkbox.css CHANGED
@@ -18,40 +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
21
  .db-checkbox input:checked:not([data-show-icon-leading=false])::before, .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
56
22
  color: var(--db-icon-color, inherit);
57
23
  display: inline-block;
@@ -93,79 +59,19 @@
93
59
  }
94
60
  }
95
61
 
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
-
110
- @layer variables {}
111
-
112
- @layer variables {}
113
-
114
- @layer variables {}
115
-
116
- @layer variables {}
117
-
118
- @layer variables {}
119
-
120
- @layer variables {}
121
-
122
62
  .db-checkbox {
123
63
  font: var(--db-type-body-md);
124
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
125
- }
126
- @layer variables {
127
- .db-checkbox {
128
- /* Those variables are only for components to calculate heights and change icons */
129
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
130
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
131
- }
64
+ /* Those variables are only for components to calculate heights and change icons */
65
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
66
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
132
67
  }
133
68
 
134
- @layer variables {}
135
-
136
- @layer variables {}
137
-
138
69
  .db-checkbox[data-size=small] {
139
70
  font: var(--db-type-body-sm);
140
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
71
+ /* Those variables are only for components to calculate heights and change icons */
72
+ --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
73
+ --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
141
74
  }
142
- @layer variables {
143
- .db-checkbox[data-size=small] {
144
- /* Those variables are only for components to calculate heights and change icons */
145
- --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
146
- --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
147
- }
148
- }
149
-
150
- @layer variables {}
151
-
152
- @layer variables {}
153
-
154
- @layer variables {}
155
-
156
- @layer variables {}
157
-
158
- @layer variables {}
159
-
160
- @layer variables {}
161
-
162
- @layer variables {}
163
-
164
- @layer variables {}
165
-
166
- @layer variables {}
167
-
168
- @layer variables {}
169
75
 
170
76
  .db-checkbox > db-infotext > .db-infotext,
171
77
  .db-checkbox > .db-infotext {
package/build/components/custom-button/custom-button.css CHANGED
@@ -17,40 +17,6 @@
17
17
  pointer-events: none !important;
18
18
  }
19
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
20
  .db-custom-button:not([data-disable-focus=true]):has(input):focus-within {
55
21
  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
56
22
  outline-offset: var(--db-border-width-xs);
@@ -65,79 +31,19 @@
65
31
  border-radius: var(--db-border-radius-xs);
66
32
  }
67
33
 
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
- @layer variables {}
83
-
84
- @layer variables {}
85
-
86
- @layer variables {}
87
-
88
- @layer variables {}
89
-
90
- @layer variables {}
91
-
92
- @layer variables {}
93
-
94
34
  .db-custom-button label, .db-custom-button button, .db-custom-button a {
95
35
  font: var(--db-type-body-md);
96
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
97
- }
98
- @layer variables {
99
- .db-custom-button label, .db-custom-button button, .db-custom-button a {
100
- /* Those variables are only for components to calculate heights and change icons */
101
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
102
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
103
- }
36
+ /* Those variables are only for components to calculate heights and change icons */
37
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
38
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
104
39
  }
105
40
 
106
- @layer variables {}
107
-
108
- @layer variables {}
109
-
110
41
  .db-custom-button[data-size=small] label, .db-custom-button[data-size=small] button, .db-custom-button[data-size=small] a {
111
42
  font: var(--db-type-body-sm);
112
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
43
+ /* Those variables are only for components to calculate heights and change icons */
44
+ --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
45
+ --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
113
46
  }
114
- @layer variables {
115
- .db-custom-button[data-size=small] label, .db-custom-button[data-size=small] button, .db-custom-button[data-size=small] a {
116
- /* Those variables are only for components to calculate heights and change icons */
117
- --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
118
- --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
119
- }
120
- }
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
- @layer variables {}
141
47
 
142
48
  .db-custom-button label, .db-custom-button button, .db-custom-button a {
143
49
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);