@momentum-design/components 0.124.0 → 0.125.0

package/dist/components/textarea/textarea.component.d.ts

@@ -23,6 +23,21 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
  * 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).
@@ -47,6 +62,11 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
  * @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.
@@ -122,6 +142,18 @@ declare class Textarea extends Textarea_base {
      * Example output: "93 out of 140 characters are typed."
      */
     characterLimitAnnouncement?: string;
+    /**
+     * Controls whether the textarea is resizable via the resize button.
+     * When set to false, the resize button will be hidden.
+     * @default false
+     */
+    resizable: boolean;
+    /**
+     * Provides an accessible label for the resize button.
+     * This value is used to set the `aria-label` attribute for the button.
+     * @default ''
+     */
+    resizeButtonAriaLabel?: string;
     /**
      * @internal
      * The textarea element
@@ -131,6 +163,10 @@ declare class Textarea extends Textarea_base {
     private ariaLiveAnnouncer?;
     /** @internal */
     private characterLimitExceedingFired;
+    /** @internal */
+    private resizeStartY;
+    /** @internal */
+    private resizeStartRows;
     protected get textarea(): HTMLTextAreaElement;
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
@@ -191,6 +227,26 @@ declare class Textarea extends Textarea_base {
     private onChange;
     protected renderCharacterCounter(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderTextareaFooter(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+     * Handles the resize button keydown event for keyboard-based resizing.
+     * @param event - The keyboard event.
+     */
+    private handleResizeKeyDown;
+    /**
+     * Handles the start of pointer-based resizing.
+     * @param event - The pointer event.
+     */
+    private handlePointerDown;
+    /**
+     * Handles pointer movement during resizing.
+     * @param event - The pointer event.
+     */
+    private handlePointerMove;
+    /**
+     * Handles the end of pointer-based resizing.
+     * @param event - The pointer event.
+     */
+    private handlePointerUp;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/textarea/textarea.component.js

@@ -16,6 +16,7 @@ import { AUTO_CAPITALIZE } from '../input/input.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
+import { KEYS } from '../../utils/keys';
 import { AUTO_COMPLETE, WRAP, DEFAULTS } from './textarea.constants';
 import styles from './textarea.styles';
 /**
@@ -38,6 +39,21 @@ import styles from './textarea.styles';
  * 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).
@@ -62,6 +78,11 @@ import styles from './textarea.styles';
  * @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.
@@ -106,8 +127,64 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
          * @default 'off'
          */
         this.autocomplete = AUTO_COMPLETE.OFF;
+        /**
+         * Controls whether the textarea is resizable via the resize button.
+         * When set to false, the resize button will be hidden.
+         * @default false
+         */
+        this.resizable = false;
         /** @internal */
         this.characterLimitExceedingFired = false;
+        /** @internal */
+        this.resizeStartY = 0;
+        /** @internal */
+        this.resizeStartRows = 0;
+        /**
+         * Handles the start of pointer-based resizing.
+         * @param event - The pointer event.
+         */
+        this.handlePointerDown = (event) => {
+            if (this.readonly) {
+                return;
+            }
+            const resizeButton = event.currentTarget;
+            if (!resizeButton)
+                return;
+            event.preventDefault();
+            this.resizeStartY = event.clientY;
+            this.resizeStartRows = this.rows || DEFAULTS.ROWS;
+            resizeButton.setPointerCapture(event.pointerId);
+            resizeButton.addEventListener('pointermove', this.handlePointerMove);
+            resizeButton.addEventListener('pointerup', this.handlePointerUp);
+            resizeButton.addEventListener('lostpointercapture', this.handlePointerUp);
+        };
+        /**
+         * Handles pointer movement during resizing.
+         * @param event - The pointer event.
+         */
+        this.handlePointerMove = (event) => {
+            if (!this.textarea)
+                return;
+            const deltaY = event.clientY - this.resizeStartY;
+            const lineHeight = parseFloat(window.getComputedStyle(this.textarea).lineHeight);
+            const rowsChange = Math.round(deltaY / lineHeight);
+            this.rows = Math.max(1, this.resizeStartRows + rowsChange);
+        };
+        /**
+         * Handles the end of pointer-based resizing.
+         * @param event - The pointer event.
+         */
+        this.handlePointerUp = (event) => {
+            const resizeButton = event.currentTarget;
+            if (!resizeButton)
+                return;
+            if (event.type === 'pointerup' && resizeButton.hasPointerCapture(event.pointerId)) {
+                resizeButton.releasePointerCapture(event.pointerId);
+            }
+            resizeButton.removeEventListener('pointermove', this.handlePointerMove);
+            resizeButton.removeEventListener('pointerup', this.handlePointerUp);
+            resizeButton.removeEventListener('lostpointercapture', this.handlePointerUp);
+        };
     }
     get textarea() {
         return this.inputElement;
@@ -311,8 +388,30 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         }
         return html ` <div part="textarea-footer">${this.renderHelperText()} ${this.renderCharacterCounter()}</div> `;
     }
+    /**
+     * Handles the resize button keydown event for keyboard-based resizing.
+     * @param event - The keyboard event.
+     */
+    handleResizeKeyDown(event) {
+        if (this.readonly) {
+            return;
+        }
+        const currentRows = this.rows || DEFAULTS.ROWS;
+        let newRows;
+        if (event.key === KEYS.ARROW_UP) {
+            newRows = Math.max(1, currentRows - 1);
+        }
+        else if (event.key === KEYS.ARROW_DOWN) {
+            newRows = currentRows + 1;
+        }
+        if (newRows !== undefined) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.rows = newRows;
+        }
+    }
     render() {
-        var _a;
+        var _a, _b;
         return html `
       ${this.renderLabel()}
       <div class="mdc-focus-ring" part="textarea-container">
@@ -344,6 +443,19 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
           announcement="${ifDefined(this.ariaLiveAnnouncer)}"
           data-aria-live="polite"
         ></mdc-screenreaderannouncer>
+        ${this.resizable ? html `
+          <mdc-button
+            part="resize-button"
+            class="own-focus-ring"
+            variant="tertiary"
+            size="24"
+            prefix-icon="resize-corner-regular"
+            aria-label=${(_b = this.resizeButtonAriaLabel) !== null && _b !== void 0 ? _b : ''}
+            ?disabled="${this.disabled || this.readonly}"
+            @keydown=${this.handleResizeKeyDown}
+            @pointerdown=${this.handlePointerDown}
+          ></mdc-button>
+        ` : nothing}
       </div>
       ${this.renderTextareaFooter()}
     `;
@@ -355,7 +467,7 @@ __decorate([
     __metadata("design:type", String)
 ], Textarea.prototype, "placeholder", void 0);
 __decorate([
-    property({ type: Number }),
+    property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], Textarea.prototype, "rows", void 0);
 __decorate([
@@ -394,6 +506,14 @@ __decorate([
     property({ type: String, attribute: 'character-limit-announcement' }),
     __metadata("design:type", String)
 ], Textarea.prototype, "characterLimitAnnouncement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Textarea.prototype, "resizable", void 0);
+__decorate([
+    property({ type: String, attribute: 'resize-button-aria-label' }),
+    __metadata("design:type", String)
+], Textarea.prototype, "resizeButtonAriaLabel", void 0);
 __decorate([
     query('textarea'),
     __metadata("design:type", HTMLTextAreaElement)

package/dist/components/textarea/textarea.styles.js

@@ -35,6 +35,7 @@ const styles = [
       padding: 0.375rem 0.25rem 0.25rem 0.75rem;
       background-color: var(--mdc-textarea-container-background-color);
       width: 100%;
+      position: relative;
     }
 
     :host(:dir(rtl))::part(textarea-container) {
@@ -101,6 +102,30 @@ const styles = [
       opacity: 0;
       pointer-events: none;
     }
+
+    :host::part(resize-button) {
+      position: absolute;
+      bottom: 0.25rem;
+      inset-inline-end: 0.25rem;
+      cursor: nwse-resize;
+      opacity: 0.5;
+      z-index: 1;
+      border-radius: 50%;
+    }
+
+    :host::part(resize-button):focus-visible {
+      opacity: 1;
+    }
+
+    :host(:dir(rtl))::part(resize-button) {
+      cursor: nesw-resize;
+      transform: scaleX(-1);
+    }
+
+    :host([readonly])::part(resize-button),
+    :host([disabled])::part(resize-button) {
+      cursor: default;
+    }
   `,
     ...hostFocusRingStyles(true),
 ];