@db-ux/core-components 4.4.2 → 4.5.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 (63) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/build/components/accordion/accordion.css +0 -14
  3. package/build/components/accordion-item/accordion-item.css +38 -29
  4. package/build/components/accordion-item/accordion-item.scss +1 -1
  5. package/build/components/badge/badge.css +75 -33
  6. package/build/components/badge/badge.scss +6 -1
  7. package/build/components/brand/brand.css +2 -18
  8. package/build/components/brand/brand.scss +2 -0
  9. package/build/components/button/button.css +245 -82
  10. package/build/components/button/button.scss +1 -105
  11. package/build/components/card/card.css +88 -30
  12. package/build/components/checkbox/checkbox.css +1 -22
  13. package/build/components/custom-button/custom-button.css +892 -0
  14. package/build/components/custom-button/custom-button.scss +78 -0
  15. package/build/components/custom-select/custom-select.css +19 -25
  16. package/build/components/custom-select-dropdown/custom-select-dropdown.css +1 -22
  17. package/build/components/custom-select-dropdown/custom-select-dropdown.scss +1 -0
  18. package/build/components/custom-select-form-field/custom-select-form-field.css +0 -22
  19. package/build/components/custom-select-list/custom-select-list.css +0 -22
  20. package/build/components/custom-select-list-item/custom-select-list-item.css +36 -28
  21. package/build/components/divider/divider.css +0 -10
  22. package/build/components/drawer/drawer.css +4 -14
  23. package/build/components/drawer/drawer.scss +4 -0
  24. package/build/components/header/header.css +0 -22
  25. package/build/components/icon/icon.css +0 -10
  26. package/build/components/infotext/infotext.css +4 -18
  27. package/build/components/infotext/infotext.scss +4 -0
  28. package/build/components/input/input.css +19 -25
  29. package/build/components/link/link.css +73 -34
  30. package/build/components/navigation/navigation.css +0 -22
  31. package/build/components/navigation-item/navigation-item.css +111 -43
  32. package/build/components/navigation-item/navigation-item.scss +2 -1
  33. package/build/components/notification/notification.css +37 -28
  34. package/build/components/page/page.css +0 -10
  35. package/build/components/popover/popover.css +26 -14
  36. package/build/components/radio/radio.css +0 -22
  37. package/build/components/section/section.css +0 -14
  38. package/build/components/select/select.css +19 -25
  39. package/build/components/stack/stack-web-component.css +0 -10
  40. package/build/components/stack/stack.css +0 -10
  41. package/build/components/switch/switch.css +1 -22
  42. package/build/components/tab-item/tab-item.css +52 -32
  43. package/build/components/tab-list/tab-list.css +0 -22
  44. package/build/components/tab-panel/tab-panel.css +0 -10
  45. package/build/components/tabs/tabs.css +2 -22
  46. package/build/components/tabs/tabs.scss +2 -0
  47. package/build/components/tag/tag.css +859 -150
  48. package/build/components/textarea/textarea.css +18 -25
  49. package/build/components/tooltip/tooltip.css +30 -23
  50. package/build/components/tooltip/tooltip.scss +12 -10
  51. package/build/styles/absolute.css +10 -10
  52. package/build/styles/index.css +9 -9
  53. package/build/styles/index.scss +1 -0
  54. package/build/styles/internal/_button-components.scss +140 -2
  55. package/build/styles/internal/_custom-elements.scss +1 -1
  56. package/build/styles/internal/_icon-passing.scss +23 -3
  57. package/build/styles/internal/_popover-component.scss +19 -9
  58. package/build/styles/internal/_tag-components.scss +1 -0
  59. package/build/styles/relative.css +10 -10
  60. package/build/styles/rollup.css +10 -10
  61. package/build/styles/wc-workarounds.css +1 -1
  62. package/build/styles/webpack.css +10 -10
  63. package/package.json +10 -9
package/build/components/card/card.css CHANGED
@@ -1,13 +1,3 @@
1
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
- /* The primary use-case for responsive spacings are
4
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
- /* Elevation */
6
- /* Border */
7
- /* Opacity */
8
- /* Transitions */
9
- /* Screen sizes */
10
- /* Container sizes */
11
1
  /* Variants for adaptive components like input, select, notification, ... */
12
2
  @layer variables {}
13
3
 
@@ -43,10 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
43
33
 
44
34
  @layer variables {}
45
35
 
46
- /**
47
- * @mixin screen-min-max
48
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
49
- */
50
36
  .db-card {
51
37
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
52
38
  }
@@ -67,30 +53,72 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
67
53
  padding: unset;
68
54
  font: inherit;
69
55
  }
70
- :is(a[href], button):hover:not(:disabled, [aria-disabled=true]) {
56
+ :is(a[href], button):hover:not(:disabled,
57
+ [aria-disabled=true],
58
+ [tabindex="-1"],
59
+ :has(:disabled)) {
71
60
  cursor: var(--db-overwrite-cursor, pointer);
72
61
  }
73
- :is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > .db-card,
74
- :is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
62
+ :is(a[href], button):hover:not(:disabled,
63
+ [aria-disabled=true],
64
+ [tabindex="-1"],
65
+ :has(:disabled)) > .db-card,
66
+ :is(a[href], button):hover:not(:disabled,
67
+ [aria-disabled=true],
68
+ [tabindex="-1"],
69
+ :has(:disabled)) > db-card > .db-card {
75
70
  background-color: var(--db-card-background-color-hovered);
76
71
  }
77
- :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input) {
72
+ :is(a[href], button):hover:not(:disabled,
73
+ [aria-disabled=true],
74
+ [tabindex="-1"],
75
+ :has(:disabled)):is(textarea), :is(a[href], button):hover:not(:disabled,
76
+ [aria-disabled=true],
77
+ [tabindex="-1"],
78
+ :has(:disabled)):is(input) {
78
79
  cursor: initial;
79
80
  }
80
- :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
81
+ :is(a[href], button):hover:not(:disabled,
82
+ [aria-disabled=true],
83
+ [tabindex="-1"],
84
+ :has(:disabled)):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled,
85
+ [aria-disabled=true],
86
+ [tabindex="-1"],
87
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
81
88
  cursor: pointer;
82
89
  }
83
- :is(a[href], button):active:not(:disabled, [aria-disabled=true]) {
90
+ :is(a[href], button):active:not(:disabled,
91
+ [aria-disabled=true],
92
+ [tabindex="-1"],
93
+ :has(:disabled)) {
84
94
  cursor: var(--db-overwrite-cursor, pointer);
85
95
  }
86
- :is(a[href], button):active:not(:disabled, [aria-disabled=true]) > .db-card,
87
- :is(a[href], button):active:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
96
+ :is(a[href], button):active:not(:disabled,
97
+ [aria-disabled=true],
98
+ [tabindex="-1"],
99
+ :has(:disabled)) > .db-card,
100
+ :is(a[href], button):active:not(:disabled,
101
+ [aria-disabled=true],
102
+ [tabindex="-1"],
103
+ :has(:disabled)) > db-card > .db-card {
88
104
  background-color: var(--db-card-background-color-pressed);
89
105
  }
90
- :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input) {
106
+ :is(a[href], button):active:not(:disabled,
107
+ [aria-disabled=true],
108
+ [tabindex="-1"],
109
+ :has(:disabled)):is(textarea), :is(a[href], button):active:not(:disabled,
110
+ [aria-disabled=true],
111
+ [tabindex="-1"],
112
+ :has(:disabled)):is(input) {
91
113
  cursor: initial;
92
114
  }
93
- :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
115
+ :is(a[href], button):active:not(:disabled,
116
+ [aria-disabled=true],
117
+ [tabindex="-1"],
118
+ :has(:disabled)):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled,
119
+ [aria-disabled=true],
120
+ [tabindex="-1"],
121
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
94
122
  cursor: pointer;
95
123
  }
96
124
 
@@ -123,24 +151,54 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
123
151
  .db-card[data-behavior=interactive] {
124
152
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
125
153
  }
126
- .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
154
+ .db-card[data-behavior=interactive]:hover:not(:disabled,
155
+ [aria-disabled=true],
156
+ [tabindex="-1"],
157
+ :has(:disabled)) {
127
158
  cursor: var(--db-overwrite-cursor, pointer);
128
159
  background-color: var(--db-card-background-color-hovered);
129
160
  }
130
- .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
161
+ .db-card[data-behavior=interactive]:hover:not(:disabled,
162
+ [aria-disabled=true],
163
+ [tabindex="-1"],
164
+ :has(:disabled)):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled,
165
+ [aria-disabled=true],
166
+ [tabindex="-1"],
167
+ :has(:disabled)):is(input) {
131
168
  cursor: initial;
132
169
  }
133
- .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
170
+ .db-card[data-behavior=interactive]:hover:not(:disabled,
171
+ [aria-disabled=true],
172
+ [tabindex="-1"],
173
+ :has(:disabled)):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled,
174
+ [aria-disabled=true],
175
+ [tabindex="-1"],
176
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
134
177
  cursor: pointer;
135
178
  }
136
- .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
179
+ .db-card[data-behavior=interactive]:active:not(:disabled,
180
+ [aria-disabled=true],
181
+ [tabindex="-1"],
182
+ :has(:disabled)) {
137
183
  cursor: var(--db-overwrite-cursor, pointer);
138
184
  background-color: var(--db-card-background-color-pressed);
139
185
  }
140
- .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
186
+ .db-card[data-behavior=interactive]:active:not(:disabled,
187
+ [aria-disabled=true],
188
+ [tabindex="-1"],
189
+ :has(:disabled)):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled,
190
+ [aria-disabled=true],
191
+ [tabindex="-1"],
192
+ :has(:disabled)):is(input) {
141
193
  cursor: initial;
142
194
  }
143
- .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
195
+ .db-card[data-behavior=interactive]:active:not(:disabled,
196
+ [aria-disabled=true],
197
+ [tabindex="-1"],
198
+ :has(:disabled)):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled,
199
+ [aria-disabled=true],
200
+ [tabindex="-1"],
201
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
144
202
  cursor: pointer;
145
203
  }
146
204
  .db-card[data-elevation-level="2"] {
package/build/components/checkbox/checkbox.css CHANGED
@@ -1,13 +1,3 @@
1
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
- /* The primary use-case for responsive spacings are
4
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
- /* Elevation */
6
- /* Border */
7
- /* Opacity */
8
- /* Transitions */
9
- /* Screen sizes */
10
- /* Container sizes */
11
1
  .db-visually-hidden,
12
2
  [data-visually-hidden=true] {
13
3
  clip: rect(0, 0, 0, 0) !important;
@@ -81,6 +71,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
81
71
  text-transform: none;
82
72
  overflow: clip;
83
73
  vertical-align: var(--db-icon-vertical-align, middle);
74
+ /* stylelint-disable-next-line db-ux/use-sizing */
84
75
  block-size: var(--db-icon-font-size, 1.5rem);
85
76
  aspect-ratio: 1;
86
77
  flex-shrink: 0;
@@ -102,12 +93,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
102
93
  }
103
94
  }
104
95
 
105
- /**
106
- Generates 3 types of placeholders, e.g:
107
- - %db-component-variables-md
108
- - %db-font-size-md
109
- - %db-overwrite-font-size-md
110
- */
111
96
  @layer variables {}
112
97
 
113
98
  @layer variables {}
@@ -182,12 +167,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
182
167
 
183
168
  @layer variables {}
184
169
 
185
- /* Use for body tags like <p> */
186
- /* Use for headline tags like <h1> */
187
- /**
188
- * @mixin screen-min-max
189
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
190
- */
191
170
  .db-checkbox > db-infotext > .db-infotext,
192
171
  .db-checkbox > .db-infotext {
193
172
  margin-block-start: var(--db-spacing-fixed-2xs);