@momentum-design/components 0.120.20 → 0.120.22

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 (54) hide show
  1. package/dist/browser/index.js +157 -238
  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/textarea/textarea.component.d.ts +20 -18
  29. package/dist/components/textarea/textarea.component.js +20 -18
  30. package/dist/components/textarea/textarea.styles.js +27 -49
  31. package/dist/custom-elements.json +1585 -1201
  32. package/dist/react/checkbox/index.d.ts +8 -0
  33. package/dist/react/checkbox/index.js +8 -0
  34. package/dist/react/combobox/index.d.ts +8 -6
  35. package/dist/react/combobox/index.js +8 -6
  36. package/dist/react/formfieldgroup/index.d.ts +9 -0
  37. package/dist/react/formfieldgroup/index.js +9 -0
  38. package/dist/react/formfieldwrapper/index.d.ts +9 -0
  39. package/dist/react/formfieldwrapper/index.js +9 -0
  40. package/dist/react/index.d.ts +2 -2
  41. package/dist/react/index.js +2 -2
  42. package/dist/react/input/index.d.ts +11 -13
  43. package/dist/react/input/index.js +11 -13
  44. package/dist/react/password/index.d.ts +31 -27
  45. package/dist/react/password/index.js +31 -27
  46. package/dist/react/progressbar/index.d.ts +15 -20
  47. package/dist/react/progressbar/index.js +15 -20
  48. package/dist/react/searchfield/index.d.ts +30 -0
  49. package/dist/react/searchfield/index.js +30 -0
  50. package/dist/react/select/index.d.ts +19 -21
  51. package/dist/react/select/index.js +19 -21
  52. package/dist/react/textarea/index.d.ts +20 -18
  53. package/dist/react/textarea/index.js +20 -18
  54. package/package.json +1 -1
@@ -25,35 +25,39 @@ import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types'
25
25
  * @dependency mdc-button
26
26
  * @dependency mdc-toggletip
27
27
  *
28
- * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled
29
- * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled
30
- * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled
31
- * @cssproperty --mdc-input-border-color - Border color for the password container
32
- * @cssproperty --mdc-input-text-color - Text color for the password field
33
- * @cssproperty --mdc-input-background-color - Background color for the password field
34
- * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
35
- * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
36
- * @cssproperty --mdc-input-support-text-color - Text color for the help text
37
- * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
38
- * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
39
- * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
40
- * @cssproperty --mdc-input-error-border-color - Border color for the password container when error
41
- * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
42
- * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
43
- * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
28
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
29
+ * @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.
30
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
31
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
32
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
33
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
34
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
35
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
44
36
  *
45
- * @csspart label - The label element.
46
- * @csspart label-text - The container for the label and required indicator elements.
47
- * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
48
- * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
49
- * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
50
- * @csspart help-text - The helper/validation text element.
51
- * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
52
- * @csspart help-text-container - The container for the helper/validation icon and text elements.
53
- * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
54
- * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
37
+ * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.
38
+ * @csspart input-section - The container that wraps the input field and prefix text.
55
39
  * @csspart input-text - The input field element.
56
- * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
40
+ * @csspart trailing-button - The trailing button element.
41
+ * @csspart label - The label element.
42
+ * @csspart helper-text - The helper/validation text element.
43
+ * @csspart helper-icon - The helper/validation icon element.
44
+ * @csspart toggletip - The toggletip icon button element.
45
+ * @csspart toggletip-text - The toggletip text element.
46
+ *
47
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
48
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
49
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
50
+ * @cssproperty --mdc-label-color - Color for the label text.
51
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
52
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
53
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
54
+ * @cssproperty --mdc-help-text-color - Color for the help text.
55
+ * @cssproperty --mdc-input-text-color - Text color for the input field
56
+ * @cssproperty --mdc-input-border-color - Border color for the input container
57
+ * @cssproperty --mdc-input-background-color - Background color for the input field
58
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
59
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
60
+ *
57
61
  */
58
62
  declare class Password extends Input {
59
63
  /**
@@ -37,35 +37,39 @@ import { PASSWORD_VISIBILITY_ICONS } from './password.constants';
37
37
  * @dependency mdc-button
38
38
  * @dependency mdc-toggletip
39
39
  *
40
- * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled
41
- * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled
42
- * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled
43
- * @cssproperty --mdc-input-border-color - Border color for the password container
44
- * @cssproperty --mdc-input-text-color - Text color for the password field
45
- * @cssproperty --mdc-input-background-color - Background color for the password field
46
- * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
47
- * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
48
- * @cssproperty --mdc-input-support-text-color - Text color for the help text
49
- * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
50
- * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
51
- * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
52
- * @cssproperty --mdc-input-error-border-color - Border color for the password container when error
53
- * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
54
- * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
55
- * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
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.
44
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
45
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
46
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
47
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
56
48
  *
57
- * @csspart label - The label element.
58
- * @csspart label-text - The container for the label and required indicator elements.
59
- * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
60
- * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
61
- * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
62
- * @csspart help-text - The helper/validation text element.
63
- * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
64
- * @csspart help-text-container - The container for the helper/validation icon and text elements.
65
- * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
66
- * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
49
+ * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.
50
+ * @csspart input-section - The container that wraps the input field and prefix text.
67
51
  * @csspart input-text - The input field element.
68
- * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
52
+ * @csspart trailing-button - The trailing button element.
53
+ * @csspart label - The label element.
54
+ * @csspart helper-text - The helper/validation text element.
55
+ * @csspart helper-icon - The helper/validation icon element.
56
+ * @csspart toggletip - The toggletip icon button element.
57
+ * @csspart toggletip-text - The toggletip text element.
58
+ *
59
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
60
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
61
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
62
+ * @cssproperty --mdc-label-color - Color for the label text.
63
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
64
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
65
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
66
+ * @cssproperty --mdc-help-text-color - Color for the help text.
67
+ * @cssproperty --mdc-input-text-color - Text color for the input field
68
+ * @cssproperty --mdc-input-border-color - Border color for the input container
69
+ * @cssproperty --mdc-input-background-color - Background color for the input field
70
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
71
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
72
+ *
69
73
  */
70
74
  class Password extends Input {
71
75
  constructor() {
@@ -17,31 +17,26 @@ declare const Progressbar_base: import("../../utils/mixins/index.types").Constru
17
17
  * @dependency mdc-icon
18
18
  * @dependency mdc-text
19
19
  *
20
- * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
21
- * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.
22
- * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
23
- * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
24
- * @cssproperty --mdc-progressbar-height - The height of the progressbar.
25
- * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
26
- * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
27
- * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
28
- * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
29
- * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
30
- * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
20
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
21
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
31
22
  *
32
23
  * @csspart label - The label element.
33
24
  * @csspart label-text - The container for the label and required indicator elements.
34
- * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
35
25
  * @csspart help-text - The helper/validation text element.
36
- * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
37
26
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
38
- * @csspart gap - The gap between the label and the progressbar.
39
- * @csspart inline-label-container - The container of the label in inline variant.
40
- * @csspart label-container - The container of the label in inline variant.
41
- * @csspart percentage - The container of the label in inline variant.
42
- * @csspart progress-bar - The container of the label in inline variant.
43
- * @csspart progress-container - The container of the label in inline variant.
44
- * @csspart remaining - The container of the remaining progressbar portion.
27
+ *
28
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
29
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
30
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
31
+ * @cssproperty --mdc-label-color - Color for the label text.
32
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
33
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
34
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
35
+ * @cssproperty --mdc-help-text-color - Color for the help text.
36
+ * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
37
+ * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.
38
+ * @cssproperty --mdc-progressbar-height - The height of the progressbar.
39
+ * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
45
40
  */
46
41
  declare class Progressbar extends Progressbar_base {
47
42
  /**
@@ -31,31 +31,26 @@ import styles from './progressbar.styles';
31
31
  * @dependency mdc-icon
32
32
  * @dependency mdc-text
33
33
  *
34
- * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
35
- * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.
36
- * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
37
- * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
38
- * @cssproperty --mdc-progressbar-height - The height of the progressbar.
39
- * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
40
- * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
41
- * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
42
- * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
43
- * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
44
- * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
34
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
35
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
45
36
  *
46
37
  * @csspart label - The label element.
47
38
  * @csspart label-text - The container for the label and required indicator elements.
48
- * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
49
39
  * @csspart help-text - The helper/validation text element.
50
- * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
51
40
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
52
- * @csspart gap - The gap between the label and the progressbar.
53
- * @csspart inline-label-container - The container of the label in inline variant.
54
- * @csspart label-container - The container of the label in inline variant.
55
- * @csspart percentage - The container of the label in inline variant.
56
- * @csspart progress-bar - The container of the label in inline variant.
57
- * @csspart progress-container - The container of the label in inline variant.
58
- * @csspart remaining - The container of the remaining progressbar portion.
41
+ *
42
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
43
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
44
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
45
+ * @cssproperty --mdc-label-color - Color for the label text.
46
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
47
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
48
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
49
+ * @cssproperty --mdc-help-text-color - Color for the help text.
50
+ * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
51
+ * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.
52
+ * @cssproperty --mdc-progressbar-height - The height of the progressbar.
53
+ * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
59
54
  */
60
55
  class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
61
56
  constructor() {
@@ -170,7 +165,7 @@ __decorate([
170
165
  __metadata("design:type", String)
171
166
  ], Progressbar.prototype, "value", void 0);
172
167
  __decorate([
173
- property({ type: Boolean }),
168
+ property({ type: Boolean, attribute: 'error' }),
174
169
  __metadata("design:type", Object)
175
170
  ], Progressbar.prototype, "error", void 0);
176
171
  export default Progressbar;
@@ -5,19 +5,11 @@ const styles = [
5
5
  css `
6
6
  :host {
7
7
  --mdc-progressbar-background-color: var(--mds-color-theme-control-indicator-inactive-normal);
8
- --mdc-progressbar-active-background-color: var(--mds-color-theme-control-active-normal);
9
- --mdc-progressbar-success-color: var(--mds-color-theme-indicator-stable);
10
- --mdc-progressbar-error-color: var(--mds-color-theme-indicator-attention);
8
+ --mdc-progressbar-progress-background-color: var(--mds-color-theme-control-active-normal);
11
9
  --mdc-progressbar-height: 0.25rem;
12
10
  --mdc-progressbar-border: 0.5px solid transparent;
13
11
  --mdc-progressbar-border-radius: var(--mdc-progressbar-height);
14
12
 
15
- --mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
16
- --mdc-progressbar-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
17
- --mdc-progressbar-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
18
- --mdc-progressbar-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
19
- --mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
20
-
21
13
  width: 100%;
22
14
  }
23
15
 
@@ -51,17 +43,17 @@ const styles = [
51
43
 
52
44
  :host::part(progress-bar) {
53
45
  height: 100%;
54
- background-color: var(--mdc-progressbar-active-background-color);
46
+ background-color: var(--mdc-progressbar-progress-background-color);
55
47
  border-radius: var(--mdc-progressbar-border-radius);
56
48
  transition: width 0.3s ease-in-out;
57
49
  }
58
50
 
59
51
  :host::part(success) {
60
- background-color: var(--mdc-progressbar-success-color);
52
+ --mdc-progressbar-progress-background-color: var(--mds-color-theme-indicator-stable);
61
53
  }
62
54
 
63
55
  :host::part(error) {
64
- background-color: var(--mdc-progressbar-error-color);
56
+ --mdc-progressbar-progress-background-color: var(--mds-color-theme-indicator-attention);
65
57
  }
66
58
 
67
59
  :host::part(remaining) {
@@ -72,13 +64,9 @@ const styles = [
72
64
  }
73
65
 
74
66
  :host::part(percentage) {
75
- font-size: var(--mdc-progressbar-label-font-size);
76
- font-weight: var(--mdc-progressbar-label-font-weight);
77
- line-height: var(--mdc-progressbar-label-line-height);
78
- }
79
-
80
- :host([help-text-type='default'])::part(help-text) {
81
- color: var(--mdc-progressbar-help-text-color);
67
+ font-size: var(--mds-font-apps-body-midsize-regular-font-size);
68
+ font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
69
+ line-height: var(--mds-font-apps-body-midsize-regular-line-height);
82
70
  }
83
71
 
84
72
  @media (forced-colors: active) {
@@ -16,10 +16,40 @@ import Input from '../input/input.component';
16
16
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
17
17
  *
18
18
  * @slot filters - Slot for input chips
19
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
20
+ * @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.
21
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
22
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
23
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
24
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
25
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
26
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
27
+ *
28
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
29
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
30
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
31
+ * @cssproperty --mdc-label-color - Color for the label text.
32
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
33
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
34
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
35
+ * @cssproperty --mdc-help-text-color - Color for the help text.
36
+ * @cssproperty --mdc-input-text-color - Text color for the input field
37
+ * @cssproperty --mdc-input-border-color - Border color for the input container
38
+ * @cssproperty --mdc-input-background-color - Background color for the input field
39
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
40
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
41
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
19
42
  *
20
43
  * @csspart label - The label element.
21
44
  * @csspart label-text - The container for the label and required indicator elements.
45
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
46
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
47
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
48
+ * @csspart help-text - The helper/validation text element.
49
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
50
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
22
51
  * @csspart leading-icon - The leading icon element that is displayed before the input field.
52
+ * @csspart prefix-text - The prefix text element that is displayed before the input field.
23
53
  * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
24
54
  * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
25
55
  * @csspart input-text - The input field element.
@@ -30,10 +30,40 @@ import { DEFAULTS } from './searchfield.constants';
30
30
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
31
31
  *
32
32
  * @slot filters - Slot for input chips
33
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
34
+ * @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.
35
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
36
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
37
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
38
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
39
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
40
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
41
+ *
42
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
43
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
44
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
45
+ * @cssproperty --mdc-label-color - Color for the label text.
46
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
47
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
48
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
49
+ * @cssproperty --mdc-help-text-color - Color for the help text.
50
+ * @cssproperty --mdc-input-text-color - Text color for the input field
51
+ * @cssproperty --mdc-input-border-color - Border color for the input container
52
+ * @cssproperty --mdc-input-background-color - Background color for the input field
53
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
54
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
55
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
33
56
  *
34
57
  * @csspart label - The label element.
35
58
  * @csspart label-text - The container for the label and required indicator elements.
59
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
60
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
61
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
62
+ * @csspart help-text - The helper/validation text element.
63
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
64
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
36
65
  * @csspart leading-icon - The leading icon element that is displayed before the input field.
66
+ * @csspart prefix-text - The prefix text element that is displayed before the input field.
37
67
  * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
38
68
  * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
39
69
  * @csspart input-text - The input field element.
@@ -35,21 +35,10 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
35
35
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
36
36
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
37
37
  *
38
- * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
39
- * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.
40
- * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.
41
- * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.
42
- * @cssproperty --mdc-select-text-color - The text color of the select.
43
- * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
44
- * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
45
- * @cssproperty --mdc-select-border-color - The border color of the select.
46
- * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
47
- * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
48
- * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
49
- * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
50
- * @cssproperty --mdc-select-width - The width of the select.
51
- * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
52
- * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
38
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
39
+ * @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.
40
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
41
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
53
42
  *
54
43
  * @csspart label - The label element.
55
44
  * @csspart label-text - The container for the label and required indicator elements.
@@ -59,12 +48,21 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
59
48
  * @csspart help-text - The helper/validation text element.
60
49
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
61
50
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
62
- * @csspart container - The container element that wraps the visual combobox and the dropdown icon.
63
- * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
64
- * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
65
- * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
66
- * @csspart icon-container - The container element that wraps the dropdown icon.
67
- * @csspart native-input - The native hidden input element.
51
+ *
52
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
53
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
54
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
55
+ * @cssproperty --mdc-label-color - Color for the label text.
56
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
57
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
58
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
59
+ * @cssproperty --mdc-help-text-color - Color for the help text.
60
+ * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
61
+ * @cssproperty --mdc-select-text-color - The text color of the select.
62
+ * @cssproperty --mdc-select-border-color - The border color of the select.
63
+ * @cssproperty --mdc-select-width - The width of the select.
64
+ * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
65
+ * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
68
66
  */
69
67
  declare class Select extends Select_base implements AssociatedFormControl {
70
68
  /**
@@ -55,21 +55,10 @@ import styles from './select.styles';
55
55
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
56
56
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
57
57
  *
58
- * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
59
- * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.
60
- * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.
61
- * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.
62
- * @cssproperty --mdc-select-text-color - The text color of the select.
63
- * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
64
- * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
65
- * @cssproperty --mdc-select-border-color - The border color of the select.
66
- * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
67
- * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
68
- * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
69
- * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
70
- * @cssproperty --mdc-select-width - The width of the select.
71
- * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
72
- * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
58
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
59
+ * @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.
60
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
61
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
73
62
  *
74
63
  * @csspart label - The label element.
75
64
  * @csspart label-text - The container for the label and required indicator elements.
@@ -79,12 +68,21 @@ import styles from './select.styles';
79
68
  * @csspart help-text - The helper/validation text element.
80
69
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
81
70
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
82
- * @csspart container - The container element that wraps the visual combobox and the dropdown icon.
83
- * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
84
- * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
85
- * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
86
- * @csspart icon-container - The container element that wraps the dropdown icon.
87
- * @csspart native-input - The native hidden input element.
71
+ *
72
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
73
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
74
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
75
+ * @cssproperty --mdc-label-color - Color for the label text.
76
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
77
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
78
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
79
+ * @cssproperty --mdc-help-text-color - Color for the help text.
80
+ * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
81
+ * @cssproperty --mdc-select-text-color - The text color of the select.
82
+ * @cssproperty --mdc-select-border-color - The border color of the select.
83
+ * @cssproperty --mdc-select-width - The width of the select.
84
+ * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
85
+ * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
88
86
  */
89
87
  class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
90
88
  constructor() {
@@ -3,17 +3,8 @@ import { hostFocusRingStyles } from '../../utils/styles';
3
3
  const styles = css `
4
4
  :host {
5
5
  --mdc-select-background-color: var(--mds-color-theme-background-primary-ghost);
6
- --mdc-select-background-color-hover: var(--mds-color-theme-background-primary-hover);
7
- --mdc-select-background-color-active: var(--mds-color-theme-background-primary-active);
8
- --mdc-select-background-color-disabled: var(--mds-color-theme-background-input-disabled);
9
6
  --mdc-select-text-color: var(--mds-color-theme-text-secondary-normal);
10
- --mdc-select-text-color-selected: var(--mds-color-theme-text-primary-normal);
11
- --mdc-select-text-color-disabled: var(--mds-color-theme-text-primary-disabled);
12
7
  --mdc-select-border-color: var(--mds-color-theme-outline-input-normal);
13
- --mdc-select-border-color-disabled: var(--mds-color-theme-outline-primary-disabled);
14
- --mdc-select-border-color-success: var(--mds-color-theme-text-success-normal);
15
- --mdc-select-border-color-warning: var(--mds-color-theme-text-warning-normal);
16
- --mdc-select-border-color-error: var(--mds-color-theme-text-error-normal);
17
8
  --mdc-select-width: 100%;
18
9
  --mdc-select-listbox-width: var(--mdc-select-width);
19
10
  --mdc-select-listbox-height: auto;
@@ -57,10 +48,10 @@ const styles = css `
57
48
  user-select: none;
58
49
  }
59
50
  :host::part(base-container):hover {
60
- background-color: var(--mdc-select-background-color-hover);
51
+ --mdc-select-background-color: var(--mds-color-theme-background-primary-hover);
61
52
  }
62
53
  :host::part(base-container):active {
63
- background-color: var(--mdc-select-background-color-active);
54
+ --mdc-select-background-color: var(--mds-color-theme-background-primary-active);
64
55
  }
65
56
  :host::part(base-text) {
66
57
  height: 1.3125rem;
@@ -71,7 +62,7 @@ const styles = css `
71
62
  white-space: nowrap;
72
63
  }
73
64
  :host::part(selected) {
74
- color: var(--mdc-select-text-color-selected);
65
+ --mdc-select-text-color: var(--mds-color-theme-text-primary-normal);
75
66
  }
76
67
  :host::part(selected-icon) {
77
68
  flex-shrink: 0;
@@ -94,32 +85,26 @@ const styles = css `
94
85
  }
95
86
 
96
87
  /* Help text border colors */
97
- :host([help-text-type='success'])::part(base-container) {
98
- border-color: var(--mdc-select-border-color-success);
99
- }
100
- :host([help-text-type='warning'])::part(base-container) {
101
- border-color: var(--mdc-select-border-color-warning);
102
- }
88
+ :host([help-text-type='success'])::part(base-container),
89
+ :host([help-text-type='warning'])::part(base-container),
103
90
  :host([help-text-type='error'])::part(base-container) {
104
- border-color: var(--mdc-select-border-color-error);
91
+ --mdc-select-border-color: var(--mdc-help-text-color);
92
+ }
93
+
94
+ :host([readonly])::part(help-text-container) {
95
+ --mdc-help-text-color: var(--mds-color-theme-text-secondary-normal);
105
96
  }
106
97
 
107
98
  /* Disabled, soft-disabled */
108
99
  :host([disabled])::part(base-container),
109
100
  :host([soft-disabled])::part(base-container),
110
- :host([readonly])::part(base-container),
111
- :host([help-text-type='success'][disabled])::part(base-container),
112
- :host([help-text-type='error'][disabled])::part(base-container),
113
- :host([help-text-type='warning'][disabled])::part(base-container),
114
- :host([help-text-type='success'][readonly])::part(base-container),
115
- :host([help-text-type='error'][readonly])::part(base-container),
116
- :host([help-text-type='warning'][readonly])::part(base-container) {
117
- border-color: var(--mdc-select-border-color-disabled);
118
- background: var(--mdc-select-background-color-disabled);
101
+ :host([readonly])::part(base-container) {
102
+ --mdc-select-border-color: var(--mds-color-theme-outline-primary-disabled);
103
+ --mdc-select-background-color: var(--mds-color-theme-background-input-disabled);
119
104
  }
120
105
  :host([disabled])::part(base-text),
121
106
  :host([soft-disabled])::part(base-text) {
122
- color: var(--mdc-select-text-color-disabled);
107
+ --mdc-select-text-color: var(--mds-color-theme-text-primary-disabled);
123
108
  }
124
109
  `;
125
110
  export default [styles, ...hostFocusRingStyles(true)];