@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.
Files changed (56) hide show
  1. package/dist/browser/index.js +174 -247
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/checkbox/checkbox.component.d.ts +8 -0
  4. package/dist/components/checkbox/checkbox.component.js +8 -0
  5. package/dist/components/checkbox/checkbox.styles.js +3 -3
  6. package/dist/components/combobox/combobox.component.d.ts +8 -6
  7. package/dist/components/combobox/combobox.component.js +8 -6
  8. package/dist/components/combobox/combobox.styles.js +5 -25
  9. package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +9 -0
  10. package/dist/components/formfieldgroup/formfieldgroup.component.js +9 -0
  11. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +9 -0
  12. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +9 -0
  13. package/dist/components/formfieldwrapper/formfieldwrapper.styles.d.ts +2 -2
  14. package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +68 -66
  15. package/dist/components/input/input.component.d.ts +11 -13
  16. package/dist/components/input/input.component.js +11 -13
  17. package/dist/components/input/input.styles.js +33 -50
  18. package/dist/components/password/password.component.d.ts +31 -27
  19. package/dist/components/password/password.component.js +31 -27
  20. package/dist/components/progressbar/progressbar.component.d.ts +15 -20
  21. package/dist/components/progressbar/progressbar.component.js +16 -21
  22. package/dist/components/progressbar/progressbar.styles.js +7 -19
  23. package/dist/components/searchfield/searchfield.component.d.ts +30 -0
  24. package/dist/components/searchfield/searchfield.component.js +30 -0
  25. package/dist/components/select/select.component.d.ts +19 -21
  26. package/dist/components/select/select.component.js +19 -21
  27. package/dist/components/select/select.styles.js +14 -29
  28. package/dist/components/tab/tab.component.js +0 -1
  29. package/dist/components/tab/tab.styles.js +16 -8
  30. package/dist/components/textarea/textarea.component.d.ts +20 -18
  31. package/dist/components/textarea/textarea.component.js +20 -18
  32. package/dist/components/textarea/textarea.styles.js +27 -49
  33. package/dist/custom-elements.json +1708 -1324
  34. package/dist/react/checkbox/index.d.ts +8 -0
  35. package/dist/react/checkbox/index.js +8 -0
  36. package/dist/react/combobox/index.d.ts +8 -6
  37. package/dist/react/combobox/index.js +8 -6
  38. package/dist/react/formfieldgroup/index.d.ts +9 -0
  39. package/dist/react/formfieldgroup/index.js +9 -0
  40. package/dist/react/formfieldwrapper/index.d.ts +9 -0
  41. package/dist/react/formfieldwrapper/index.js +9 -0
  42. package/dist/react/index.d.ts +3 -3
  43. package/dist/react/index.js +3 -3
  44. package/dist/react/input/index.d.ts +11 -13
  45. package/dist/react/input/index.js +11 -13
  46. package/dist/react/password/index.d.ts +31 -27
  47. package/dist/react/password/index.js +31 -27
  48. package/dist/react/progressbar/index.d.ts +15 -20
  49. package/dist/react/progressbar/index.js +15 -20
  50. package/dist/react/searchfield/index.d.ts +30 -0
  51. package/dist/react/searchfield/index.js +30 -0
  52. package/dist/react/select/index.d.ts +19 -21
  53. package/dist/react/select/index.js +19 -21
  54. package/dist/react/textarea/index.d.ts +20 -18
  55. package/dist/react/textarea/index.js +20 -18
  56. 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
- * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
41
- * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
42
- * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled
43
- * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
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
- * @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
64
- * @csspart textarea-footer - The container for the help text and character counter elements.
65
- * @csspart textarea-container - The textarea container
66
- * @csspart textarea - The textarea field element.
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
- * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
56
- * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
57
- * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled
58
- * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
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
- * @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
79
- * @csspart textarea-footer - The container for the help text and character counter elements.
80
- * @csspart textarea-container - The textarea container
81
- * @csspart textarea - The textarea field element.
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(--mdc-textarea-hover-background-color);
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(--mdc-textarea-focused-background-color);
76
- border-color: var(--mdc-textarea-focused-border-color);
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
- .textarea::placeholder {
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-textarea-error-border-color);
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-textarea-primary-border-color);
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 {