@momentum-design/components 0.127.5 → 0.127.7

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

@@ -78,7 +78,9 @@ declare class AnnouncementDialog extends Dialog {
      * The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
      * @default medium
      */
-    size: AnnouncementDialogSize;
+    get size(): AnnouncementDialogSize;
+    set size(value: AnnouncementDialogSize);
+    constructor();
     connectedCallback(): void;
     protected renderHeader(): import("lit-html").TemplateResult<1>;
     protected renderBody(): import("lit-html").TemplateResult<1>;

package/dist/components/announcementdialog/announcementdialog.component.js

@@ -80,13 +80,22 @@ import { DEFAULTS } from './announcementdialog.constants';
  * using the footer-link and footer-button slots is preferred
  */
 class AnnouncementDialog extends Dialog {
+    /**
+     * The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
+     * @default medium
+     */
+    get size() {
+        var _a, _b;
+        return ((_b = (_a = this.responsiveSettingsContext) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.forceFullscreenDialog)
+            ? 'fullscreen'
+            : this.internalSize;
+    }
+    set size(value) {
+        this.internalSize = value;
+    }
     constructor() {
-        super(...arguments);
-        /**
-         * The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
-         * @default medium
-         */
-        this.size = DEFAULTS.SIZE;
+        super();
+        this.internalSize = DEFAULTS.SIZE;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -126,6 +135,7 @@ __decorate([
 ], AnnouncementDialog.prototype, "illustration", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", String)
-], AnnouncementDialog.prototype, "size", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], AnnouncementDialog.prototype, "size", null);
 export default AnnouncementDialog;

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

@@ -75,6 +75,10 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * using the footer-link and footer-button slots is preferred
  */
 declare class Dialog extends Dialog_base {
+    /** @internal */
+    protected readonly responsiveSettingsContext: import("@lit/context").ContextConsumer<{
+        __context__: import("../responsivesettingsprovider/responsivesettingsprovider.types").ResponsiveSettings;
+    }, import("lit").ReactiveElement>;
     /**
      * The unique ID of the dialog
      */
@@ -99,11 +103,18 @@ declare class Dialog extends Dialog_base {
      * @default 1000
      */
     zIndex: number;
+    /**
+     * The internal value helps to restore original size when responsive settings disabled.
+     *
+     * @internal
+     */
+    protected internalSize: DialogSize;
     /**
      * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
      * @default small
      */
-    size: DialogSize;
+    get size(): DialogSize;
+    set size(value: DialogSize);
     /**
      * The variant of the dialog, can be 'default' or 'promotional'
      * @default default

package/dist/components/dialog/dialog.component.js

@@ -17,6 +17,8 @@ import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
 import { FooterMixin } from '../../utils/mixins/FooterMixin';
 import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
+import providerUtils from '../../utils/provider';
+import ResponsiveSettingsProvider from '../responsivesettingsprovider';
 import { DEFAULTS } from './dialog.constants';
 import { DialogEventManager } from './dialog.events';
 import styles from './dialog.styles';
@@ -95,6 +97,13 @@ import styles from './dialog.styles';
 class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))) {
     constructor() {
         super(...arguments);
+        /** @internal */
+        this.responsiveSettingsContext = providerUtils.consume({
+            host: this,
+            context: ResponsiveSettingsProvider.Context,
+            subscribe: true,
+            syncProperties: ['size'],
+        });
         /**
          * The unique ID of the dialog
          */
@@ -114,10 +123,11 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
          */
         this.zIndex = DEFAULTS.Z_INDEX;
         /**
-         * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
-         * @default small
+         * The internal value helps to restore original size when responsive settings disabled.
+         *
+         * @internal
          */
-        this.size = DEFAULTS.SIZE;
+        this.internalSize = DEFAULTS.SIZE;
         /**
          * The variant of the dialog, can be 'default' or 'promotional'
          * @default default
@@ -202,6 +212,17 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             this.closeDialog();
         };
     }
+    /**
+     * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
+     * @default small
+     */
+    get size() {
+        var _a, _b;
+        return ((_b = (_a = this.responsiveSettingsContext) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.forceFullscreenDialog) ? 'fullscreen' : this.internalSize;
+    }
+    set size(value) {
+        this.internalSize = value;
+    }
     connectedCallback() {
         super.connectedCallback();
         // event listener can be added to the element directly, since dialog is a modal component
@@ -450,8 +471,9 @@ __decorate([
 ], Dialog.prototype, "zIndex", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", String)
-], Dialog.prototype, "size", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], Dialog.prototype, "size", null);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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()}
     `;