@momentum-design/components 0.127.6 → 0.127.8

package/dist/components/alertchip/alertchip.styles.js

@@ -106,5 +106,12 @@ const styles = css `
   :host([variant='informational']:active) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-theme-active);
   }
+
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host([variant='neutral'])::part(icon) {
+      --mdc-chip-icon-color: ButtonText;
+    }
+  }
 `;
 export default [hostFitContentStyles, styles, ...hostFocusRingStyles()];

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

@@ -103,6 +103,11 @@ declare class ScreenreaderAnnouncer extends Component {
      * Clears all timeouts and removes all announcements from the screen reader.
      */
     private clearTimeOutsAndAnnouncements;
+    /**
+     * Gets an element by ID, searching in both light DOM and modal dialog shadow root.
+     * @internal
+     */
+    private getElementByIdAcrossShadowRoot;
     /**
      * Creates a div element with id as identity attribute in the DOM.
      *
@@ -110,6 +115,11 @@ declare class ScreenreaderAnnouncer extends Component {
      * `mdc-screenreaderannouncer-identity`.
      */
     private createAnnouncementAriaLiveRegion;
+    /**
+     * Finds the closest modal dialog ancestor, traversing through shadow DOM boundaries.
+     * @internal
+     */
+    private findModalAncestor;
     /**
      * Creates a single debounced function that will read the latest this.announcement when executed.
      *

package/dist/components/screenreaderannouncer/screenreaderannouncer.component.js

@@ -118,15 +118,14 @@ class ScreenreaderAnnouncer extends Component {
             const announcementContainer = document.createElement('div');
             announcementContainer.setAttribute('id', announcementId);
             announcementContainer.setAttribute('aria-live', ariaLive);
-            (_a = document.getElementById(this.identity)) === null || _a === void 0 ? void 0 : _a.appendChild(announcementContainer);
+            (_a = this.getElementByIdAcrossShadowRoot(this.identity)) === null || _a === void 0 ? void 0 : _a.appendChild(announcementContainer);
             const timeOutId = window.setTimeout(() => {
                 const announcementElement = document.createElement('p');
                 announcementElement.textContent = announcement;
                 announcementContainer.appendChild(announcementElement);
                 this.ariaLiveAnnouncementIds.push(announcementId);
                 const timeOutId = window.setTimeout(() => {
-                    var _a;
-                    (_a = document.getElementById(announcementId)) === null || _a === void 0 ? void 0 : _a.remove();
+                    announcementContainer.remove();
                 }, timeout);
                 this.timeOutIds.push(timeOutId);
             }, delay);
@@ -142,9 +141,22 @@ class ScreenreaderAnnouncer extends Component {
         });
         this.ariaLiveAnnouncementIds.forEach(announcementId => {
             var _a;
-            (_a = document.getElementById(announcementId)) === null || _a === void 0 ? void 0 : _a.remove();
+            (_a = this.getElementByIdAcrossShadowRoot(announcementId)) === null || _a === void 0 ? void 0 : _a.remove();
         });
     }
+    /**
+     * Gets an element by ID, searching in both light DOM and modal dialog shadow root.
+     * @internal
+     */
+    getElementByIdAcrossShadowRoot(id) {
+        var _a;
+        const element = document.getElementById(id);
+        if (element) {
+            return element;
+        }
+        const modalDialog = this.findModalAncestor();
+        return ((_a = modalDialog === null || modalDialog === void 0 ? void 0 : modalDialog.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(id)) || null;
+    }
     /**
      * Creates a div element with id as identity attribute in the DOM.
      *
@@ -152,7 +164,7 @@ class ScreenreaderAnnouncer extends Component {
      * `mdc-screenreaderannouncer-identity`.
      */
     createAnnouncementAriaLiveRegion() {
-        let liveRegionLightDom = document.getElementById(this.identity);
+        let liveRegionLightDom = this.getElementByIdAcrossShadowRoot(this.identity);
         if (!liveRegionLightDom) {
             liveRegionLightDom = document.createElement('div');
             liveRegionLightDom.id = this.identity;
@@ -170,8 +182,37 @@ class ScreenreaderAnnouncer extends Component {
       `;
             liveRegionLightDom.appendChild(styleElement);
             liveRegionLightDom.classList.add('mdc-screenreaderannouncer__visually-hidden');
-            document.body.appendChild(liveRegionLightDom);
+            // If inside a modal dialog, append to its shadow root, otherwise to document.body
+            const modalDialog = this.findModalAncestor();
+            if (modalDialog === null || modalDialog === void 0 ? void 0 : modalDialog.shadowRoot) {
+                modalDialog.shadowRoot.appendChild(liveRegionLightDom);
+            }
+            else {
+                document.body.appendChild(liveRegionLightDom);
+            }
+        }
+    }
+    /**
+     * Finds the closest modal dialog ancestor, traversing through shadow DOM boundaries.
+     * @internal
+     */
+    findModalAncestor() {
+        let element = this;
+        while (element) {
+            const modal = element.closest('[aria-modal="true"]');
+            if (modal) {
+                return modal;
+            }
+            // Traverse up through shadow DOM boundary
+            const root = element.getRootNode();
+            if (root instanceof ShadowRoot && root.host) {
+                element = root.host;
+            }
+            else {
+                break;
+            }
         }
+        return null;
     }
     /**
      * Creates a single debounced function that will read the latest this.announcement when executed.

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

@@ -182,15 +182,6 @@ declare class Textarea extends Textarea_base {
      */
     handleValueChange(): void;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    /**
-     * This function is called when the attribute changes.
-     * It updates the validity of the textarea field based on the textarea field's validity.
-     *
-     * @param name - attribute name
-     * @param old - old value
-     * @param value - new value
-     */
-    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     /**
      * Dispatches the character overflow state change event.
      * @returns void

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

@@ -265,28 +265,9 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
             this.handleValueChange();
             this.handleCharacterOverflowStateChange();
         }
-    }
-    /**
-     * This function is called when the attribute changes.
-     * It updates the validity of the textarea field based on the textarea field's validity.
-     *
-     * @param name - attribute name
-     * @param old - old value
-     * @param value - new value
-     */
-    attributeChangedCallback(name, old, value) {
-        super.attributeChangedCallback(name, old, value);
-        const validationRelatedAttributes = ['maxlength', 'minlength', 'required'];
-        if (validationRelatedAttributes.includes(name)) {
-            this.updateComplete
-                .then(() => {
-                this.setTextareaValidity();
-            })
-                .catch(error => {
-                if (this.onerror) {
-                    this.onerror(error);
-                }
-            });
+        // When helpText gets changed, we need to re-announce the max length warning
+        if (changedProperties.has('helpText')) {
+            this.announceMaxLengthWarning();
         }
     }
     /**
@@ -442,20 +423,23 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
           identity="${this.inputId}"
           announcement="${ifDefined(this.ariaLiveAnnouncer)}"
           data-aria-live="polite"
+          delay="500"
         ></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}
+        ${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()}
     `;