@momentum-design/components 0.120.20 → 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 (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 +1779 -1395
  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 +4 -4
  41. package/dist/react/index.js +4 -4
  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,6 +25,14 @@ import type { Events } from '../../components/checkbox/checkbox.types';
25
25
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
26
26
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
27
27
  * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
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.
28
36
  *
29
37
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
30
38
  * @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.
@@ -26,6 +26,14 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
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.
@@ -49,13 +49,15 @@ import type { Events } from '../../components/combobox/combobox.types';
49
49
  * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
50
50
  * @cssproperty --mdc-combobox-width - The width of the combobox
51
51
  * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
52
- * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
53
- * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
54
- * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
55
- * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
56
- * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
57
52
  * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
58
- * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
53
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
54
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
55
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
56
+ * @cssproperty --mdc-label-color - Color for the label text.
57
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
58
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
59
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
60
+ * @cssproperty --mdc-help-text-color - Color for the help text.
59
61
  *
60
62
  * @csspart label - The label element.
61
63
  * @csspart label-text - The container for the label and required indicator elements.
@@ -50,13 +50,15 @@ import { TAG_NAME } from '../../components/combobox/combobox.constants';
50
50
  * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
51
51
  * @cssproperty --mdc-combobox-width - The width of the combobox
52
52
  * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
53
- * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
54
- * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
55
- * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
56
- * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
57
- * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
58
53
  * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
59
- * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
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.
60
62
  *
61
63
  * @csspart label - The label element.
62
64
  * @csspart label-text - The container for the label and required indicator elements.
@@ -38,6 +38,15 @@ import Component from '../../components/formfieldgroup';
38
38
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
39
39
  * @csspart container - Formfieldgroup host container
40
40
  * @csspart group-header - This contains the label and help text for the group
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.
41
50
  */
42
51
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
43
52
  export default reactWrapper;
@@ -41,6 +41,15 @@ import { TAG_NAME } from '../../components/formfieldgroup/formfieldgroup.constan
41
41
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
42
42
  * @csspart container - Formfieldgroup host container
43
43
  * @csspart group-header - This contains the label and help text for the group
44
+ *
45
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
46
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
47
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
48
+ * @cssproperty --mdc-label-color - Color for the label text.
49
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
50
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
51
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
52
+ * @cssproperty --mdc-help-text-color - Color for the help text.
44
53
  */
45
54
  const reactWrapper = createComponent({
46
55
  tagName: TAG_NAME,
@@ -24,6 +24,15 @@ import Component from '../../components/formfieldwrapper';
24
24
  * @csspart help-text - The helper/validation text element.
25
25
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
26
26
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
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.
27
36
  */
28
37
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
29
38
  export default reactWrapper;
@@ -27,6 +27,15 @@ import { TAG_NAME } from '../../components/formfieldwrapper/formfieldwrapper.con
27
27
  * @csspart help-text - The helper/validation text element.
28
28
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
29
29
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
30
+ *
31
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
32
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
33
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
34
+ * @cssproperty --mdc-label-color - Color for the label text.
35
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
36
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
37
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
38
+ * @cssproperty --mdc-help-text-color - Color for the help text.
30
39
  */
31
40
  const reactWrapper = createComponent({
32
41
  tagName: TAG_NAME,
@@ -1,11 +1,11 @@
1
- export { default as Accordion } from './accordion';
2
1
  export { default as AccordionButton } from './accordionbutton';
2
+ export { default as Accordion } from './accordion';
3
3
  export { default as AccordionGroup } from './accordiongroup';
4
4
  export { default as AlertChip } from './alertchip';
5
- export { default as Animation } from './animation';
6
5
  export { default as AnnouncementDialog } from './announcementdialog';
7
6
  export { default as Appheader } from './appheader';
8
7
  export { default as Avatar } from './avatar';
8
+ export { default as Animation } from './animation';
9
9
  export { default as AvatarButton } from './avatarbutton';
10
10
  export { default as Badge } from './badge';
11
11
  export { default as Banner } from './banner';
@@ -42,10 +42,10 @@ export { default as List } from './list';
42
42
  export { default as ListBox } from './listbox';
43
43
  export { default as Listheader } from './listheader';
44
44
  export { default as ListItem } from './listitem';
45
+ export { default as Marker } from './marker';
45
46
  export { default as MenuBar } from './menubar';
46
47
  export { default as MenuItem } from './menuitem';
47
48
  export { default as MenuItemCheckbox } from './menuitemcheckbox';
48
- export { default as Marker } from './marker';
49
49
  export { default as MenuItemRadio } from './menuitemradio';
50
50
  export { default as MenuPopover } from './menupopover';
51
51
  export { default as MenuSection } from './menusection';
@@ -68,9 +68,9 @@ export { default as Skeleton } from './skeleton';
68
68
  export { default as Slider } from './slider';
69
69
  export { default as Spinner } from './spinner';
70
70
  export { default as StaticCheckbox } from './staticcheckbox';
71
- export { default as StaticChip } from './staticchip';
72
71
  export { default as StaticRadio } from './staticradio';
73
72
  export { default as StaticToggle } from './statictoggle';
73
+ export { default as StaticChip } from './staticchip';
74
74
  export { default as Stepper } from './stepper';
75
75
  export { default as StepperConnector } from './stepperconnector';
76
76
  export { default as StepperItem } from './stepperitem';
@@ -1,11 +1,11 @@
1
- export { default as Accordion } from './accordion';
2
1
  export { default as AccordionButton } from './accordionbutton';
2
+ export { default as Accordion } from './accordion';
3
3
  export { default as AccordionGroup } from './accordiongroup';
4
4
  export { default as AlertChip } from './alertchip';
5
- export { default as Animation } from './animation';
6
5
  export { default as AnnouncementDialog } from './announcementdialog';
7
6
  export { default as Appheader } from './appheader';
8
7
  export { default as Avatar } from './avatar';
8
+ export { default as Animation } from './animation';
9
9
  export { default as AvatarButton } from './avatarbutton';
10
10
  export { default as Badge } from './badge';
11
11
  export { default as Banner } from './banner';
@@ -42,10 +42,10 @@ export { default as List } from './list';
42
42
  export { default as ListBox } from './listbox';
43
43
  export { default as Listheader } from './listheader';
44
44
  export { default as ListItem } from './listitem';
45
+ export { default as Marker } from './marker';
45
46
  export { default as MenuBar } from './menubar';
46
47
  export { default as MenuItem } from './menuitem';
47
48
  export { default as MenuItemCheckbox } from './menuitemcheckbox';
48
- export { default as Marker } from './marker';
49
49
  export { default as MenuItemRadio } from './menuitemradio';
50
50
  export { default as MenuPopover } from './menupopover';
51
51
  export { default as MenuSection } from './menusection';
@@ -68,9 +68,9 @@ export { default as Skeleton } from './skeleton';
68
68
  export { default as Slider } from './slider';
69
69
  export { default as Spinner } from './spinner';
70
70
  export { default as StaticCheckbox } from './staticcheckbox';
71
- export { default as StaticChip } from './staticchip';
72
71
  export { default as StaticRadio } from './staticradio';
73
72
  export { default as StaticToggle } from './statictoggle';
73
+ export { default as StaticChip } from './staticchip';
74
74
  export { default as Stepper } from './stepper';
75
75
  export { default as StepperConnector } from './stepperconnector';
76
76
  export { default as StepperItem } from './stepperitem';
@@ -35,22 +35,20 @@ import type { Events } from '../../components/input/input.types';
35
35
  * @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.
36
36
  * @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.
37
37
  *
38
- * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
39
- * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
40
- * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
41
- * @cssproperty --mdc-input-border-color - Border color for the input container
38
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
39
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
40
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
41
+ * @cssproperty --mdc-label-color - Color for the label text.
42
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
43
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
44
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
45
+ * @cssproperty --mdc-help-text-color - Color for the help text.
42
46
  * @cssproperty --mdc-input-text-color - Text color for the input field
47
+ * @cssproperty --mdc-input-border-color - Border color for the input container
43
48
  * @cssproperty --mdc-input-background-color - Background color for the input field
44
- * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
45
- * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
46
49
  * @cssproperty --mdc-input-support-text-color - Text color for the help text
47
- * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
48
- * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
49
- * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
50
- * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
51
- * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
52
- * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
53
- * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
50
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
51
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
54
52
  *
55
53
  * @csspart label - The label element.
56
54
  * @csspart label-text - The container for the label and required indicator elements.
@@ -36,22 +36,20 @@ import { TAG_NAME } from '../../components/input/input.constants';
36
36
  * @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.
37
37
  * @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.
38
38
  *
39
- * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
40
- * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
41
- * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
42
- * @cssproperty --mdc-input-border-color - Border color for the input container
39
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
40
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
41
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
42
+ * @cssproperty --mdc-label-color - Color for the label text.
43
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
44
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
45
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
46
+ * @cssproperty --mdc-help-text-color - Color for the help text.
43
47
  * @cssproperty --mdc-input-text-color - Text color for the input field
48
+ * @cssproperty --mdc-input-border-color - Border color for the input container
44
49
  * @cssproperty --mdc-input-background-color - Background color for the input field
45
- * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
46
- * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
47
50
  * @cssproperty --mdc-input-support-text-color - Text color for the help text
48
- * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
49
- * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
50
- * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
51
- * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
52
- * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
53
- * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
54
- * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
51
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
52
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
55
53
  *
56
54
  * @csspart label - The label element.
57
55
  * @csspart label-text - The container for the label and required indicator elements.
@@ -24,35 +24,39 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
24
24
  * @dependency mdc-button
25
25
  * @dependency mdc-toggletip
26
26
  *
27
- * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled
28
- * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled
29
- * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled
30
- * @cssproperty --mdc-input-border-color - Border color for the password container
31
- * @cssproperty --mdc-input-text-color - Text color for the password field
32
- * @cssproperty --mdc-input-background-color - Background color for the password field
33
- * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
34
- * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
35
- * @cssproperty --mdc-input-support-text-color - Text color for the help text
36
- * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
37
- * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
38
- * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
39
- * @cssproperty --mdc-input-error-border-color - Border color for the password container when error
40
- * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
41
- * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
42
- * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
27
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
28
+ * @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.
29
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
30
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
31
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
32
+ * @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.
33
+ * @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.
34
+ * @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.
43
35
  *
44
- * @csspart label - The label element.
45
- * @csspart label-text - The container for the label and required indicator elements.
46
- * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
47
- * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
48
- * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
49
- * @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
- * @csspart help-text-container - The container for the helper/validation icon and text elements.
52
- * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
53
- * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
36
+ * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.
37
+ * @csspart input-section - The container that wraps the input field and prefix text.
54
38
  * @csspart input-text - The input field element.
55
- * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
39
+ * @csspart trailing-button - The trailing button element.
40
+ * @csspart label - The label element.
41
+ * @csspart helper-text - The helper/validation text element.
42
+ * @csspart helper-icon - The helper/validation icon element.
43
+ * @csspart toggletip - The toggletip icon button element.
44
+ * @csspart toggletip-text - The toggletip text element.
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.
54
+ * @cssproperty --mdc-input-text-color - Text color for the input field
55
+ * @cssproperty --mdc-input-border-color - Border color for the input container
56
+ * @cssproperty --mdc-input-background-color - Background color for the input field
57
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
58
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
59
+ *
56
60
  */
57
61
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
58
62
  onInput: EventName<EventsInherited["onInputEvent"]>;
@@ -25,35 +25,39 @@ import { TAG_NAME } from '../../components/password/password.constants';
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
  const reactWrapper = createComponent({
59
63
  tagName: TAG_NAME,
@@ -14,31 +14,26 @@ import Component from '../../components/progressbar';
14
14
  * @dependency mdc-icon
15
15
  * @dependency mdc-text
16
16
  *
17
- * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
18
- * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.
19
- * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
20
- * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
21
- * @cssproperty --mdc-progressbar-height - The height of the progressbar.
22
- * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
23
- * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
24
- * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
25
- * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
26
- * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
27
- * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
17
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
18
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
28
19
  *
29
20
  * @csspart label - The label element.
30
21
  * @csspart label-text - The container for the label and required indicator elements.
31
- * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
32
22
  * @csspart help-text - The helper/validation text element.
33
- * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
34
23
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
35
- * @csspart gap - The gap between the label and the progressbar.
36
- * @csspart inline-label-container - The container of the label in inline variant.
37
- * @csspart label-container - The container of the label in inline variant.
38
- * @csspart percentage - The container of the label in inline variant.
39
- * @csspart progress-bar - The container of the label in inline variant.
40
- * @csspart progress-container - The container of the label in inline variant.
41
- * @csspart remaining - The container of the remaining progressbar portion.
24
+ *
25
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
26
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
27
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
28
+ * @cssproperty --mdc-label-color - Color for the label text.
29
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
30
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
31
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
32
+ * @cssproperty --mdc-help-text-color - Color for the help text.
33
+ * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
34
+ * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.
35
+ * @cssproperty --mdc-progressbar-height - The height of the progressbar.
36
+ * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
42
37
  */
43
38
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
44
39
  export default reactWrapper;
@@ -17,31 +17,26 @@ import { TAG_NAME } from '../../components/progressbar/progressbar.constants';
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
  const reactWrapper = createComponent({
47
42
  tagName: TAG_NAME,
@@ -17,10 +17,40 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
17
17
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
18
18
  *
19
19
  * @slot filters - Slot for input chips
20
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
21
+ * @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.
22
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
23
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
24
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
25
+ * @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.
26
+ * @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.
27
+ * @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.
28
+ *
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.
37
+ * @cssproperty --mdc-input-text-color - Text color for the input field
38
+ * @cssproperty --mdc-input-border-color - Border color for the input container
39
+ * @cssproperty --mdc-input-background-color - Background color for the input field
40
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
41
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
42
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
20
43
  *
21
44
  * @csspart label - The label element.
22
45
  * @csspart label-text - The container for the label and required indicator elements.
46
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
47
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
48
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
49
+ * @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
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
23
52
  * @csspart leading-icon - The leading icon element that is displayed before the input field.
53
+ * @csspart prefix-text - The prefix text element that is displayed before the input field.
24
54
  * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
25
55
  * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
26
56
  * @csspart input-text - The input field element.