@db-ux/core-components 4.3.2 → 4.4.1-footer-28739e3

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/build/components/footer/footer.css +157 -0
  3. package/build/components/footer/footer.scss +135 -0
  4. package/build/components/select/select.css +2 -1
  5. package/build/components/select/select.scss +4 -1
  6. package/build/styles/absolute.css +2 -2
  7. package/build/styles/index.css +2 -2
  8. package/build/styles/index.scss +1 -0
  9. package/build/styles/relative.css +2 -2
  10. package/build/styles/rollup.css +2 -2
  11. package/build/styles/webpack.css +2 -2
  12. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @db-ux/core-components
2
2
 
3
+ ## 4.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: add `role` property to DBNotification & automatically add role based on semantic if no `role` or `ariaLive` is provided to increase UX for screen-reader users - [see commit 177d71e](https://github.com/db-ux-design-system/core-web/commit/177d71e287a64a6491ba446e7812d0adbda1717e)
8
+
9
+ - feat(DBSelect): hide empty first option in `required` selects with placeholder after the first user selection, and add `showEmptyOption` prop to overwrite this - [see commit 4280bc4](https://github.com/db-ux-design-system/core-web/commit/4280bc47538d6983d6bb5575f012b6c6b25b40e8)
10
+
3
11
  ## 4.3.2
4
12
 
5
13
  ### Patch Changes
package/build/components/footer/footer.css ADDED
@@ -0,0 +1,157 @@
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
+ /* Variants for adaptive components like input, select, notification, ... */
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
+ /**
47
+ * @mixin screen-min-max
48
+ * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
49
+ */
50
+ .db-footer {
51
+ background-color: var(--db-adaptive-bg-basic-level-1-default);
52
+ flex-direction: column;
53
+ }
54
+ .db-footer:not([hidden]) {
55
+ display: flex;
56
+ }
57
+ .db-footer[data-width=small] .db-footer-content-container {
58
+ margin-inline: auto;
59
+ max-inline-size: 48em;
60
+ }
61
+ .db-footer[data-width=medium] .db-footer-content-container {
62
+ margin-inline: auto;
63
+ max-inline-size: 64em;
64
+ }
65
+ .db-footer[data-width=large] .db-footer-content-container {
66
+ margin-inline: auto;
67
+ max-inline-size: 90em;
68
+ }
69
+ .db-footer .db-footer-main {
70
+ border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
71
+ min-block-size: var(--db-sizing-lg);
72
+ padding-block: var(--db-spacing-fixed-md);
73
+ padding-inline: var(--db-spacing-fixed-lg);
74
+ align-items: center;
75
+ justify-content: center;
76
+ }
77
+ .db-footer .db-footer-main:not([hidden]) {
78
+ display: flex;
79
+ }
80
+ .db-footer .db-footer-main .db-footer-content-container {
81
+ flex: 1 0 0;
82
+ align-items: center;
83
+ justify-content: center;
84
+ min-block-size: 1px;
85
+ min-inline-size: 1px;
86
+ }
87
+ .db-footer .db-footer-main .db-footer-content-container:not([hidden]) {
88
+ display: flex;
89
+ }
90
+ .db-footer .db-footer-main .db-footer-content-container .db-footer-main-inner {
91
+ flex: 1 0 0;
92
+ flex-direction: row;
93
+ align-items: center;
94
+ align-self: stretch;
95
+ }
96
+ .db-footer .db-footer-main .db-footer-content-container .db-footer-main-inner:not([hidden]) {
97
+ display: flex;
98
+ }
99
+ .db-footer .db-footer-main .db-footer-content-container .db-footer-main-inner > * {
100
+ flex: 1 0 0;
101
+ flex-direction: column;
102
+ align-items: center;
103
+ justify-content: center;
104
+ block-size: 100%;
105
+ min-block-size: 1px;
106
+ min-inline-size: 1px;
107
+ }
108
+ .db-footer .db-footer-main .db-footer-content-container .db-footer-main-inner > *:not([hidden]) {
109
+ display: flex;
110
+ }
111
+ .db-footer .db-footer-meta {
112
+ background-color: var(--db-adaptive-bg-basic-level-2-default);
113
+ border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
114
+ min-block-size: var(--db-sizing-md);
115
+ padding-block: var(--db-spacing-fixed-xs);
116
+ padding-inline: var(--db-spacing-fixed-lg);
117
+ align-items: center;
118
+ justify-content: center;
119
+ }
120
+ .db-footer .db-footer-meta:not([hidden]) {
121
+ display: flex;
122
+ }
123
+ .db-footer .db-footer-meta .db-footer-content-container {
124
+ flex: 1 0 0;
125
+ gap: var(--db-spacing-fixed-sm);
126
+ align-items: center;
127
+ min-block-size: 1px;
128
+ min-inline-size: 1px;
129
+ }
130
+ .db-footer .db-footer-meta .db-footer-content-container:not([hidden]) {
131
+ display: flex;
132
+ }
133
+ .db-footer .db-footer-meta .db-footer-content-container > *:not(.db-footer-copyright) {
134
+ flex: 1 0 0;
135
+ }
136
+ .db-footer .db-footer-meta .db-footer-content-container > *:not(.db-footer-copyright):not([hidden]) {
137
+ display: flex;
138
+ }
139
+ .db-footer .db-footer-meta .db-footer-content-container .db-footer-meta-inner {
140
+ gap: var(--db-spacing-fixed-sm);
141
+ align-items: center;
142
+ flex: 1 0 0;
143
+ }
144
+ .db-footer .db-footer-meta .db-footer-content-container .db-footer-meta-inner:not([hidden]) {
145
+ display: flex;
146
+ }
147
+ .db-footer .db-footer-meta .db-footer-content-container .db-footer-meta-inner > *:not(.db-footer-copyright) {
148
+ flex: 1 0 0;
149
+ }
150
+ .db-footer .db-footer-meta .db-footer-content-container .db-footer-meta-inner > *:not(.db-footer-copyright):not([hidden]) {
151
+ display: flex;
152
+ }
153
+ .db-footer .db-footer-meta .db-footer-copyright {
154
+ font: var(--db-type-body-sm);
155
+ color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
156
+ white-space: nowrap;
157
+ }
package/build/components/footer/footer.scss ADDED
@@ -0,0 +1,135 @@
1
+ @use "@db-ux/core-foundations/build/styles/variables";
2
+ @use "@db-ux/core-foundations/build/styles/screen-sizes";
3
+ @use "@db-ux/core-foundations/build/styles/helpers";
4
+ @use "@db-ux/core-foundations/build/styles/colors";
5
+
6
+ .db-footer {
7
+ background-color: colors.$db-adaptive-bg-basic-level-1-default;
8
+
9
+
10
+ @include helpers.display(flex);
11
+
12
+ flex-direction: column;
13
+
14
+ &[data-width="small"] {
15
+ .db-footer-content-container {
16
+ margin-inline: auto;
17
+ max-inline-size: screen-sizes.$db-breakpoint-sm;
18
+ }
19
+ }
20
+
21
+ &[data-width="medium"] {
22
+ .db-footer-content-container {
23
+ margin-inline: auto;
24
+ max-inline-size: screen-sizes.$db-breakpoint-md;
25
+ }
26
+ }
27
+
28
+ &[data-width="large"] {
29
+ .db-footer-content-container {
30
+ margin-inline: auto;
31
+ max-inline-size: screen-sizes.$db-breakpoint-lg;
32
+ }
33
+ }
34
+
35
+ .db-footer-main {
36
+ border-block-start: variables.$db-border-width-3xs solid
37
+ colors.$db-adaptive-on-bg-basic-emphasis-60-default;
38
+ min-block-size: variables.$db-sizing-lg;
39
+
40
+ // Use design token directly to satisfy spacing lint rules
41
+ padding-block: variables.$db-spacing-fixed-md;
42
+ padding-inline: variables.$db-spacing-fixed-lg;
43
+
44
+ @include helpers.display(flex);
45
+
46
+ align-items: center;
47
+ justify-content: center;
48
+
49
+ .db-footer-content-container {
50
+ @include helpers.display(flex);
51
+
52
+ flex: 1 0 0;
53
+ align-items: center;
54
+ justify-content: center;
55
+ min-block-size: 1px;
56
+ min-inline-size: 1px;
57
+
58
+ .db-footer-main-inner {
59
+ @include helpers.display(flex);
60
+
61
+ flex: 1 0 0;
62
+ flex-direction: row;
63
+ align-items: center;
64
+ align-self: stretch;
65
+
66
+ > * {
67
+ @include helpers.display(flex);
68
+
69
+ flex: 1 0 0;
70
+ flex-direction: column;
71
+ align-items: center;
72
+ justify-content: center;
73
+ block-size: 100%;
74
+ min-block-size: 1px;
75
+ min-inline-size: 1px;
76
+ }
77
+ }
78
+ }
79
+ }
80
+
81
+ .db-footer-meta {
82
+ background-color: colors.$db-adaptive-bg-basic-level-2-default;
83
+ border-block-start: variables.$db-border-width-3xs solid
84
+ colors.$db-adaptive-on-bg-basic-emphasis-60-default;
85
+
86
+ // Ensure visible height per design
87
+ min-block-size: variables.$db-sizing-md;
88
+
89
+ // Use design token directly to satisfy spacing lint rules
90
+ padding-block: variables.$db-spacing-fixed-xs;
91
+ padding-inline: variables.$db-spacing-fixed-lg;
92
+
93
+ @include helpers.display(flex);
94
+
95
+ align-items: center;
96
+ justify-content: center;
97
+
98
+ .db-footer-content-container {
99
+ @include helpers.display(flex);
100
+
101
+ flex: 1 0 0;
102
+ gap: variables.$db-spacing-fixed-sm;
103
+ align-items: center;
104
+ min-block-size: 1px;
105
+ min-inline-size: 1px;
106
+
107
+ > *:not(.db-footer-copyright) {
108
+ @include helpers.display(flex);
109
+
110
+ flex: 1 0 0;
111
+ }
112
+
113
+ // Inner wrapper to align copyright + meta slot horizontally
114
+ .db-footer-meta-inner {
115
+ @include helpers.display(flex);
116
+
117
+ gap: variables.$db-spacing-fixed-sm;
118
+ align-items: center;
119
+ flex: 1 0 0;
120
+
121
+ > *:not(.db-footer-copyright) {
122
+ @include helpers.display(flex);
123
+
124
+ flex: 1 0 0;
125
+ }
126
+ }
127
+ }
128
+
129
+ .db-footer-copyright {
130
+ font: var(--db-type-body-sm);
131
+ color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
132
+ white-space: nowrap;
133
+ }
134
+ }
135
+ }
package/build/components/select/select.css CHANGED
@@ -950,6 +950,7 @@ select[aria-disabled=true]) {
950
950
  .db-select optgroup {
951
951
  background-color: var(--db-adaptive-bg-basic-level-3-default);
952
952
  }
953
- .db-select:has(> select option:checked:not(.placeholder)) [id$=-placeholder] {
953
+ .db-select:has(> select option:checked:not(.placeholder)) [id$=-placeholder],
954
+ .db-select:has(> select option:checked:not(.placeholder)) option[data-show-empty-option=false] {
954
955
  display: none;
955
956
  }
package/build/components/select/select.scss CHANGED
@@ -45,7 +45,10 @@
45
45
  }
46
46
 
47
47
  &:has(> select option:checked:not(.placeholder)) {
48
- [id$="-placeholder"] {
48
+ [id$="-placeholder"],
49
+ // Hide placeholder option in dropdown for required selects after a selection has been made
50
+ // This prevents users from selecting an invalid empty option when the field is required
51
+ option[data-show-empty-option="false"] {
49
52
  display: none;
50
53
  }
51
54
  }