@momentum-design/components 0.129.45 → 0.129.46

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

@@ -3,7 +3,7 @@ import { CSSResult } from 'lit';
 import type { RoleType } from '../../utils/roles';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { IconButtonSize, PillButtonSize } from './button.types';
-declare const Button_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ButtonComponentMixin").ButtonComponentMixinInterface> & typeof Buttonsimple;
+declare const Button_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/OverflowMixin").OverflowMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ButtonComponentMixin").ButtonComponentMixinInterface> & typeof Buttonsimple;
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -68,6 +68,10 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-button-line-height - Line height of the button text
  */
 declare class Button extends Button_base {
+    /**
+     * @internal
+     */
+    protected buttonTextPart: HTMLSlotElement;
     /**
      * Specifies the size of the button in pixels. Available sizes depend on the button type:
      *
@@ -119,6 +123,10 @@ declare class Button extends Button_base {
      * @internal
      */
     private postfixFilledIconName?;
+    /**
+     * @internal
+     */
+    protected get overflowElement(): HTMLElement;
     update(changedProperties: PropertyValues): void;
     /**
      * Modifies the icon name based on the active state.

package/dist/components/button/button.component.js

@@ -8,10 +8,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { ButtonComponentMixin } from '../../utils/mixins/ButtonComponentMixin';
 import { ROLE } from '../../utils/roles';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import { OverflowMixin } from '../../utils/mixins/OverflowMixin';
 import { DEFAULTS } from './button.constants';
 import styles from './button.styles';
 import { getIconNameWithoutStyle } from './button.utils';
@@ -78,7 +79,7 @@ import { getIconNameWithoutStyle } from './button.utils';
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
  */
-class Button extends ButtonComponentMixin(Buttonsimple) {
+class Button extends OverflowMixin(ButtonComponentMixin(Buttonsimple)) {
     constructor() {
         super(...arguments);
         /**
@@ -125,6 +126,12 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
          */
         this.role = ROLE.BUTTON;
     }
+    /**
+     * @internal
+     */
+    get overflowElement() {
+        return this.buttonTextPart;
+    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('active')) {
@@ -195,6 +202,10 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
     }
 }
 Button.styles = [...Buttonsimple.styles, ...styles];
+__decorate([
+    query('slot[part="button-text"]'),
+    __metadata("design:type", HTMLSlotElement)
+], Button.prototype, "buttonTextPart", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Number)

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

@@ -478,7 +478,7 @@ declare class Popover extends Popover_base {
     /**
      * Shows the popover.
      */
-    show: () => void;
+    show(): void;
     /**
      * Hides the popover.
      */

package/dist/components/popover/popover.component.js

@@ -614,28 +614,6 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             this.timers.clearTimeout(TIMEOUTS.HOVER);
             this.timers.clearTimeout(TIMEOUTS.CLOSE);
         };
-        /**
-         * Shows the popover.
-         */
-        this.show = () => {
-            if (this.shouldSuppressOpening) {
-                return;
-            }
-            this.cancelCloseDelay();
-            if (this.visible) {
-                return;
-            }
-            const callback = () => {
-                this.visible = true;
-            };
-            if (this.openDelay > 0) {
-                this.timers.setTimeout(TIMEOUTS.OPEN, callback, this.openDelay);
-            }
-            else {
-                this.timers.clearTimeout(TIMEOUTS.OPEN);
-                callback();
-            }
-        };
         /**
          * Hides the popover.
          */
@@ -746,6 +724,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
                 animationFrame: this.animationFrame,
             });
         };
+        this.show = this.show.bind(this);
         this.utils = new PopoverUtils(this);
         this.parseTrigger();
         [this.openDelay, this.closeDelay] = this.utils.setupDelay();
@@ -931,6 +910,28 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             PopoverEventManager.onHidePopover(this);
         }
     }
+    /**
+     * Shows the popover.
+     */
+    show() {
+        if (this.shouldSuppressOpening) {
+            return;
+        }
+        this.cancelCloseDelay();
+        if (this.visible) {
+            return;
+        }
+        const callback = () => {
+            this.visible = true;
+        };
+        if (this.openDelay > 0) {
+            this.timers.setTimeout(TIMEOUTS.OPEN, callback, this.openDelay);
+        }
+        else {
+            this.timers.clearTimeout(TIMEOUTS.OPEN);
+            callback();
+        }
+    }
     isEventFromTrigger(event) {
         var _a;
         if (!this.triggerID)

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

@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { TextType, TagName } from './text.types';
+declare const Text_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/OverflowMixin").OverflowMixinInterface> & typeof Component;
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -19,7 +20,11 @@ import type { TextType, TagName } from './text.types';
  *
  * @csspart text - The text element
  */
-declare class Text extends Component {
+declare class Text extends Text_base {
+    /**
+     * @internal
+     */
+    private textPartElement;
     /**
      * Specifies the text style to be applied.
      *
@@ -77,7 +82,11 @@ declare class Text extends Component {
      * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
      * Note that the styling is determined by the `type` attribute.
      */
-    tagname?: TagName;
+    tagname: TagName;
+    /**
+     * @internal
+     */
+    protected get overflowElement(): HTMLElement;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/text/text.component.js

@@ -8,8 +8,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { Component } from '../../models';
+import { OverflowMixin } from '../../utils/mixins/OverflowMixin';
 import styles from './text.styles';
 import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
 /**
@@ -30,7 +31,7 @@ import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
  *
  * @csspart text - The text element
  */
-class Text extends Component {
+class Text extends OverflowMixin(Component) {
     constructor() {
         super(...arguments);
         /**
@@ -92,6 +93,16 @@ class Text extends Component {
          */
         this.tagname = DEFAULTS.TEXT_ELEMENT_TAGNAME;
     }
+    /**
+     * @internal
+     */
+    get overflowElement() {
+        // span and small are inline elements therefore we need to return the host element itself
+        if ([VALID_TEXT_TAGS.SPAN, VALID_TEXT_TAGS.SMALL].includes(this.tagname)) {
+            return this;
+        }
+        return this.textPartElement;
+    }
     render() {
         // Lit does not support dynamically changing values for the tag name of a custom element.
         // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
@@ -121,6 +132,10 @@ class Text extends Component {
     }
 }
 Text.styles = [...Component.styles, ...styles];
+__decorate([
+    query(`[part='${DEFAULTS.CSS_PART_TEXT}']`),
+    __metadata("design:type", HTMLElement)
+], Text.prototype, "textPartElement", void 0);
 __decorate([
     property({ attribute: 'type', reflect: true, type: String }),
     __metadata("design:type", String)

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

@@ -38,6 +38,16 @@ declare class Tooltip extends Popover {
      * @default 'description'
      */
     tooltipType: TooltipType;
+    /**
+     * If true, the tooltip will only be shown when the trigger element's content is overflowing on the x-axis.
+     *
+     * Supports the following components:
+     * - mdc-button
+     * - mdc-text
+     *
+     * @default false
+     */
+    onlyShowWhenTriggerOverflows: boolean;
     connectedCallback(): void;
     /**
      * Sets the type attribute for the tooltip component.
@@ -61,7 +71,8 @@ declare class Tooltip extends Popover {
      * @param changedProperties - The changed properties.
      */
     private onTooltipTypeUpdated;
-    update(changedProperties: PropertyValues): Promise<void>;
+    update(changedProperties: PropertyValues<this>): Promise<void>;
+    show(): void;
     static styles: Array<CSSResult>;
 }
 export default Tooltip;

package/dist/components/tooltip/tooltip.component.js

@@ -12,6 +12,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { ROLE } from '../../utils/roles';
 import Popover from '../popover/popover.component';
 import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { hasOverflowMixin } from '../../utils/dom';
 import { DEFAULTS, TOOLTIP_TYPES } from './tooltip.constants';
 import styles from './tooltip.styles';
 /**
@@ -52,6 +53,16 @@ class Tooltip extends Popover {
          * @default 'description'
          */
         this.tooltipType = DEFAULTS.TOOLTIP_TYPE;
+        /**
+         * If true, the tooltip will only be shown when the trigger element's content is overflowing on the x-axis.
+         *
+         * Supports the following components:
+         * - mdc-button
+         * - mdc-text
+         *
+         * @default false
+         */
+        this.onlyShowWhenTriggerOverflows = DEFAULTS.ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -165,10 +176,22 @@ class Tooltip extends Popover {
             this.onTooltipTypeUpdated(changedProperties);
         }
     }
+    show() {
+        if (this.onlyShowWhenTriggerOverflows && this.triggerElement && hasOverflowMixin(this.triggerElement)) {
+            if (!this.triggerElement.isWidthOverflowing()) {
+                return;
+            }
+        }
+        super.show();
+    }
 }
 Tooltip.styles = [...Popover.styles, ...styles];
 __decorate([
     property({ type: String, attribute: 'tooltip-type', reflect: true }),
     __metadata("design:type", String)
 ], Tooltip.prototype, "tooltipType", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'only-show-when-trigger-overflows', reflect: true }),
+    __metadata("design:type", Boolean)
+], Tooltip.prototype, "onlyShowWhenTriggerOverflows", void 0);
 export default Tooltip;

package/dist/components/tooltip/tooltip.constants.d.ts

@@ -16,5 +16,6 @@ declare const DEFAULTS: {
     readonly PLACEMENT: "top";
     readonly SHOW_ARROW: true;
     readonly TOOLTIP_TYPE: "description";
+    readonly ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS: false;
 };
 export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };

package/dist/components/tooltip/tooltip.constants.js

@@ -18,5 +18,6 @@ const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.TOP,
     SHOW_ARROW: true,
     TOOLTIP_TYPE: TOOLTIP_TYPES.DESCRIPTION,
+    ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS: false,
 };
 export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };

package/dist/custom-elements.json

@@ -5054,6 +5054,21 @@
               "attribute": "inverted",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "isWidthOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Determines if the content of the overflow element is overflowing its width.",
+              "inheritedFrom": {
+                "name": "OverflowMixin",
+                "module": "utils/mixins/OverflowMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -5549,6 +5564,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "OverflowMixin",
+              "module": "/src/utils/mixins/OverflowMixin"
+            },
             {
               "name": "ButtonComponentMixin",
               "module": "/src/utils/mixins/ButtonComponentMixin"
@@ -5559,7 +5578,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-button",
-          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n * \n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n * \n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n * \n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n * \n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n * \n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * ### Button Sizes\n * \n * Size options for different button configurations in REM:\n * \n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n */",
+          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n *\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n *\n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n *\n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n *\n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n *\n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * ### Button Sizes\n *\n * Size options for different button configurations in REM:\n *\n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n */",
           "customElement": true,
           "events": [
             {
@@ -12304,7 +12323,7 @@
               }
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "show",
               "privacy": "public",
               "description": "Shows the popover.",
@@ -26853,7 +26872,7 @@
               }
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "show",
               "privacy": "public",
               "description": "Shows the popover.",
@@ -32452,7 +32471,7 @@
               "reflects": true
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "show",
               "privacy": "public",
               "description": "Shows the popover."
@@ -44597,11 +44616,26 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "isWidthOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Determines if the content of the overflow element is overflowing its width.",
+              "inheritedFrom": {
+                "name": "OverflowMixin",
+                "module": "utils/mixins/OverflowMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "tagname",
               "type": {
-                "text": "TagName | undefined"
+                "text": "TagName"
               },
               "privacy": "public",
               "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
@@ -44634,12 +44668,18 @@
             {
               "name": "tagname",
               "type": {
-                "text": "TagName | undefined"
+                "text": "TagName"
               },
               "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
               "fieldName": "tagname"
             }
           ],
+          "mixins": [
+            {
+              "name": "OverflowMixin",
+              "module": "/src/utils/mixins/OverflowMixin"
+            }
+          ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
@@ -48101,7 +48141,7 @@
               "reflects": true
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "show",
               "privacy": "public",
               "description": "Shows the popover.",
@@ -49429,6 +49469,17 @@
               },
               "description": "Updates the tooltip id if it is empty."
             },
+            {
+              "kind": "field",
+              "name": "onlyShowWhenTriggerOverflows",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the tooltip will only be shown when the trigger element's content is overflowing on the x-axis.\n\nSupports the following components:\n- mdc-button\n- mdc-text",
+              "default": "false",
+              "attribute": "only-show-when-trigger-overflows",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "onPlacementUpdated",
@@ -49453,7 +49504,7 @@
                 {
                   "name": "changedProperties",
                   "type": {
-                    "text": "PropertyValues"
+                    "text": "PropertyValues<this>"
                   },
                   "description": "The changed properties."
                 }
@@ -49541,7 +49592,7 @@
               "description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "show",
               "privacy": "public",
               "description": "Shows the popover.",
@@ -49747,6 +49798,15 @@
               "default": "'description'",
               "fieldName": "tooltipType"
             },
+            {
+              "name": "only-show-when-trigger-overflows",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the tooltip will only be shown when the trigger element's content is overflowing on the x-axis.\n\nSupports the following components:\n- mdc-button\n- mdc-text",
+              "default": "false",
+              "fieldName": "onlyShowWhenTriggerOverflows"
+            },
             {
               "name": "id",
               "type": {
@@ -53118,6 +53178,82 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/OverflowMixin.js",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "OverflowMixin",
+          "members": [
+            {
+              "kind": "method",
+              "name": "isWidthOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Determines if the content of the overflow element is overflowing its width."
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OverflowMixinInterface",
+          "members": [
+            {
+              "kind": "method",
+              "name": "isWidthOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "overflowElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "protected",
+              "readonly": true
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "OverflowMixin",
+          "declaration": {
+            "name": "OverflowMixin",
+            "module": "utils/mixins/OverflowMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "OverflowMixinInterface",
+          "declaration": {
+            "name": "OverflowMixinInterface",
+            "module": "utils/mixins/OverflowMixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/PreventScrollMixin.js",

package/dist/utils/dom.d.ts

@@ -1,3 +1,4 @@
+import type { OverflowMixinInterface } from './mixins/OverflowMixin';
 /**
  * nodeB precedes nodeA in either a pre-order depth-first traversal of a tree containing both
  * (e.g., as a descendant or preceding sibling or a descendant of a preceding sibling or
@@ -107,3 +108,10 @@ export declare const findFocusable: (root: ShadowRoot | HTMLElement | null) => H
  * Get the active element from the DOM, including shadow DOMs
  */
 export declare const getDomActiveElement: (root?: Document) => Element | null;
+/**
+ * Type guard to check if an element inherits the OverflowMixin.
+ *
+ * @param element - The element to check
+ * @returns True if the element has the OverflowMixin methods
+ */
+export declare const hasOverflowMixin: <T extends HTMLElement>(element: T) => element is T & OverflowMixinInterface;

package/dist/utils/dom.js

@@ -189,3 +189,10 @@ export const getDomActiveElement = (root = document) => {
         activeElement = activeElement.shadowRoot.activeElement;
     return activeElement;
 };
+/**
+ * Type guard to check if an element inherits the OverflowMixin.
+ *
+ * @param element - The element to check
+ * @returns True if the element has the OverflowMixin methods
+ */
+export const hasOverflowMixin = (element) => 'isWidthOverflowing' in element && typeof element.isWidthOverflowing === 'function';

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

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

package/dist/utils/mixins/OverflowMixin.js

@@ -0,0 +1,23 @@
+export const OverflowMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        /**
+         * Gets the element whose overflow will be monitored.
+         *
+         * @internal
+         */
+        get overflowElement() {
+            return this;
+        }
+        /**
+         * Determines if the content of the overflow element is overflowing its width.
+         *
+         * @returns True if the scroll width of the overflow element is greater than its client width.
+         */
+        isWidthOverflowing() {
+            const el = this.overflowElement;
+            return el.scrollWidth > el.clientWidth;
+        }
+    }
+    // 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.129.45",
+  "version": "0.129.46",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"