@momentum-design/components 0.120.19 → 0.120.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/browser/index.js +174 -247
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/checkbox/checkbox.component.d.ts +8 -0
  4. package/dist/components/checkbox/checkbox.component.js +8 -0
  5. package/dist/components/checkbox/checkbox.styles.js +3 -3
  6. package/dist/components/combobox/combobox.component.d.ts +8 -6
  7. package/dist/components/combobox/combobox.component.js +8 -6
  8. package/dist/components/combobox/combobox.styles.js +5 -25
  9. package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +9 -0
  10. package/dist/components/formfieldgroup/formfieldgroup.component.js +9 -0
  11. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +9 -0
  12. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +9 -0
  13. package/dist/components/formfieldwrapper/formfieldwrapper.styles.d.ts +2 -2
  14. package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +68 -66
  15. package/dist/components/input/input.component.d.ts +11 -13
  16. package/dist/components/input/input.component.js +11 -13
  17. package/dist/components/input/input.styles.js +33 -50
  18. package/dist/components/password/password.component.d.ts +31 -27
  19. package/dist/components/password/password.component.js +31 -27
  20. package/dist/components/progressbar/progressbar.component.d.ts +15 -20
  21. package/dist/components/progressbar/progressbar.component.js +16 -21
  22. package/dist/components/progressbar/progressbar.styles.js +7 -19
  23. package/dist/components/searchfield/searchfield.component.d.ts +30 -0
  24. package/dist/components/searchfield/searchfield.component.js +30 -0
  25. package/dist/components/select/select.component.d.ts +19 -21
  26. package/dist/components/select/select.component.js +19 -21
  27. package/dist/components/select/select.styles.js +14 -29
  28. package/dist/components/tab/tab.component.js +0 -1
  29. package/dist/components/tab/tab.styles.js +16 -8
  30. package/dist/components/textarea/textarea.component.d.ts +20 -18
  31. package/dist/components/textarea/textarea.component.js +20 -18
  32. package/dist/components/textarea/textarea.styles.js +27 -49
  33. package/dist/custom-elements.json +1708 -1324
  34. package/dist/react/checkbox/index.d.ts +8 -0
  35. package/dist/react/checkbox/index.js +8 -0
  36. package/dist/react/combobox/index.d.ts +8 -6
  37. package/dist/react/combobox/index.js +8 -6
  38. package/dist/react/formfieldgroup/index.d.ts +9 -0
  39. package/dist/react/formfieldgroup/index.js +9 -0
  40. package/dist/react/formfieldwrapper/index.d.ts +9 -0
  41. package/dist/react/formfieldwrapper/index.js +9 -0
  42. package/dist/react/index.d.ts +3 -3
  43. package/dist/react/index.js +3 -3
  44. package/dist/react/input/index.d.ts +11 -13
  45. package/dist/react/input/index.js +11 -13
  46. package/dist/react/password/index.d.ts +31 -27
  47. package/dist/react/password/index.js +31 -27
  48. package/dist/react/progressbar/index.d.ts +15 -20
  49. package/dist/react/progressbar/index.js +15 -20
  50. package/dist/react/searchfield/index.d.ts +30 -0
  51. package/dist/react/searchfield/index.js +30 -0
  52. package/dist/react/select/index.d.ts +19 -21
  53. package/dist/react/select/index.js +19 -21
  54. package/dist/react/textarea/index.d.ts +20 -18
  55. package/dist/react/textarea/index.js +20 -18
  56. package/package.json +1 -1
@@ -30,21 +30,10 @@ import type { Events } from '../../components/select/select.types';
30
30
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
31
31
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
32
32
  *
33
- * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
34
- * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.
35
- * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.
36
- * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.
37
- * @cssproperty --mdc-select-text-color - The text color of the select.
38
- * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
39
- * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
40
- * @cssproperty --mdc-select-border-color - The border color of the select.
41
- * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
42
- * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
43
- * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
44
- * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
45
- * @cssproperty --mdc-select-width - The width of the select.
46
- * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
47
- * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
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.
48
37
  *
49
38
  * @csspart label - The label element.
50
39
  * @csspart label-text - The container for the label and required indicator elements.
@@ -54,12 +43,21 @@ import type { Events } from '../../components/select/select.types';
54
43
  * @csspart help-text - The helper/validation text element.
55
44
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
56
45
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
57
- * @csspart container - The container element that wraps the visual combobox and the dropdown icon.
58
- * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
59
- * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
60
- * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
61
- * @csspart icon-container - The container element that wraps the dropdown icon.
62
- * @csspart native-input - The native hidden input 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-select-background-color - The background color of the combobox of select.
56
+ * @cssproperty --mdc-select-text-color - The text color of the select.
57
+ * @cssproperty --mdc-select-border-color - The border color of the select.
58
+ * @cssproperty --mdc-select-width - The width of the select.
59
+ * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
60
+ * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
63
61
  */
64
62
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
65
63
  onChange: EventName<Events["onChangeEvent"]>;
@@ -31,21 +31,10 @@ import { TAG_NAME } from '../../components/select/select.constants';
31
31
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
32
32
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
33
33
  *
34
- * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
35
- * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.
36
- * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.
37
- * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.
38
- * @cssproperty --mdc-select-text-color - The text color of the select.
39
- * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
40
- * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
41
- * @cssproperty --mdc-select-border-color - The border color of the select.
42
- * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
43
- * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
44
- * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
45
- * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
46
- * @cssproperty --mdc-select-width - The width of the select.
47
- * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
48
- * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
34
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
35
+ * @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.
36
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
37
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
49
38
  *
50
39
  * @csspart label - The label element.
51
40
  * @csspart label-text - The container for the label and required indicator elements.
@@ -55,12 +44,21 @@ import { TAG_NAME } from '../../components/select/select.constants';
55
44
  * @csspart help-text - The helper/validation text element.
56
45
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
57
46
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
58
- * @csspart container - The container element that wraps the visual combobox and the dropdown icon.
59
- * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
60
- * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
61
- * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
62
- * @csspart icon-container - The container element that wraps the dropdown icon.
63
- * @csspart native-input - The native hidden input element.
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.
56
+ * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
57
+ * @cssproperty --mdc-select-text-color - The text color of the select.
58
+ * @cssproperty --mdc-select-border-color - The border color of the select.
59
+ * @cssproperty --mdc-select-width - The width of the select.
60
+ * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
61
+ * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
64
62
  */
65
63
  const reactWrapper = createComponent({
66
64
  tagName: TAG_NAME,
@@ -35,20 +35,10 @@ import type { Events } from '../../components/textarea/textarea.types';
35
35
  * @dependency mdc-text
36
36
  * @dependency mdc-toggletip
37
37
  *
38
- * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
39
- * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
40
- * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled
41
- * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
42
- * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
43
- * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
44
- * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
45
- * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
46
- * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
47
- * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
48
- * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
49
- * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
50
- * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
51
- * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
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.
52
42
  *
53
43
  * @csspart label - The label element.
54
44
  * @csspart label-text - The container for the label and required indicator elements.
@@ -58,10 +48,22 @@ import type { Events } from '../../components/textarea/textarea.types';
58
48
  * @csspart help-text - The helper/validation text element.
59
49
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
60
50
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
61
- * @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
62
- * @csspart textarea-footer - The container for the help text and character counter elements.
63
- * @csspart textarea-container - The textarea container
64
- * @csspart textarea - The textarea field 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-textarea-text-color - Text color for the textarea field
61
+ * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
62
+ * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
63
+ * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
64
+ * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
65
+ * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
66
+ * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
65
67
  */
66
68
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
67
69
  onLimitExceeded: EventName<Events["onLimitExceededEvent"]>;
@@ -36,20 +36,10 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
36
36
  * @dependency mdc-text
37
37
  * @dependency mdc-toggletip
38
38
  *
39
- * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
40
- * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
41
- * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled
42
- * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
43
- * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
44
- * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
45
- * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
46
- * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
47
- * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
48
- * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
49
- * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
50
- * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
51
- * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
52
- * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
39
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
40
+ * @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
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
42
+ * @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
43
  *
54
44
  * @csspart label - The label element.
55
45
  * @csspart label-text - The container for the label and required indicator elements.
@@ -59,10 +49,22 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
59
49
  * @csspart help-text - The helper/validation text element.
60
50
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
61
51
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
62
- * @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
63
- * @csspart textarea-footer - The container for the help text and character counter elements.
64
- * @csspart textarea-container - The textarea container
65
- * @csspart textarea - The textarea field element.
52
+ *
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.
61
+ * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
62
+ * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
63
+ * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
64
+ * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
65
+ * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
66
+ * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
67
+ * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
66
68
  */
67
69
  const reactWrapper = createComponent({
68
70
  tagName: TAG_NAME,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@momentum-design/components",
3
3
  "packageManager": "yarn@3.2.4",
4
- "version": "0.120.19",
4
+ "version": "0.120.21",
5
5
  "engines": {
6
6
  "node": ">=20.0.0",
7
7
  "npm": ">=8.0.0"