@momentum-design/components 0.100.0 → 0.100.2

package/dist/components/accordionbutton/accordionbutton.styles.js

@@ -0,0 +1,121 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    --mdc-accordionbutton-border-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-accordionbutton-hover-color: var(--mds-color-theme-background-primary-hover);
+    --mdc-accordionbutton-active-color: var(--mds-color-theme-background-primary-active);
+    --mdc-accordionbutton-disabled-color: var(--mds-color-theme-text-primary-disabled);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  :host::part(header-section) {
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+  }
+
+  :host::part(header-button-section) {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  :host::part(body-section) {
+    width: 100%;
+  }
+
+  :host([variant='default'][expanded])::part(header-section) {
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+
+  :host::part(header-section):hover {
+    background-color: var(--mdc-accordionbutton-hover-color);
+  }
+
+  :host::part(header-section):active {
+    background-color: var(--mdc-accordionbutton-active-color);
+  }
+
+  :host([disabled])::part(header-section) {
+    color: var(--mdc-accordionbutton-disabled-color);
+  }
+
+  :host([disabled][expanded])::part(header-section) {
+    border-bottom: unset;
+  }
+
+  :host([disabled])::part(header-section):active,
+  :host([disabled])::part(header-section):hover {
+    background-color: unset;
+  }
+
+  :host([size='small'])::part(header-section),
+  :host([size='small'])::part(body-section) {
+    padding: 1rem;
+  }
+
+  :host([size='large'])::part(header-section),
+  :host([size='large'])::part(body-section) {
+    padding: 1.5rem;
+  }
+
+  :host::part(leading-header),
+  :host::part(trailing-header) {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  :host::part(trailing-header__icon) {
+    padding: 0.25rem;
+  }
+
+  :host([variant='default']) {
+    border: 1px solid var(--mdc-accordionbutton-border-color);
+    border-radius: 0.5rem;
+  }
+
+  :host([expanded])::part(header-section) {
+    border-bottom: 1px solid var(--mdc-accordionbutton-border-color);
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+
+  :host(:is([variant='default'], [variant='stacked']):not([expanded]))::part(header-section) {
+    border-radius: 0.5rem;
+  }
+
+  :host([variant='contained'])::part(header-section) {
+    border-radius: inherit;
+  }
+
+  :host([variant='default'])::part(header-section) {
+    border-radius: 0.5rem;
+  }
+
+  :host([variant='borderless']) {
+    border: none;
+    border-radius: 0;
+  }
+
+  :host([variant='borderless'])::part(header-section) {
+    border-radius: 0;
+  }
+
+  :host([variant='borderless']:not([expanded]))::part(header-section) {
+    border-bottom: 1px solid var(--mdc-accordionbutton-border-color);
+    border-radius: 0;
+  }
+
+  :host([variant='default']:not([expanded]))::part(header-section) {
+    border-bottom: none;
+  }
+`;
+export default [styles, ...hostFocusRingStyles(true)];

package/dist/components/accordionbutton/accordionbutton.types.d.ts

@@ -0,0 +1,8 @@
+import type { ValueOf } from '../../utils/types';
+import { ICON_NAME, VARIANT } from './accordionbutton.constants';
+type Variant = ValueOf<typeof VARIANT>;
+type IconName = ValueOf<typeof ICON_NAME>;
+interface Events {
+    onShownEvent: Event;
+}
+export type { Variant, IconName, Events };

package/dist/components/accordionbutton/accordionbutton.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/accordionbutton/index.d.ts

@@ -0,0 +1,10 @@
+import '../button';
+import '../icon';
+import '../text';
+import AccordionButton from './accordionbutton.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-accordionbutton']: AccordionButton;
+    }
+}
+export default AccordionButton;

package/dist/components/accordionbutton/index.js

@@ -0,0 +1,7 @@
+import '../button';
+import '../icon';
+import '../text';
+import AccordionButton from './accordionbutton.component';
+import { TAG_NAME } from './accordionbutton.constants';
+AccordionButton.register(TAG_NAME);
+export default AccordionButton;

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

@@ -0,0 +1,71 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import { Component } from '../../models';
+import type { Size, Variant } from './accordiongroup.types';
+/**
+ * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.
+ * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.
+ * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+ *
+ * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ *
+ * There are three types of variants:
+ * - Stacked - Each accordion will have a gap of 1.5rem (24px).
+ * - Borderless - Each accordion will not have any border and the group will also not have any border.
+ * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.
+ *
+ * There are two types of sizes:
+ * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.
+ * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.
+ *
+ * The variant and size will be applied to all accordions inside this accordion group.
+ * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * @tagname mdc-accordiongroup
+ *
+ * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.
+ *
+ * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup
+ */
+declare class AccordionGroup extends Component {
+    /**
+     * The size of the accordion item.
+     * @default 'small'
+     */
+    size: Size;
+    /**
+     * The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.
+     * @default 'stacked'
+     */
+    variant: Variant;
+    /**
+     * If true, multiple accordion items can be visible at the same time.
+     * @default false
+     */
+    allowMultiple: boolean;
+    /** @internal */
+    private accordionItems;
+    /** @internal */
+    private accordionButtonItems;
+    constructor();
+    /**
+     * Handles the 'shown' event for accordion items.
+     * If `allowMultiple` is false, ensures that only one accordion item
+     * remains expanded by collapsing all other expanded items when a new item is expanded.
+     *
+     * @param event - The event object from the 'shown' event.
+     */
+    private handleAccordionExpanded;
+    /**
+     * Sets the given attribute on all child accordion or accordionbutton components.
+     *
+     * @param attributeName - The name of the attribute to set.
+     * @param attributeValue - The value to set the attribute to.
+     */
+    private setChildrenAccordionAttributes;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default AccordionGroup;

package/dist/components/accordiongroup/accordiongroup.component.js

@@ -0,0 +1,132 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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, queryAssignedElements } from 'lit/decorators.js';
+import { TAG_NAME as ACCORDION_TAGNAME } from '../accordion/accordion.constants';
+import { TAG_NAME as ACCORDIONBUTTON_TAGNAME } from '../accordionbutton/accordionbutton.constants';
+import { Component } from '../../models';
+import { DEFAULTS } from './accordiongroup.constants';
+import styles from './accordiongroup.styles';
+/**
+ * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.
+ * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.
+ * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+ *
+ * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ *
+ * There are three types of variants:
+ * - Stacked - Each accordion will have a gap of 1.5rem (24px).
+ * - Borderless - Each accordion will not have any border and the group will also not have any border.
+ * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.
+ *
+ * There are two types of sizes:
+ * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.
+ * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.
+ *
+ * The variant and size will be applied to all accordions inside this accordion group.
+ * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * @tagname mdc-accordiongroup
+ *
+ * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.
+ *
+ * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup
+ */
+class AccordionGroup extends Component {
+    constructor() {
+        super();
+        /**
+         * The size of the accordion item.
+         * @default 'small'
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.
+         * @default 'stacked'
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * If true, multiple accordion items can be visible at the same time.
+         * @default false
+         */
+        this.allowMultiple = false;
+        this.addEventListener('shown', this.handleAccordionExpanded);
+    }
+    /**
+     * Handles the 'shown' event for accordion items.
+     * If `allowMultiple` is false, ensures that only one accordion item
+     * remains expanded by collapsing all other expanded items when a new item is expanded.
+     *
+     * @param event - The event object from the 'shown' event.
+     */
+    handleAccordionExpanded(event) {
+        if (this.allowMultiple)
+            return;
+        [...this.accordionItems, ...this.accordionButtonItems].forEach(accordionItem => {
+            if (accordionItem !== event.target && accordionItem.hasAttribute('expanded')) {
+                accordionItem.toggleAttribute('expanded');
+            }
+        });
+    }
+    /**
+     * Sets the given attribute on all child accordion or accordionbutton components.
+     *
+     * @param attributeName - The name of the attribute to set.
+     * @param attributeValue - The value to set the attribute to.
+     */
+    setChildrenAccordionAttributes(attributeName, attributeValue) {
+        [...this.accordionItems].forEach(accordion => {
+            accordion.setAttribute(attributeName, attributeValue);
+        });
+        [...this.accordionButtonItems].forEach(accordion => {
+            accordion.setAttribute(attributeName, attributeValue);
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('size')) {
+            if (!this.size)
+                this.size = DEFAULTS.SIZE;
+            this.setChildrenAccordionAttributes('size', this.size);
+        }
+        if (changedProperties.has('variant')) {
+            if (!this.variant)
+                this.variant = DEFAULTS.VARIANT;
+            this.setChildrenAccordionAttributes('variant', this.variant);
+        }
+    }
+    render() {
+        return html ` <slot></slot> `;
+    }
+}
+AccordionGroup.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], AccordionGroup.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], AccordionGroup.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'allow-multiple' }),
+    __metadata("design:type", Object)
+], AccordionGroup.prototype, "allowMultiple", void 0);
+__decorate([
+    queryAssignedElements({ selector: ACCORDION_TAGNAME }),
+    __metadata("design:type", Array)
+], AccordionGroup.prototype, "accordionItems", void 0);
+__decorate([
+    queryAssignedElements({ selector: ACCORDIONBUTTON_TAGNAME }),
+    __metadata("design:type", Array)
+], AccordionGroup.prototype, "accordionButtonItems", void 0);
+export default AccordionGroup;

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

@@ -0,0 +1,15 @@
+declare const TAG_NAME: "mdc-accordiongroup";
+declare const SIZE: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
+declare const VARIANT: {
+    readonly BORDERLESS: "borderless";
+    readonly CONTAINED: "contained";
+    readonly STACKED: "stacked";
+};
+declare const DEFAULTS: {
+    readonly SIZE: "small";
+    readonly VARIANT: "stacked";
+};
+export { DEFAULTS, SIZE, VARIANT, TAG_NAME };

package/dist/components/accordiongroup/accordiongroup.constants.js

@@ -0,0 +1,16 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('accordiongroup');
+const SIZE = {
+    SMALL: 'small',
+    LARGE: 'large',
+};
+const VARIANT = {
+    BORDERLESS: 'borderless',
+    CONTAINED: 'contained',
+    STACKED: 'stacked',
+};
+const DEFAULTS = {
+    SIZE: SIZE.SMALL,
+    VARIANT: VARIANT.STACKED,
+};
+export { DEFAULTS, SIZE, VARIANT, TAG_NAME };

package/dist/components/accordiongroup/accordiongroup.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/accordiongroup/accordiongroup.styles.js

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    --mdc-accordiongroup-border-color: var(--mds-color-theme-outline-secondary-normal);
+
+    display: flex;
+    flex-direction: column;
+  }
+  :host([variant='stacked']) {
+    row-gap: 1.5rem;
+  }
+  :host([variant='stacked']) ::slotted(mdc-accordion),
+  :host([variant='stacked']) ::slotted(mdc-accordionbutton) {
+    border: 1px solid var(--mdc-accordiongroup-border-color);
+    border-radius: 0.5rem;
+  }
+  :host([variant='stacked']) ::slotted(mdc-accordion:not[expanded]),
+  :host([variant='stacked']) ::slotted(mdc-accordionbutton:not[expanded]) {
+    border-bottom: none;
+  }
+  :host([variant='contained']) {
+    border: 1px solid var(--mdc-accordiongroup-border-color);
+    border-radius: 0.5rem;
+  }
+  :host([variant='contained']) ::slotted(mdc-accordion),
+  :host([variant='contained']) ::slotted(mdc-accordionbutton) {
+    border-bottom: 1px solid var(--mdc-accordiongroup-border-color);
+  }
+  :host([variant='contained']) ::slotted(mdc-accordion:first-child),
+  :host([variant='contained']) ::slotted(mdc-accordionbutton:first-child) {
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+  :host([variant='contained']) ::slotted(mdc-accordion:last-child),
+  :host([variant='contained']) ::slotted(mdc-accordionbutton:last-child) {
+    border-bottom: none;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+  :host([variant='contained']) ::slotted(mdc-accordion[expanded]:last-child),
+  :host([variant='contained']) ::slotted(mdc-accordionbutton[expanded]:last-child) {
+    border-radius: inherit;
+  }
+  :host([variant='borderless']) ::slotted(mdc-accordion[expanded]),
+  :host([variant='borderless']) ::slotted(mdc-accordionbutton[expanded]) {
+    border-bottom: 1px solid var(--mdc-accordiongroup-border-color);
+  }
+`;
+export default [styles, ...hostFocusRingStyles()];

package/dist/components/accordiongroup/accordiongroup.types.d.ts

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { SIZE, VARIANT } from './accordiongroup.constants';
+type Size = ValueOf<typeof SIZE>;
+type Variant = ValueOf<typeof VARIANT>;
+export type { Size, Variant };

package/dist/components/accordiongroup/accordiongroup.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/accordiongroup/index.d.ts

@@ -0,0 +1,7 @@
+import AccordionGroup from './accordiongroup.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-accordiongroup']: AccordionGroup;
+    }
+}
+export default AccordionGroup;

package/dist/components/accordiongroup/index.js

@@ -0,0 +1,4 @@
+import AccordionGroup from './accordiongroup.component';
+import { TAG_NAME } from './accordiongroup.constants';
+AccordionGroup.register(TAG_NAME);
+export default AccordionGroup;

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

@@ -64,6 +64,7 @@ declare class Animation extends Component {
      */
     private getAnimationData;
     updated(changedProperties: Map<string, any>): void;
+    disconnectedCallback(): void;
     /**
      * Re-dispatch the complete event from the animation library
      *

package/dist/components/animation/animation.component.js

@@ -147,6 +147,15 @@ class Animation extends Component {
             this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Clean up the lottie instance when the component is removed from the DOM
+        if (this.lottieInstance) {
+            this.lottieInstance.removeEventListener('complete', this.onCompleteHandler);
+            this.lottieInstance.destroy();
+            this.lottieInstance = undefined;
+        }
+    }
     render() {
         return html `<div aria-hidden="true" ${ref(this.containerRef)}></div>`;
     }

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -77,9 +77,9 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
          * @default 'check'
          */
         this.selectionType = DEFAULTS.SELECTION_TYPE;
-        this.addEventListener('click', this.toggleChecked);
-        this.addEventListener('keydown', this.toggleOnEnter);
-        this.addEventListener('keyup', this.toggleOnSpace);
+        this.addEventListener('click', this.toggleChecked.bind(this));
+        this.addEventListener('keydown', this.toggleOnEnter.bind(this));
+        this.addEventListener('keyup', this.toggleOnSpace.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();

package/dist/components/cardradio/cardradio.component.js

@@ -77,9 +77,9 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
          * @default ''
          */
         this.name = '';
-        this.addEventListener('click', this.toggleChecked);
-        this.addEventListener('keydown', this.toggleOnEnter);
-        this.addEventListener('keyup', this.toggleOnSpace);
+        this.addEventListener('click', this.toggleChecked.bind(this));
+        this.addEventListener('keydown', this.toggleOnEnter.bind(this));
+        this.addEventListener('keyup', this.toggleOnSpace.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -307,6 +307,11 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))
      */
     createBackdrop() {
         var _a;
+        // Remove existing backdrop if present
+        if (this.backdropElement && this.backdropElement.parentElement) {
+            this.backdropElement.parentElement.removeChild(this.backdropElement);
+            this.backdropElement = null;
+        }
         const backdrop = document.createElement('div');
         backdrop.classList.add('dialog-backdrop');
         const styleElement = document.createElement('style');

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -11,6 +11,7 @@ const styles = [
     :host([disabled]),
     :host([disabled]) .mdc-label,
     :host([disabled]) .mdc-help-text,
+    :host([disabled])::part(required-indicator),
     :host([disabled][help-text-type='error']) .mdc-help-text,
     :host([disabled][help-text-type='success']) .mdc-help-text,
     :host([disabled][help-text-type='warning']) .mdc-help-text,

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

@@ -74,7 +74,7 @@ declare class Icon extends Component {
      */
     ariaLabelledBy: string | null;
     private readonly iconProviderContext;
-    private abortController;
+    private abortController?;
     constructor();
     /**
      * Parse the icon string to an html element, set the attributes and
@@ -110,6 +110,7 @@ declare class Icon extends Component {
     private updateSize;
     private get computedIconSize();
     updated(changedProperties: Map<string, any>): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/icon/icon.component.js

@@ -113,7 +113,8 @@ class Icon extends Component {
                 // (directly passing the abortcontroller to the fetch request per reference
                 // will not work due to JS call-by-sharing behavior)
                 const renewSignal = () => {
-                    this.abortController.abort();
+                    var _a;
+                    (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
                     this.abortController = new AbortController();
                     return this.abortController.signal;
                 };
@@ -219,6 +220,13 @@ class Icon extends Component {
             this.updateSize();
         }
     }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        // abort the fetch request when the component is disconnected
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.abortController = undefined; // reset the abort controller
+    }
     render() {
         return html ` ${this.iconData} `;
     }

package/dist/components/linksimple/linksimple.component.js

@@ -66,24 +66,24 @@ class Linksimple extends DisabledMixin(TabIndexMixin(Component)) {
          * @internal
          */
         this.prevTabindex = 0;
-        this.handleNavigation = (e) => {
-            if ((e.type === 'click' || (e instanceof KeyboardEvent && e.key === 'Enter')) && this.href) {
-                if (this.disabled)
-                    return;
-                window.open(this.href, this.target, this.rel);
-            }
-        };
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'link');
-        this.addEventListener('click', this.handleNavigation);
-        this.addEventListener('keydown', this.handleNavigation);
+        this.addEventListener('click', this.handleNavigation.bind(this));
+        this.addEventListener('keydown', this.handleNavigation.bind(this));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener('click', this.handleNavigation);
-        this.removeEventListener('keydown', this.handleNavigation);
+        this.removeEventListener('click', this.handleNavigation.bind(this));
+        this.removeEventListener('keydown', this.handleNavigation.bind(this));
+    }
+    handleNavigation(e) {
+        if ((e.type === 'click' || (e instanceof KeyboardEvent && e.key === 'Enter')) && this.href) {
+            if (this.disabled)
+                return;
+            window.open(this.href, this.target, this.rel);
+        }
     }
     /**
      * Sets or removes `aria-disabled` and updates `tabIndex` to reflect

package/dist/components/listitem/listitem.component.js

@@ -83,12 +83,12 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
          * @default 'top'
          */
         this.tooltipPlacement = DEFAULTS.TOOLTIP_PLACEMENT;
-        this.addEventListener('keydown', this.handleKeyDown);
-        this.addEventListener('focusin', this.displayTooltipForLongText);
-        this.addEventListener('mouseenter', this.displayTooltipForLongText);
-        this.addEventListener('focusout', this.hideTooltipOnLeave);
-        this.addEventListener('mouseout', this.hideTooltipOnLeave);
-        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeyDown.bind(this));
+        this.addEventListener('focusin', this.displayTooltipForLongText.bind(this));
+        this.addEventListener('mouseenter', this.displayTooltipForLongText.bind(this));
+        this.addEventListener('focusout', this.hideTooltipOnLeave.bind(this));
+        this.addEventListener('mouseout', this.hideTooltipOnLeave.bind(this));
+        this.addEventListener('click', this.handleClick.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();

package/dist/components/listitem/listitem.events.js

@@ -32,7 +32,9 @@ export class ListItemEventManager {
     static onCreatedListItem(instance) {
         // Use setTimeout to ensure the event is dispatched after the component is fully initialized
         // Inherited Element might execute its own lifecycle methods
-        setTimeout(() => this.dispatchListItemEvent('created', instance), 0);
+        setTimeout(() => {
+            this.dispatchListItemEvent('created', instance);
+        }, 0);
     }
     /**
      * Custom event that is fired when the popover is destroyed.