@momentum-design/components 0.124.0 → 0.125.0

package/dist/react/index.d.ts

@@ -1,10 +1,10 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
-export { default as Animation } from './animation';
 export { default as AnnouncementDialog } from './announcementdialog';
 export { default as Appheader } from './appheader';
+export { default as Animation } from './animation';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';

package/dist/react/index.js

@@ -1,10 +1,10 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
-export { default as Animation } from './animation';
 export { default as AnnouncementDialog } from './announcementdialog';
 export { default as Appheader } from './appheader';
+export { default as Animation } from './animation';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';

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

@@ -21,6 +21,21 @@ import type { Events } from '../../components/textarea/textarea.types';
  * help-text attribute with the error message using limitexceeded event.
  * The same help-text value will be used for the validation message to be displayed.
  *
+ * ### Accessibility
+ *
+ * #### Resize
+ *
+ * Accessible text area resizing can be turned on with the `resizable`.
+ * It is strongly recommended to set the `resize-button-aria-label` attribute as well to describe what it is and what are the shortcuts (up/down arrows) of the button.
+ *
+ * #### Best practices
+ *
+ * - Always provide a `label` for screen readers to identify the textarea's purpose
+ * - Use `help-text` to provide additional context or instructions
+ * - When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates
+ * - Use appropriate `help-text-type` (error, warning, success) to convey validation state
+ * - Ensure `validation-message` is set for form validation errors
+ *
  * @tagname mdc-textarea
  *
  * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).
@@ -45,6 +60,11 @@ import type { Events } from '../../components/textarea/textarea.types';
  * @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 textarea - The textarea element.
+ * @csspart textarea-container - The container element that wraps the textarea and resize button.
+ * @csspart textarea-footer - The footer element that contains the character counter.
+ * @csspart character-counter - The character counter element.
+ * @csspart resize-button - The resize button element (shown when `resizable` is true).
  * @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.

package/dist/react/textarea/index.js

@@ -22,6 +22,21 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
  * help-text attribute with the error message using limitexceeded event.
  * The same help-text value will be used for the validation message to be displayed.
  *
+ * ### Accessibility
+ *
+ * #### Resize
+ *
+ * Accessible text area resizing can be turned on with the `resizable`.
+ * It is strongly recommended to set the `resize-button-aria-label` attribute as well to describe what it is and what are the shortcuts (up/down arrows) of the button.
+ *
+ * #### Best practices
+ *
+ * - Always provide a `label` for screen readers to identify the textarea's purpose
+ * - Use `help-text` to provide additional context or instructions
+ * - When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates
+ * - Use appropriate `help-text-type` (error, warning, success) to convey validation state
+ * - Ensure `validation-message` is set for form validation errors
+ *
  * @tagname mdc-textarea
  *
  * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).
@@ -46,6 +61,11 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
  * @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 textarea - The textarea element.
+ * @csspart textarea-container - The container element that wraps the textarea and resize button.
+ * @csspart textarea-footer - The footer element that contains the character counter.
+ * @csspart character-counter - The character counter element.
+ * @csspart resize-button - The resize button element (shown when `resizable` is true).
  * @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.

package/package.json

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