@momentum-design/components 0.120.18 → 0.120.20

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.
@@ -19,13 +19,31 @@ const styles = css `
19
19
  flex-direction: column;
20
20
  justify-content: center;
21
21
  align-items: center;
22
- gap: 1rem;
23
22
  position: absolute;
24
23
  right: 50%;
25
24
  bottom: 50%;
26
25
  transform: translate(50%, 50%);
27
26
  }
28
27
 
28
+ :host > [part="body"]:first-of-type {
29
+ margin-top: 0;
30
+ }
31
+
32
+ :host > [part="dialog-close-btn"] {
33
+ margin-top: 0;
34
+ }
35
+
36
+ :host > slot[name="footer"] {
37
+ margin-top: 0;
38
+ }
39
+
40
+ slot[name="footer-link"]::slotted(*),
41
+ slot[name="footer-button-primary"]::slotted(*),
42
+ slot[name="footer-button-secondary"]::slotted(*),
43
+ slot[name="footer"]::slotted(*) {
44
+ margin-top: 1rem;
45
+ }
46
+
29
47
  :host([variant='promotional']) {
30
48
  --mdc-dialog-border-color: var(--mds-color-theme-outline-promotion-normal);
31
49
  }
@@ -100,6 +118,7 @@ const styles = css `
100
118
  align-items: center;
101
119
  height: 100%;
102
120
  width: 100%;
121
+ margin-top: 1rem;
103
122
  }
104
123
 
105
124
  :host::part(footer) {
@@ -160,7 +160,6 @@ class Tab extends IconNameMixin(Buttonsimple) {
160
160
  connectedCallback() {
161
161
  super.connectedCallback();
162
162
  this.role = ROLE.TAB;
163
- this.softDisabled = undefined;
164
163
  this.size = undefined;
165
164
  this.type = undefined;
166
165
  this.ariaStateKey = 'aria-selected';
@@ -118,7 +118,8 @@ const styles = [
118
118
  visibility: hidden;
119
119
  }
120
120
 
121
- :host([disabled]) {
121
+ :host([disabled]),
122
+ :host([soft-disabled]) {
122
123
  cursor: default;
123
124
  }
124
125
 
@@ -136,7 +137,8 @@ const styles = [
136
137
  background-color: var(--mdc-tab-glass-inactive-background-color-pressed);
137
138
  }
138
139
 
139
- :host([variant='glass'][disabled]) {
140
+ :host([variant='glass'][disabled]),
141
+ :host([variant='glass'][soft-disabled]) {
140
142
  background-color: var(--mdc-tab-glass-inactive-background-color-disabled);
141
143
  color: var(--mdc-tab-glass-inactive-color-disabled);
142
144
  }
@@ -154,7 +156,8 @@ const styles = [
154
156
  background-color: var(--mdc-tab-glass-active-background-color-pressed);
155
157
  }
156
158
 
157
- :host([variant='glass'][active][disabled]) {
159
+ :host([variant='glass'][active][disabled]),
160
+ :host([variant='glass'][active][soft-disabled]) {
158
161
  background-color: var(--mdc-tab-glass-active-background-color-disabled);
159
162
  color: var(--mdc-tab-glass-active-color-disabled);
160
163
  }
@@ -176,7 +179,8 @@ const styles = [
176
179
  background-color: var(--mdc-tab-line-inactive-background-color-pressed);
177
180
  }
178
181
 
179
- :host([variant='line'][disabled]) {
182
+ :host([variant='line'][disabled]),
183
+ :host([variant='line'][soft-disabled]) {
180
184
  background-color: var(--mdc-tab-line-inactive-background-color-disabled);
181
185
  color: var(--mdc-tab-line-inactive-color-disabled);
182
186
  }
@@ -199,12 +203,14 @@ const styles = [
199
203
  background-color: var(--mdc-tab-line-active-background-color-pressed);
200
204
  }
201
205
 
202
- :host([variant='line'][active][disabled]) {
206
+ :host([variant='line'][active][disabled]),
207
+ :host([variant='line'][active][soft-disabled]) {
203
208
  background-color: var(--mdc-tab-line-active-background-color-disabled);
204
209
  color: var(--mdc-tab-line-active-color-disabled);
205
210
  }
206
211
 
207
- :host([variant='line'][active][disabled])::part(indicator) {
212
+ :host([variant='line'][active][disabled])::part(indicator),
213
+ :host([variant='line'][active][soft-disabled])::part(indicator) {
208
214
  background-color: var(--mdc-tab-line-active-indicator-color-disabled);
209
215
  }
210
216
 
@@ -222,7 +228,8 @@ const styles = [
222
228
  background-color: var(--mdc-tab-pill-inactive-background-color-pressed);
223
229
  }
224
230
 
225
- :host([variant='pill'][disabled]) {
231
+ :host([variant='pill'][disabled]),
232
+ :host([variant='pill'][soft-disabled]) {
226
233
  background-color: var(--mdc-tab-pill-inactive-background-color-disabled);
227
234
  color: var(--mdc-tab-pill-inactive-color-disabled);
228
235
  }
@@ -240,7 +247,8 @@ const styles = [
240
247
  background-color: var(--mdc-tab-pill-active-background-color-pressed);
241
248
  }
242
249
 
243
- :host([variant='pill'][active][disabled]) {
250
+ :host([variant='pill'][active][disabled]),
251
+ :host([variant='pill'][active][soft-disabled]) {
244
252
  background-color: var(--mdc-tab-pill-active-background-color-disabled);
245
253
  color: var(--mdc-tab-pill-active-color-disabled);
246
254
  }