@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.
- package/dist/browser/index.js +37 -10
- package/dist/browser/index.js.map +2 -2
- package/dist/components/dialog/dialog.styles.js +20 -1
- package/dist/components/tab/tab.component.js +0 -1
- package/dist/components/tab/tab.styles.js +16 -8
- package/dist/custom-elements.json +472 -472
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
@@ -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
|
}
|