@momentum-design/components 0.120.20 → 0.120.21

package/dist/react/searchfield/index.js

@@ -18,10 +18,40 @@ import { TAG_NAME } from '../../components/searchfield/searchfield.constants';
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
  * @slot filters - Slot for input chips
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
+ * @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.
+ * @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.
+ * @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.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
  * @csspart leading-icon - The leading icon element that is displayed before the input field.
+ * @csspart prefix-text - The prefix text element that is displayed before the input field.
  * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
  * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
  * @csspart input-text - The input field element.

package/dist/react/select/index.d.ts

@@ -30,21 +30,10 @@ import type { Events } from '../../components/select/select.types';
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  *
- * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
- * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.
- * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.
- * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.
- * @cssproperty --mdc-select-text-color - The text color of the select.
- * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
- * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
- * @cssproperty --mdc-select-border-color - The border color of the select.
- * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
- * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
- * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
- * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
- * @cssproperty --mdc-select-width - The width of the select.
- * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
- * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
@@ -54,12 +43,21 @@ import type { Events } from '../../components/select/select.types';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart container - The container element that wraps the visual combobox and the dropdown icon.
- * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
- * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
- * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
- * @csspart icon-container - The container element that wraps the dropdown icon.
- * @csspart native-input - The native hidden input element.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
+ * @cssproperty --mdc-select-text-color - The text color of the select.
+ * @cssproperty --mdc-select-border-color - The border color of the select.
+ * @cssproperty --mdc-select-width - The width of the select.
+ * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
+ * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/select/index.js

@@ -31,21 +31,10 @@ import { TAG_NAME } from '../../components/select/select.constants';
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  *
- * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
- * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.
- * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.
- * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.
- * @cssproperty --mdc-select-text-color - The text color of the select.
- * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
- * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
- * @cssproperty --mdc-select-border-color - The border color of the select.
- * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
- * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
- * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
- * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
- * @cssproperty --mdc-select-width - The width of the select.
- * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
- * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
@@ -55,12 +44,21 @@ import { TAG_NAME } from '../../components/select/select.constants';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart container - The container element that wraps the visual combobox and the dropdown icon.
- * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
- * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
- * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
- * @csspart icon-container - The container element that wraps the dropdown icon.
- * @csspart native-input - The native hidden input element.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
+ * @cssproperty --mdc-select-text-color - The text color of the select.
+ * @cssproperty --mdc-select-border-color - The border color of the select.
+ * @cssproperty --mdc-select-width - The width of the select.
+ * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
+ * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/textarea/index.d.ts

@@ -35,20 +35,10 @@ import type { Events } from '../../components/textarea/textarea.types';
  * @dependency mdc-text
  * @dependency mdc-toggletip
  *
- * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
- * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
- * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled
- * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
- * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
- * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
- * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
- * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
- * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
- * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
- * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
- * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
- * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
- * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
@@ -58,10 +48,22 @@ import type { Events } from '../../components/textarea/textarea.types';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
- * @csspart textarea-footer - The container for the help text and character counter elements.
- * @csspart textarea-container - The textarea container
- * @csspart textarea - The textarea field element.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
+ * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
+ * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
+ * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
+ * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
+ * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
+ * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onLimitExceeded: EventName<Events["onLimitExceededEvent"]>;

package/dist/react/textarea/index.js

@@ -36,20 +36,10 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
  * @dependency mdc-text
  * @dependency mdc-toggletip
  *
- * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
- * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
- * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled
- * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
- * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
- * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
- * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
- * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
- * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
- * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
- * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
- * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
- * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
- * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
@@ -59,10 +49,22 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
- * @csspart textarea-footer - The container for the help text and character counter elements.
- * @csspart textarea-container - The textarea container
- * @csspart textarea - The textarea field element.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
+ * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
+ * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
+ * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
+ * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
+ * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
+ * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.120.20",
+  "version": "0.120.21",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"