@momentum-design/components 0.134.3 → 0.134.5

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

@@ -99,6 +99,11 @@ declare class ScreenreaderAnnouncer extends Component {
      * @default 500
      */
     debounceTime: number;
+    /**
+     * Whether this instance currently holds a ref for its identity.
+     * @internal
+     */
+    private hasIdentityRef;
     /**
      * Array to store timeOutIds for clearing timeouts later.
      * @internal
@@ -160,6 +165,15 @@ declare class ScreenreaderAnnouncer extends Component {
      * this.debounceTime milliseconds have passed since the last time this.announcement was updated.
      */
     private setupDebouncedAnnounce;
+    /**
+     * Increments the refcount for the current identity.
+     */
+    private acquireIdentityRef;
+    /**
+     * Decrements the refcount for the current identity.
+     * When the count reaches zero the live-region DOM node is removed.
+     */
+    private releaseIdentityRef;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;

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

@@ -13,6 +13,14 @@ import { Component } from '../../models';
 import { debounce } from '../../utils/debounce';
 import { DEFAULTS } from './screenreaderannouncer.constants';
 import styles from './screenreaderannouncer.styles';
+// AI-Assisted
+/**
+ * Module-scope refcount: tracks how many live ScreenreaderAnnouncer instances
+ * reference each identity. When the count drops to zero the DOM node created
+ * by createAnnouncementAriaLiveRegion() is removed.
+ */
+const identityRefCount = new Map();
+// End AI-Assisted
 /**
  * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.
  *
@@ -113,6 +121,11 @@ class ScreenreaderAnnouncer extends Component {
          * @default 500
          */
         this.debounceTime = DEFAULTS.DEBOUNCE;
+        /**
+         * Whether this instance currently holds a ref for its identity.
+         * @internal
+         */
+        this.hasIdentityRef = false;
         /**
          * Array to store timeOutIds for clearing timeouts later.
          * @internal
@@ -262,12 +275,47 @@ class ScreenreaderAnnouncer extends Component {
             }
         }, this.debounceTime);
     }
+    // AI-Assisted
+    /**
+     * Increments the refcount for the current identity.
+     */
+    acquireIdentityRef() {
+        var _a;
+        if (this.hasIdentityRef)
+            return;
+        identityRefCount.set(this.identity, ((_a = identityRefCount.get(this.identity)) !== null && _a !== void 0 ? _a : 0) + 1);
+        this.hasIdentityRef = true;
+    }
+    /**
+     * Decrements the refcount for the current identity.
+     * When the count reaches zero the live-region DOM node is removed.
+     */
+    releaseIdentityRef() {
+        var _a;
+        if (!this.hasIdentityRef)
+            return;
+        const next = ((_a = identityRefCount.get(this.identity)) !== null && _a !== void 0 ? _a : 1) - 1;
+        if (next <= 0) {
+            identityRefCount.delete(this.identity);
+            const node = this.getElementByIdAcrossShadowRoot(this.identity);
+            // Only remove nodes WE created (they carry our class).
+            if (node === null || node === void 0 ? void 0 : node.classList.contains('mdc-screenreaderannouncer__visually-hidden')) {
+                node.remove();
+            }
+        }
+        else {
+            identityRefCount.set(this.identity, next);
+        }
+        this.hasIdentityRef = false;
+    }
+    // End AI-Assisted
     connectedCallback() {
         super.connectedCallback();
         if (this.identity.length === 0) {
             this.identity = DEFAULTS.IDENTITY;
         }
         this.createAnnouncementAriaLiveRegion();
+        this.acquireIdentityRef();
         this.setupDebouncedAnnounce();
     }
     disconnectedCallback() {
@@ -276,6 +324,7 @@ class ScreenreaderAnnouncer extends Component {
         this.clearTimeOutsAndAnnouncements();
         // cancel any pending debounced action and clear DOM timeouts
         (_a = this.debouncedAnnounce) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.releaseIdentityRef();
     }
     updated(changedProperties) {
         var _a;

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

@@ -44,6 +44,11 @@ declare const Toast_base: import("../../utils/mixins/index.types").Constructor<i
  * @cssproperty --mdc-toast-padding - Padding inside the toast.
  */
 declare class Toast extends Toast_base {
+    /**
+     * Reference to the header text element
+     * @internal
+     */
+    private headerTextElement;
     /**
      * Type of toast
      * - Can be `custom`, `success`, `warning` or `error`.
@@ -79,6 +84,12 @@ declare class Toast extends Toast_base {
     showLessText?: string;
     private isDetailVisible;
     private hasDetailedSlot;
+    /**
+     * Indicates whether the header text is overflowing and requires the show more/less toggle button to be shown when detailed content is present.
+     * This is determined on first update and will not update dynamically if the header text changes after initial render.
+     * @internal
+     */
+    private hasOverflowingHeaderText;
     private detailedElements;
     private hasFooterButtons;
     /**
@@ -90,7 +101,7 @@ declare class Toast extends Toast_base {
     private toggleDetailVisibility;
     private updateDetailedSlotPresence;
     private updateFooterButtonsPresence;
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     protected renderIcon(iconName: string): import("lit-html").TemplateResult<1> | typeof nothing;
     private shouldRenderToggleButton;
     private renderToggleDetailButton;

package/dist/components/toast/toast.component.js

@@ -8,11 +8,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { FooterMixin } from '../../utils/mixins/FooterMixin';
 import { TYPE } from '../text/text.constants';
+import { hasOverflowMixin } from '../../utils/dom';
 import { DEFAULTS } from './toast.constants';
 import { getIconNameForVariant } from './toast.utils';
 import styles from './toast.styles';
@@ -77,6 +78,12 @@ class Toast extends FooterMixin(Component) {
         this.ariaLabel = null;
         this.isDetailVisible = false;
         this.hasDetailedSlot = false;
+        /**
+         * Indicates whether the header text is overflowing and requires the show more/less toggle button to be shown when detailed content is present.
+         * This is determined on first update and will not update dynamically if the header text changes after initial render.
+         * @internal
+         */
+        this.hasOverflowingHeaderText = false;
         this.hasFooterButtons = '';
     }
     /**
@@ -94,6 +101,12 @@ class Toast extends FooterMixin(Component) {
     }
     toggleDetailVisibility() {
         this.isDetailVisible = !this.isDetailVisible;
+        if (this.isDetailVisible) {
+            this.setAttribute('data-expanded', 'true');
+        }
+        else {
+            this.removeAttribute('data-expanded');
+        }
     }
     updateDetailedSlotPresence() {
         var _a, _b;
@@ -108,9 +121,13 @@ class Toast extends FooterMixin(Component) {
                 ? 'has-footer-buttons'
                 : '';
     }
-    firstUpdated(changedProperties) {
+    async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.updateDetailedSlotPresence();
+        await this.updateComplete;
+        if (hasOverflowMixin(this.headerTextElement)) {
+            this.hasOverflowingHeaderText = this.headerTextElement.isHeightOverflowing();
+        }
     }
     renderIcon(iconName) {
         if (!iconName)
@@ -120,7 +137,7 @@ class Toast extends FooterMixin(Component) {
     `;
     }
     shouldRenderToggleButton() {
-        return this.hasDetailedSlot && this.showMoreText && this.showLessText;
+        return (this.hasDetailedSlot || this.hasOverflowingHeaderText) && this.showMoreText && this.showLessText;
     }
     renderToggleDetailButton() {
         if (!this.shouldRenderToggleButton())
@@ -193,6 +210,10 @@ class Toast extends FooterMixin(Component) {
     }
 }
 Toast.styles = [...Component.styles, ...styles];
+__decorate([
+    query("[part='toast-header']"),
+    __metadata("design:type", HTMLElement)
+], Toast.prototype, "headerTextElement", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
@@ -229,6 +250,10 @@ __decorate([
     state(),
     __metadata("design:type", Boolean)
 ], Toast.prototype, "hasDetailedSlot", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], Toast.prototype, "hasOverflowingHeaderText", void 0);
 __decorate([
     queryAssignedElements({ slot: 'toast-body-detailed', flatten: true }),
     __metadata("design:type", Array)

package/dist/components/toast/toast.styles.js

@@ -65,6 +65,16 @@ const styles = css `
     line-height: var(--mds-font-lineheight-body-large);
   }
 
+  [part='toast-header']::part(text) {
+    display: unset;
+    -webkit-box-orient: inherit;
+    -webkit-line-clamp: inherit;
+  }
+
+  :host([data-expanded='true'])::part(toast-header) {
+    -webkit-line-clamp: unset;
+  }
+
   :host::part(footer) {
     display: flex;
     justify-content: flex-end;

package/dist/custom-elements.json

@@ -5160,6 +5160,20 @@
               "attribute": "inverted",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "OverflowMixin",
+                "module": "utils/mixins/OverflowMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -38526,6 +38540,12 @@
           "description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\nConsumers can also use the public `announce` function to trigger announcements programmatically\nby passing an options object where `announcement` is required and all other fields are optional.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nIf you provide a custom `identity`, you must ensure that the element exists and is visually hidden.\n\nExample CSS:\n\n```css\n#your-custom-announcer-id {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n```\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a `<p>` element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n2. If multiple `mdc-screenreaderannouncer` instances use the same `identity`, `data-aria-live`\nfor that identity is effectively determined by the first instance that creates announcements for it.\nChanging `data-aria-live` in later instances for the same identity will not update already-created\nlive-region containers.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
           "name": "ScreenreaderAnnouncer",
           "members": [
+            {
+              "kind": "method",
+              "name": "acquireIdentityRef",
+              "privacy": "private",
+              "description": "Increments the refcount for the current identity."
+            },
             {
               "kind": "method",
               "name": "announce",
@@ -38611,6 +38631,12 @@
               "attribute": "identity",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "releaseIdentityRef",
+              "privacy": "private",
+              "description": "Decrements the refcount for the current identity.\nWhen the count reaches zero the live-region DOM node is removed."
+            },
             {
               "kind": "method",
               "name": "setupDebouncedAnnounce",
@@ -47409,6 +47435,20 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "OverflowMixin",
+                "module": "utils/mixins/OverflowMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -57823,6 +57863,16 @@
           "description": "",
           "name": "OverflowMixin",
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -57849,6 +57899,16 @@
           "description": "",
           "name": "OverflowMixinInterface",
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",

package/dist/utils/mixins/OverflowMixin.d.ts

@@ -3,5 +3,6 @@ import type { Constructor } from './index.types';
 export declare abstract class OverflowMixinInterface {
     protected get overflowElement(): HTMLElement;
     isWidthOverflowing(): boolean;
+    isHeightOverflowing(): boolean;
 }
 export declare const OverflowMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<OverflowMixinInterface> & T;

package/dist/utils/mixins/OverflowMixin.js

@@ -17,6 +17,10 @@ export const OverflowMixin = (superClass) => {
             const el = this.overflowElement;
             return el.scrollWidth > el.clientWidth;
         }
+        isHeightOverflowing() {
+            const el = this.overflowElement;
+            return el.scrollHeight > el.clientHeight;
+        }
     }
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;

package/package.json

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