@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
@@ -26,6 +26,14 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
26
26
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
27
27
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
28
28
  * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
29
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
30
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
31
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
32
+ * @cssproperty --mdc-label-color - Color for the label text.
33
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
34
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
35
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
36
+ * @cssproperty --mdc-help-text-color - Color for the help text.
29
37
  *
30
38
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
31
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.
@@ -41,6 +41,14 @@ import styles from './checkbox.styles';
41
41
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
42
42
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
43
43
  * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
44
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
45
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
46
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
47
+ * @cssproperty --mdc-label-color - Color for the label text.
48
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
49
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
50
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
51
+ * @cssproperty --mdc-help-text-color - Color for the help text.
44
52
  *
45
53
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
46
54
  * @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.
@@ -41,9 +41,9 @@ const styles = [
41
41
  }
42
42
 
43
43
  :host::part(label) {
44
- font-size: var(--mds-font-apps-body-midsize-regular-font-size);
45
- font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
46
- line-height: var(--mds-font-apps-body-midsize-regular-line-height);
44
+ --mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
45
+ --mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
46
+ --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
47
47
  word-break: break-word;
48
48
  white-space: normal;
49
49
  }
@@ -53,13 +53,15 @@ declare const Combobox_base: import("../../utils/mixins/index.types").Constructo
53
53
  * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
54
54
  * @cssproperty --mdc-combobox-width - The width of the combobox
55
55
  * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
56
- * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
57
- * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
58
- * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
59
- * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
60
- * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
61
56
  * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
62
- * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
57
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
58
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
59
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
60
+ * @cssproperty --mdc-label-color - Color for the label text.
61
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
62
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
63
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
64
+ * @cssproperty --mdc-help-text-color - Color for the help text.
63
65
  *
64
66
  * @csspart label - The label element.
65
67
  * @csspart label-text - The container for the label and required indicator elements.
@@ -79,13 +79,15 @@ import styles from './combobox.styles';
79
79
  * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
80
80
  * @cssproperty --mdc-combobox-width - The width of the combobox
81
81
  * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
82
- * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
83
- * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
84
- * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
85
- * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
86
- * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
87
82
  * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
88
- * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
83
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
84
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
85
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
86
+ * @cssproperty --mdc-label-color - Color for the label text.
87
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
88
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
89
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
90
+ * @cssproperty --mdc-help-text-color - Color for the help text.
89
91
  *
90
92
  * @csspart label - The label element.
91
93
  * @csspart label-text - The container for the label and required indicator elements.
@@ -8,12 +8,6 @@ const styles = css `
8
8
  --mdc-combobox-listbox-height: auto;
9
9
  --mdc-combobox-text-color-disabled: var(--mds-color-theme-text-primary-disabled);
10
10
  --mdc-combobox-hover-background-color: var(--mds-color-theme-background-primary-hover);
11
- --mdc-combobox-error-border-color: var(--mds-color-theme-text-error-normal);
12
- --mdc-combobox-warning-border-color: var(--mds-color-theme-text-warning-normal);
13
- --mdc-combobox-success-border-color: var(--mds-color-theme-text-success-normal);
14
- --mdc-combobox-primary-border-color: var(--mds-color-theme-text-accent-normal);
15
- --mdc-combobox-focused-background-color: var(--mds-color-theme-background-primary-ghost);
16
- --mdc-combobox-focused-border-color: var(--mds-color-theme-outline-input-active);
17
11
 
18
12
  display: flex;
19
13
  flex-direction: column;
@@ -45,36 +39,22 @@ const styles = css `
45
39
  :host([disabled])::part(combobox__button) {
46
40
  cursor: unset;
47
41
  }
48
- :host mdc-input {
49
- --mdc-input-error-border-color: var(--mdc-combobox-error-border-color);
50
- --mdc-input-warning-border-color: var(--mdc-combobox-warning-border-color);
51
- --mdc-input-success-border-color: var(--mdc-combobox-success-border-color);
52
- --mdc-input-primary-border-color: var(--mdc-combobox-primary-border-color);
53
- --mdc-input-focused-border-color: var(--mdc-combobox-focused-border-color);
54
- --mdc-input-focused-background-color: var(--mdc-combobox-focused-background-color);
55
- }
56
42
  :host(:focus-within)::part(combobox__button) {
57
43
  border-left: 1px solid var(--mdc-combobox-focused-border-color);
58
44
  }
59
45
  :host(:not([disabled]))::part(combobox__base):hover {
60
46
  background-color: var(--mdc-combobox-hover-background-color);
61
47
  }
62
- :host([help-text-type='error'])::part(combobox__button) {
63
- border-color: var(--mdc-combobox-error-border-color);
64
- }
65
- :host([help-text-type='warning'])::part(combobox__button) {
66
- border-color: var(--mdc-combobox-warning-border-color);
67
- }
68
- :host([help-text-type='success'])::part(combobox__button) {
69
- border-color: var(--mdc-combobox-success-border-color);
70
- }
48
+ :host([help-text-type='error'])::part(combobox__button),
49
+ :host([help-text-type='warning'])::part(combobox__button),
50
+ :host([help-text-type='success'])::part(combobox__button),
71
51
  :host([help-text-type='priority'])::part(combobox__button) {
72
- border-color: var(--mdc-combobox-primary-border-color);
52
+ border-color: var(--mdc-help-text-color);
73
53
  }
74
54
  :host([disabled])::part(combobox__button) {
75
55
  border-left: 1px solid var(--mdc-combobox-text-color-disabled);
76
56
  }
77
- :host::part(input-text) {
57
+ :host::part(mdc-input) {
78
58
  width: calc(100% - 1.5rem);
79
59
  }
80
60
  :host::part(combobox__button-icon) {
@@ -40,6 +40,15 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
40
40
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
41
41
  * @csspart container - Formfieldgroup host container
42
42
  * @csspart group-header - This contains the label and help text for the group
43
+ *
44
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
45
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
46
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
47
+ * @cssproperty --mdc-label-color - Color for the label text.
48
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
49
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
50
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
51
+ * @cssproperty --mdc-help-text-color - Color for the help text.
43
52
  */
44
53
  declare class FormfieldGroup extends FormfieldGroup_base {
45
54
  /**
@@ -44,6 +44,15 @@ import styles from './formfieldgroup.styles';
44
44
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
45
45
  * @csspart container - Formfieldgroup host container
46
46
  * @csspart group-header - This contains the label and help text for the group
47
+ *
48
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
49
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
50
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
51
+ * @cssproperty --mdc-label-color - Color for the label text.
52
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
53
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
54
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
55
+ * @cssproperty --mdc-help-text-color - Color for the help text.
47
56
  */
48
57
  class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
49
58
  constructor() {
@@ -28,6 +28,15 @@ declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Co
28
28
  * @csspart help-text - The helper/validation text element.
29
29
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
30
30
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
31
+ *
32
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
33
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
34
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
35
+ * @cssproperty --mdc-label-color - Color for the label text.
36
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
37
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
38
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
39
+ * @cssproperty --mdc-help-text-color - Color for the help text.
31
40
  */
32
41
  declare class FormfieldWrapper extends FormfieldWrapper_base {
33
42
  /**
@@ -42,6 +42,15 @@ import { getHelperIcon } from './formfieldwrapper.utils';
42
42
  * @csspart help-text - The helper/validation text element.
43
43
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
44
44
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
45
+ *
46
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
47
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
48
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
49
+ * @cssproperty --mdc-label-color - Color for the label text.
50
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
51
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
52
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
53
+ * @cssproperty --mdc-help-text-color - Color for the help text.
45
54
  */
46
55
  class FormfieldWrapper extends DisabledMixin(Component) {
47
56
  constructor() {
@@ -1,2 +1,2 @@
1
- declare const styles: import("lit").CSSResult[];
2
- export default styles;
1
+ declare const _default: import("lit").CSSResult[];
2
+ export default _default;
@@ -1,76 +1,78 @@
1
1
  import { css } from 'lit';
2
2
  import { hostFitContentStyles } from '../../utils/styles';
3
- const styles = [
4
- hostFitContentStyles,
5
- css `
6
- :host {
7
- flex-direction: column;
8
- align-items: flex-start;
9
- gap: 0.5rem;
10
- }
11
- :host([disabled]),
12
- :host([disabled])::part(label),
13
- :host([disabled])::part(help-text-container),
14
- :host([disabled])::part(required-indicator),
15
- :host([disabled][help-text-type='error'])::part(help-text-container),
16
- :host([disabled][help-text-type='success'])::part(help-text-container),
17
- :host([disabled][help-text-type='warning'])::part(help-text-container),
18
- :host([disabled][help-text-type='priority'])::part(help-text-container) {
19
- color: var(--mds-color-theme-text-primary-disabled);
20
- }
3
+ const styles = css `
4
+ :host {
5
+ --mdc-label-font-size: var(--mds-font-apps-body-midsize-medium-font-size);
6
+ --mdc-label-font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
7
+ --mdc-label-line-height: var(--mds-font-apps-body-midsize-medium-line-height);
8
+ --mdc-label-color: var(--mds-color-theme-text-primary-normal);
9
+ --mdc-help-text-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
10
+ --mdc-help-text-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
11
+ --mdc-help-text-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
12
+ --mdc-help-text-color: var(--mds-color-theme-text-secondary-normal);
21
13
 
22
- :host::part(required-indicator) {
23
- color: var(--mds-color-theme-text-error-normal);
24
- }
14
+ flex-direction: column;
15
+ align-items: flex-start;
16
+ gap: 0.5rem;
17
+ }
25
18
 
26
- :host::part(label-text),
27
- :host::part(help-text-container) {
28
- display: flex;
29
- align-items: center;
30
- gap: 0.5rem;
31
- width: 100%;
32
- }
19
+ :host::part(required-indicator) {
20
+ color: var(--mds-color-theme-text-error-normal);
21
+ }
33
22
 
34
- :host::part(label) {
35
- font-size: var(--mds-font-apps-body-midsize-medium-font-size);
36
- font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
37
- line-height: var(--mds-font-apps-body-midsize-medium-line-height);
38
- }
23
+ :host::part(label-text),
24
+ :host::part(help-text-container) {
25
+ display: flex;
26
+ align-items: center;
27
+ gap: 0.5rem;
28
+ width: 100%;
29
+ }
39
30
 
40
- :host::part(help-text),
41
- :host::part(help-text-container) {
42
- font-size: var(--mds-font-apps-body-midsize-regular-font-size);
43
- font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
44
- line-height: var(--mds-font-apps-body-midsize-regular-line-height);
45
- }
31
+ :host::part(label) {
32
+ font-size: var(--mdc-label-font-size);
33
+ font-weight: var(--mdc-label-font-weight);
34
+ line-height: var(--mdc-label-line-height);
35
+ }
46
36
 
47
- :host::part(label) {
48
- color: var(--mds-color-theme-text-primary-normal);
49
- overflow: hidden;
50
- text-overflow: ellipsis;
51
- white-space: nowrap;
52
- }
37
+ :host::part(help-text),
38
+ :host::part(help-text-container) {
39
+ font-size: var(--mdc-help-text-font-size);
40
+ font-weight: var(--mdc-help-text-font-weight);
41
+ line-height: var(--mdc-help-text-line-height);
42
+ }
53
43
 
54
- :host::part(help-text-container) {
55
- color: var(--mds-color-theme-text-secondary-normal);
56
- }
44
+ :host::part(label) {
45
+ color: var(--mdc-label-color);
46
+ overflow: hidden;
47
+ text-overflow: ellipsis;
48
+ white-space: nowrap;
49
+ }
57
50
 
58
- :host::part(info-icon-btn) {
59
- align-self: flex-start;
60
- }
51
+ :host::part(help-text-container) {
52
+ color: var(--mdc-help-text-color);
53
+ }
61
54
 
62
- :host([help-text-type='error'])::part(help-text-container) {
63
- color: var(--mds-color-theme-text-error-normal);
64
- }
65
- :host([help-text-type='warning'])::part(help-text-container) {
66
- color: var(--mds-color-theme-text-warning-normal);
67
- }
68
- :host([help-text-type='success'])::part(help-text-container) {
69
- color: var(--mds-color-theme-text-success-normal);
70
- }
71
- :host([help-text-type='priority'])::part(help-text-container) {
72
- color: var(--mds-color-theme-text-accent-normal);
73
- }
74
- `,
75
- ];
76
- export default styles;
55
+ :host::part(info-icon-btn) {
56
+ align-self: flex-start;
57
+ }
58
+ :host([help-text-type='error']) {
59
+ --mdc-help-text-color: var(--mds-color-theme-text-error-normal);
60
+ }
61
+ :host([help-text-type='warning']) {
62
+ --mdc-help-text-color: var(--mds-color-theme-text-warning-normal);
63
+ }
64
+ :host([help-text-type='success']) {
65
+ --mdc-help-text-color: var(--mds-color-theme-text-success-normal);
66
+ }
67
+ :host([help-text-type='priority']) {
68
+ --mdc-help-text-color: var(--mds-color-theme-text-accent-normal);
69
+ }
70
+
71
+ :host([disabled]),
72
+ :host([disabled])::part(label),
73
+ :host([disabled])::part(help-text-container),
74
+ :host([disabled])::part(required-indicator) {
75
+ color: var(--mds-color-theme-text-primary-disabled);
76
+ }
77
+ `;
78
+ export default [hostFitContentStyles, styles];
@@ -38,22 +38,20 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
38
38
  * @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.
39
39
  * @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.
40
40
  *
41
- * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
42
- * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
43
- * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
44
- * @cssproperty --mdc-input-border-color - Border color for the input container
41
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
42
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
43
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
44
+ * @cssproperty --mdc-label-color - Color for the label text.
45
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
46
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
47
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
48
+ * @cssproperty --mdc-help-text-color - Color for the help text.
45
49
  * @cssproperty --mdc-input-text-color - Text color for the input field
50
+ * @cssproperty --mdc-input-border-color - Border color for the input container
46
51
  * @cssproperty --mdc-input-background-color - Background color for the input field
47
- * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
48
- * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
49
52
  * @cssproperty --mdc-input-support-text-color - Text color for the help text
50
- * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
51
- * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
52
- * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
53
- * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
54
- * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
55
- * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
56
- * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
53
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
54
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
57
55
  *
58
56
  * @csspart label - The label element.
59
57
  * @csspart label-text - The container for the label and required indicator elements.
@@ -53,22 +53,20 @@ import styles from './input.styles';
53
53
  * @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.
54
54
  * @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.
55
55
  *
56
- * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
57
- * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
58
- * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
59
- * @cssproperty --mdc-input-border-color - Border color for the input container
56
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
57
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
58
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
59
+ * @cssproperty --mdc-label-color - Color for the label text.
60
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
61
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
62
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
63
+ * @cssproperty --mdc-help-text-color - Color for the help text.
60
64
  * @cssproperty --mdc-input-text-color - Text color for the input field
65
+ * @cssproperty --mdc-input-border-color - Border color for the input container
61
66
  * @cssproperty --mdc-input-background-color - Background color for the input field
62
- * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
63
- * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
64
67
  * @cssproperty --mdc-input-support-text-color - Text color for the help text
65
- * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
66
- * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
67
- * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
68
- * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
69
- * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
70
- * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
71
- * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
68
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
69
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
72
70
  *
73
71
  * @csspart label - The label element.
74
72
  * @csspart label-text - The container for the label and required indicator elements.
@@ -3,22 +3,12 @@ import { hostFocusRingStyles } from '../../utils/styles';
3
3
  const styles = [
4
4
  css `
5
5
  :host {
6
- --mdc-input-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
7
- --mdc-input-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
8
- --mdc-input-disabled-background-color: var(--mds-color-theme-background-input-disabled);
9
- --mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
10
6
  --mdc-input-text-color: var(--mds-color-theme-text-primary-normal);
7
+ --mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
11
8
  --mdc-input-background-color: var(--mds-color-theme-background-primary-ghost);
12
- --mdc-input-selection-background-color: var(--mds-color-theme-background-accent-active);
13
- --mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
14
9
  --mdc-input-support-text-color: var(--mds-color-theme-text-secondary-normal);
15
- --mdc-input-hover-background-color: var(--mds-color-theme-background-primary-hover);
16
- --mdc-input-focused-background-color: var(--mds-color-theme-background-primary-ghost);
17
- --mdc-input-focused-border-color: var(--mds-color-theme-outline-input-active);
18
- --mdc-input-error-border-color: var(--mds-color-theme-text-error-normal);
19
- --mdc-input-warning-border-color: var(--mds-color-theme-text-warning-normal);
20
- --mdc-input-success-border-color: var(--mds-color-theme-text-success-normal);
21
- --mdc-input-primary-border-color: var(--mds-color-theme-text-accent-normal);
10
+ --mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
11
+ --mdc-input-selection-background-color: var(--mds-color-theme-background-accent-active);
22
12
  }
23
13
  :host,
24
14
  :host::part(input-container),
@@ -27,39 +17,22 @@ const styles = [
27
17
  width: 100%;
28
18
  }
29
19
 
30
- input {
20
+ :host::part(input-text) {
31
21
  font-family: inherit;
32
22
  }
33
23
 
24
+ :host::part(input-container) {
25
+ background-color: var(--mdc-input-background-color);
26
+ border-color: var(--mdc-input-border-color);
27
+ }
28
+
34
29
  :host::part(input-container):hover {
35
- background-color: var(--mdc-input-hover-background-color);
30
+ --mdc-input-background-color: var(--mds-color-theme-background-primary-hover);
36
31
  }
37
32
 
38
33
  :host::part(input-container):active,
39
34
  :host::part(input-container):focus-within {
40
- background-color: var(--mdc-input-focused-background-color);
41
- border-color: var(--mdc-input-focused-border-color);
42
- }
43
-
44
- :host([readonly])::part(leading-icon) {
45
- color: var(--mdc-input-support-text-color);
46
- }
47
-
48
- :host([disabled])::part(input-text),
49
- :host([disabled]) input::placeholder,
50
- :host([disabled])::part(prefix-text) {
51
- color: var(--mdc-input-disabled-text-color);
52
- }
53
-
54
- :host([disabled])::part(input-container),
55
- :host([readonly])::part(input-container),
56
- :host([disabled][help-text-type='default'])::part(input-container),
57
- :host([disabled][help-text-type='success'])::part(input-container),
58
- :host([disabled][help-text-type='warning'])::part(input-container),
59
- :host([disabled][help-text-type='error'])::part(input-container),
60
- :host([disabled][help-text-type='priority'])::part(input-container) {
61
- border-color: var(--mdc-input-disabled-border-color);
62
- background: var(--mdc-input-disabled-background-color);
35
+ --mdc-input-border-color: var(--mds-color-theme-outline-input-active);
63
36
  }
64
37
 
65
38
  :host::part(leading-icon) {
@@ -85,11 +58,11 @@ const styles = [
85
58
  :host::part(input-text) {
86
59
  border: none;
87
60
  color: var(--mdc-input-text-color);
88
- background-color: var(--mdc-input-background-color);
61
+ background-color: inherit;
89
62
  outline: none;
90
63
  }
91
64
 
92
- input::selection {
65
+ :host::part(input-text)::selection {
93
66
  background-color: var(--mdc-input-selection-background-color);
94
67
  color: var(--mdc-input-selection-text-color);
95
68
  }
@@ -103,21 +76,31 @@ const styles = [
103
76
  color: var(--mdc-input-support-text-color);
104
77
  }
105
78
 
106
- :host([help-text-type='error'])::part(input-container),
107
- :host([help-text-type='error'])::part(input-container):focus-within {
108
- border-color: var(--mdc-input-error-border-color);
79
+ :host([disabled]) {
80
+ --mdc-input-text-color: var(--mds-color-theme-text-primary-disabled);
81
+ --mdc-input-support-text-color: var(--mds-color-theme-text-primary-disabled);
82
+ --mdc-input-border-color: var(--mds-color-theme-outline-primary-disabled);
83
+ --mdc-input-background-color: var(--mds-color-theme-background-input-disabled);
109
84
  }
110
- :host([help-text-type='warning'])::part(input-container),
111
- :host([help-text-type='warning'])::part(input-container):focus-within {
112
- border-color: var(--mdc-input-warning-border-color);
85
+
86
+ :host([readonly])::part(leading-icon) {
87
+ color: var(--mdc-input-support-text-color);
113
88
  }
114
- :host([help-text-type='success'])::part(input-container),
115
- :host([help-text-type='success'])::part(input-container):focus-within {
116
- border-color: var(--mdc-input-success-border-color);
89
+
90
+ :host([readonly])::part(input-container) {
91
+ --mdc-input-border-color: var(--mds-color-theme-outline-primary-disabled);
92
+ --mdc-input-background-color: var(--mds-color-theme-background-input-disabled);
117
93
  }
94
+
95
+ :host([help-text-type='error'])::part(input-container),
96
+ :host([help-text-type='error'])::part(input-container):focus-within,
97
+ :host([help-text-type='warning'])::part(input-container),
98
+ :host([help-text-type='warning'])::part(input-container):focus-within,
99
+ :host([help-text-type='success'])::part(input-container),
100
+ :host([help-text-type='success'])::part(input-container):focus-within,
118
101
  :host([help-text-type='priority'])::part(input-container),
119
102
  :host([help-text-type='priority'])::part(input-container):focus-within {
120
- border-color: var(--mdc-input-primary-border-color);
103
+ border-color: var(--mdc-help-text-color);
121
104
  }
122
105
 
123
106
  .hidden {