@momentum-design/components 0.120.19 → 0.120.21
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 +174 -247
- package/dist/browser/index.js.map +3 -3
- package/dist/components/checkbox/checkbox.component.d.ts +8 -0
- package/dist/components/checkbox/checkbox.component.js +8 -0
- package/dist/components/checkbox/checkbox.styles.js +3 -3
- package/dist/components/combobox/combobox.component.d.ts +8 -6
- package/dist/components/combobox/combobox.component.js +8 -6
- package/dist/components/combobox/combobox.styles.js +5 -25
- package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +9 -0
- package/dist/components/formfieldgroup/formfieldgroup.component.js +9 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +9 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.component.js +9 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.styles.d.ts +2 -2
- package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +68 -66
- package/dist/components/input/input.component.d.ts +11 -13
- package/dist/components/input/input.component.js +11 -13
- package/dist/components/input/input.styles.js +33 -50
- package/dist/components/password/password.component.d.ts +31 -27
- package/dist/components/password/password.component.js +31 -27
- package/dist/components/progressbar/progressbar.component.d.ts +15 -20
- package/dist/components/progressbar/progressbar.component.js +16 -21
- package/dist/components/progressbar/progressbar.styles.js +7 -19
- package/dist/components/searchfield/searchfield.component.d.ts +30 -0
- package/dist/components/searchfield/searchfield.component.js +30 -0
- package/dist/components/select/select.component.d.ts +19 -21
- package/dist/components/select/select.component.js +19 -21
- package/dist/components/select/select.styles.js +14 -29
- package/dist/components/tab/tab.component.js +0 -1
- package/dist/components/tab/tab.styles.js +16 -8
- package/dist/components/textarea/textarea.component.d.ts +20 -18
- package/dist/components/textarea/textarea.component.js +20 -18
- package/dist/components/textarea/textarea.styles.js +27 -49
- package/dist/custom-elements.json +1708 -1324
- package/dist/react/checkbox/index.d.ts +8 -0
- package/dist/react/checkbox/index.js +8 -0
- package/dist/react/combobox/index.d.ts +8 -6
- package/dist/react/combobox/index.js +8 -6
- package/dist/react/formfieldgroup/index.d.ts +9 -0
- package/dist/react/formfieldgroup/index.js +9 -0
- package/dist/react/formfieldwrapper/index.d.ts +9 -0
- package/dist/react/formfieldwrapper/index.js +9 -0
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/dist/react/input/index.d.ts +11 -13
- package/dist/react/input/index.js +11 -13
- package/dist/react/password/index.d.ts +31 -27
- package/dist/react/password/index.js +31 -27
- package/dist/react/progressbar/index.d.ts +15 -20
- package/dist/react/progressbar/index.js +15 -20
- package/dist/react/searchfield/index.d.ts +30 -0
- package/dist/react/searchfield/index.js +30 -0
- package/dist/react/select/index.d.ts +19 -21
- package/dist/react/select/index.js +19 -21
- package/dist/react/textarea/index.d.ts +20 -18
- package/dist/react/textarea/index.js +20 -18
- package/package.json +1 -1
@@ -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
|
}
|
@@ -37,20 +37,10 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
|
|
37
37
|
* @dependency mdc-text
|
38
38
|
* @dependency mdc-toggletip
|
39
39
|
*
|
40
|
-
* @
|
41
|
-
* @
|
42
|
-
* @
|
43
|
-
* @
|
44
|
-
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
45
|
-
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
46
|
-
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
47
|
-
* @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
|
48
|
-
* @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
|
49
|
-
* @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
|
50
|
-
* @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
|
51
|
-
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
52
|
-
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
53
|
-
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
40
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
41
|
+
* @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
|
42
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
43
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
54
44
|
*
|
55
45
|
* @csspart label - The label element.
|
56
46
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -60,10 +50,22 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
|
|
60
50
|
* @csspart help-text - The helper/validation text element.
|
61
51
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
62
52
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
63
|
-
*
|
64
|
-
* @
|
65
|
-
* @
|
66
|
-
* @
|
53
|
+
*
|
54
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
55
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
56
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
57
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
58
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
59
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
60
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
61
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
62
|
+
* @cssproperty --mdc-textarea-text-color - Text color for the textarea field
|
63
|
+
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
64
|
+
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
65
|
+
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
66
|
+
* @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
|
67
|
+
* @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
|
68
|
+
* @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
|
67
69
|
*/
|
68
70
|
declare class Textarea extends Textarea_base {
|
69
71
|
/**
|
@@ -52,20 +52,10 @@ import styles from './textarea.styles';
|
|
52
52
|
* @dependency mdc-text
|
53
53
|
* @dependency mdc-toggletip
|
54
54
|
*
|
55
|
-
* @
|
56
|
-
* @
|
57
|
-
* @
|
58
|
-
* @
|
59
|
-
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
60
|
-
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
61
|
-
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
62
|
-
* @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
|
63
|
-
* @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
|
64
|
-
* @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
|
65
|
-
* @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
|
66
|
-
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
67
|
-
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
68
|
-
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
55
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
56
|
+
* @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
|
57
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
58
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
69
59
|
*
|
70
60
|
* @csspart label - The label element.
|
71
61
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -75,10 +65,22 @@ import styles from './textarea.styles';
|
|
75
65
|
* @csspart help-text - The helper/validation text element.
|
76
66
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
77
67
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
78
|
-
*
|
79
|
-
* @
|
80
|
-
* @
|
81
|
-
* @
|
68
|
+
*
|
69
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
70
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
71
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
72
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
73
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
74
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
75
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
76
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
77
|
+
* @cssproperty --mdc-textarea-text-color - Text color for the textarea field
|
78
|
+
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
79
|
+
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
80
|
+
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
81
|
+
* @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
|
82
|
+
* @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
|
83
|
+
* @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
|
82
84
|
*/
|
83
85
|
class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
|
84
86
|
constructor() {
|
@@ -3,43 +3,15 @@ import { hostFocusRingStyles } from '../../utils/styles';
|
|
3
3
|
const styles = [
|
4
4
|
css `
|
5
5
|
:host {
|
6
|
-
--mdc-textarea-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
|
7
|
-
--mdc-textarea-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
|
8
|
-
--mdc-textarea-disabled-background-color: var(--mds-color-theme-background-input-disabled);
|
9
6
|
--mdc-textarea-text-color: var(--mds-color-theme-text-primary-normal);
|
10
|
-
--mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
|
11
7
|
--mdc-textarea-border-color: var(--mds-color-theme-outline-input-normal);
|
8
|
+
--mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
|
9
|
+
--mdc-textarea-container-background-color: var(--mds-color-theme-background-primary-ghost);
|
12
10
|
--mdc-textarea-text-secondary-normal: var(--mds-color-theme-text-secondary-normal);
|
13
|
-
--mdc-textarea-error-border-color: var(--mds-color-theme-text-error-normal);
|
14
|
-
--mdc-textarea-warning-border-color: var(--mds-color-theme-text-warning-normal);
|
15
|
-
--mdc-textarea-success-border-color: var(--mds-color-theme-text-success-normal);
|
16
|
-
--mdc-textarea-primary-border-color: var(--mds-color-theme-text-accent-normal);
|
17
|
-
--mdc-textarea-hover-background-color: var(--mds-color-theme-background-primary-hover);
|
18
|
-
--mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-ghost);
|
19
|
-
--mdc-textarea-focused-border-color: var(--mds-color-theme-outline-input-active);
|
20
11
|
--mdc-textarea-text-font-size: var(--mds-font-size-body-midsize);
|
21
12
|
--mdc-textarea-text-line-height: var(--mds-font-lineheight-body-midsize);
|
22
13
|
}
|
23
14
|
|
24
|
-
:host([disabled])::part(textarea),
|
25
|
-
:host([disabled])::part(textarea)::placeholder {
|
26
|
-
color: var(--mdc-input-disabled-text-color);
|
27
|
-
}
|
28
|
-
|
29
|
-
:host([disabled])::part(textarea-container),
|
30
|
-
:host([readonly])::part(textarea-container) {
|
31
|
-
border-color: var(--mdc-textarea-disabled-border-color);
|
32
|
-
background: var(--mdc-textarea-disabled-background-color);
|
33
|
-
}
|
34
|
-
|
35
|
-
:host([disabled][help-text-type='default'])::part(textarea-container),
|
36
|
-
:host([disabled][help-text-type='success'])::part(textarea-container),
|
37
|
-
:host([disabled][help-text-type='warning'])::part(textarea-container),
|
38
|
-
:host([disabled][help-text-type='error'])::part(textarea-container),
|
39
|
-
:host([disabled][help-text-type='priority'])::part(textarea-container) {
|
40
|
-
border-color: var(--mdc-textarea-disabled-border-color);
|
41
|
-
}
|
42
|
-
|
43
15
|
:host::part(textarea) {
|
44
16
|
min-height: 6.25rem;
|
45
17
|
color: var(--mdc-textarea-text-color);
|
@@ -60,6 +32,7 @@ const styles = [
|
|
60
32
|
border: 0.0625rem solid var(--mdc-textarea-border-color);
|
61
33
|
overflow: hidden;
|
62
34
|
padding: 0.375rem 0.25rem 0.25rem 0.75rem;
|
35
|
+
background-color: var(--mdc-textarea-container-background-color);
|
63
36
|
}
|
64
37
|
|
65
38
|
:host(:dir(rtl))::part(textarea-container) {
|
@@ -67,13 +40,13 @@ const styles = [
|
|
67
40
|
}
|
68
41
|
|
69
42
|
:host(:not([disabled]))::part(textarea-container):hover {
|
70
|
-
background-color: var(--
|
43
|
+
--mdc-textarea-container-background-color: var(--mds-color-theme-background-primary-hover);
|
71
44
|
}
|
72
45
|
|
73
46
|
:host(:not([disabled]))::part(textarea-container):active,
|
74
47
|
:host(:not([disabled]))::part(textarea-container):focus-within {
|
75
|
-
background-color: var(--
|
76
|
-
border-color: var(--
|
48
|
+
--mdc-textarea-container-background-color: var(--mds-color-theme-background-primary-ghost);
|
49
|
+
--mdc-textarea-border-color: var(--mds-color-theme-outline-input-active);
|
77
50
|
}
|
78
51
|
|
79
52
|
:host::part(textarea-footer) {
|
@@ -83,7 +56,7 @@ const styles = [
|
|
83
56
|
width: 100%;
|
84
57
|
}
|
85
58
|
|
86
|
-
|
59
|
+
textarea::placeholder {
|
87
60
|
color: var(--mdc-textarea-text-secondary-normal);
|
88
61
|
}
|
89
62
|
|
@@ -93,28 +66,33 @@ const styles = [
|
|
93
66
|
}
|
94
67
|
|
95
68
|
:host([help-text-type='error'])::part(character-counter) {
|
96
|
-
color: var(--mdc-
|
97
|
-
}
|
98
|
-
|
99
|
-
:host([disabled])::part(character-counter) {
|
100
|
-
color: var(--mds-color-theme-text-primary-disabled);
|
69
|
+
color: var(--mdc-help-text-color);
|
101
70
|
}
|
102
71
|
|
103
72
|
:host([help-text-type='error'])::part(textarea-container),
|
104
|
-
:host([help-text-type='error'])::part(textarea-container):focus-within
|
105
|
-
border-color: var(--mdc-textarea-error-border-color);
|
106
|
-
}
|
73
|
+
:host([help-text-type='error'])::part(textarea-container):focus-within,
|
107
74
|
:host([help-text-type='warning'])::part(textarea-container),
|
108
|
-
:host([help-text-type='warning'])::part(textarea-container):focus-within
|
109
|
-
border-color: var(--mdc-textarea-warning-border-color);
|
110
|
-
}
|
75
|
+
:host([help-text-type='warning'])::part(textarea-container):focus-within,
|
111
76
|
:host([help-text-type='success'])::part(textarea-container),
|
112
|
-
:host([help-text-type='success'])::part(textarea-container):focus-within
|
113
|
-
border-color: var(--mdc-textarea-success-border-color);
|
114
|
-
}
|
77
|
+
:host([help-text-type='success'])::part(textarea-container):focus-within,
|
115
78
|
:host([help-text-type='priority'])::part(textarea-container),
|
116
79
|
:host([help-text-type='priority'])::part(textarea-container):focus-within {
|
117
|
-
border-color: var(--mdc-
|
80
|
+
--mdc-textarea-border-color: var(--mdc-help-text-color);
|
81
|
+
}
|
82
|
+
|
83
|
+
:host([disabled])::part(character-counter) {
|
84
|
+
color: var(--mds-color-theme-text-primary-disabled);
|
85
|
+
}
|
86
|
+
|
87
|
+
:host([disabled])::part(textarea),
|
88
|
+
:host([disabled]) textarea::placeholder {
|
89
|
+
color: var(--mdc-input-disabled-text-color);
|
90
|
+
}
|
91
|
+
|
92
|
+
:host([disabled])::part(textarea-container),
|
93
|
+
:host([readonly])::part(textarea-container) {
|
94
|
+
--mdc-textarea-border-color: var(--mds-color-theme-outline-primary-disabled);
|
95
|
+
--mdc-textarea-container-background-color: var(--mds-color-theme-background-input-disabled);
|
118
96
|
}
|
119
97
|
|
120
98
|
.hidden {
|