@momentum-design/components 0.39.3 → 0.39.5

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

@@ -39,7 +39,7 @@ declare class AlertChip extends Buttonsimple {
      * including empty spaces to split words.
      */
     label: string;
-    constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/alertchip/alertchip.component.js

@@ -35,7 +35,7 @@ import Buttonsimple from '../buttonsimple/buttonsimple.component';
  */
 class AlertChip extends Buttonsimple {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The variant of the alertchip. It supports 5 variants
          * - neutral
@@ -54,6 +54,9 @@ class AlertChip extends Buttonsimple {
          * including empty spaces to split words.
          */
         this.label = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.disabled = undefined;
         this.softDisabled = undefined;
         this.active = undefined;

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

@@ -22,7 +22,7 @@ declare class AvatarButton extends AvatarButton_base {
    * Aria-label attribute to be set for accessibility
    */
     ariaLabel: string | null;
-    constructor();
+    connectedCallback(): void;
     update(changedProperties: PropertyValues): void;
     private setSize;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -33,11 +33,14 @@ import styles from './avatarbutton.styles';
  */
 class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
        * Aria-label attribute to be set for accessibility
        */
         this.ariaLabel = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.active = undefined;
         this.disabled = undefined;
         this.softDisabled = undefined;

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

@@ -52,7 +52,7 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      * @default false
      */
     autofocus: boolean;
-    constructor();
+    connectedCallback(): void;
     /**
      * Updates the form value to reflect the current state of the checkbox.
      * If checked, the value is set to either the user-provided value or 'on' if no value is provided.

package/dist/components/checkbox/checkbox.component.js

@@ -47,7 +47,7 @@ import styles from './checkbox.styles';
  */
 class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * Determines whether the checkbox is selected or unselected.
          *
@@ -76,6 +76,9 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
       ${this.renderHelperText()}
     </div>`;
         };
+    }
+    connectedCallback() {
+        super.connectedCallback();
         // Checkbox does not contain helpTextType property.
         this.helpTextType = undefined;
     }

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

@@ -45,7 +45,7 @@ declare class Chip extends Chip_base {
      * including empty spaces to split words.
      */
     label: string;
-    constructor();
+    connectedCallback(): void;
     /**
      * Renders the icon element if available.
      * @returns The icon element if available, otherwise nothing.

package/dist/components/chip/chip.component.js

@@ -36,7 +36,7 @@ import Buttonsimple from '../buttonsimple/buttonsimple.component';
  */
 class Chip extends IconNameMixin(Buttonsimple) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The color of the chip. It supports the following colors
          * - default
@@ -59,6 +59,9 @@ class Chip extends IconNameMixin(Buttonsimple) {
          * including empty spaces to split words.
          */
         this.label = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.role = DEFAULTS.ROLE;
         this.size = DEFAULTS.SIZE;
         this.active = undefined;

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

@@ -8,6 +8,12 @@ import type { PopoverTrigger } from '../popover/popover.types';
  *
  * @tagname mdc-coachmark
  *
+ * @event shown - (React: onShown) This event is dispatched when the coachmark is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden
+ * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is
+ * destroyed (removed from the DOM)
+ *
  * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
  * @cssproperty --mdc-popover-arrow-border - border of the arrow
  * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
@@ -47,6 +53,6 @@ declare class Coachmark extends Popover {
      * @default true
      */
     disableAriaExpanded: boolean;
-    constructor();
+    connectedCallback(): void;
 }
 export default Coachmark;

package/dist/components/coachmark/coachmark.component.js

@@ -18,6 +18,12 @@ import { DEFAULTS } from './coachmark.constants';
  *
  * @tagname mdc-coachmark
  *
+ * @event shown - (React: onShown) This event is dispatched when the coachmark is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden
+ * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is
+ * destroyed (removed from the DOM)
+ *
  * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
  * @cssproperty --mdc-popover-arrow-border - border of the arrow
  * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
@@ -32,7 +38,7 @@ import { DEFAULTS } from './coachmark.constants';
  */
 class Coachmark extends Popover {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * Determines the events that cause the Coachmark to show.
          * Multiple event names should be separated by spaces.
@@ -59,6 +65,9 @@ class Coachmark extends Popover {
          * @default true
          */
         this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.color = DEFAULTS.COLOR;
         this.showArrow = DEFAULTS.ARROW;
     }

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

@@ -130,7 +130,7 @@ declare class Divider extends Component {
      * @param slot - default slot of divider
      */
     private inferDividerType;
-    constructor();
+    connectedCallback(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/divider/divider.component.js

@@ -60,6 +60,43 @@ import styles from './divider.styles';
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 class Divider extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Two orientations of divider
+         * - **horizontal**: A thin, horizontal line with 0.0625rem width.
+         * - **vertical**: A thin, vertical line with 0.0625rem width.
+         *
+         * Note: We do not support "Vertical Text Divider" as of now.
+         * @default horizontal
+         */
+        this.orientation = DEFAULTS.ORIENTATION;
+        /**
+         * Two variants of divider
+         * - **solid**: Solid line.
+         * - **gradient**: Gradient Line that fades on either sides of the divider.
+         * @default solid
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * Direction of the arrow icon, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         */
+        this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
+        /**
+         * Position of the button, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         */
+        this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
+    }
     /**
      * Sets the variant attribute for the divider component.
      * If the provided variant is not included in the DIVIDER_VARIANT,
@@ -163,42 +200,8 @@ class Divider extends Component {
             this.setGrabberButton();
         }
     }
-    constructor() {
-        super();
-        /**
-         * Two orientations of divider
-         * - **horizontal**: A thin, horizontal line with 0.0625rem width.
-         * - **vertical**: A thin, vertical line with 0.0625rem width.
-         *
-         * Note: We do not support "Vertical Text Divider" as of now.
-         * @default horizontal
-         */
-        this.orientation = DEFAULTS.ORIENTATION;
-        /**
-         * Two variants of divider
-         * - **solid**: Solid line.
-         * - **gradient**: Gradient Line that fades on either sides of the divider.
-         * @default solid
-         */
-        this.variant = DEFAULTS.VARIANT;
-        /**
-         * Direction of the arrow icon, if applicable.
-         * - **positive**
-         * - **negative**
-         *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
-         */
-        this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
-        /**
-         * Position of the button, if applicable.
-         * - **positive**
-         * - **negative**
-         *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
-         */
-        this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
+    connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('data-type', 'mdc-primary-divider');
     }
     render() {

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

@@ -16,7 +16,7 @@ declare class FilterChip extends Chip {
      * @default false
      */
     selected: boolean;
-    constructor();
+    connectedCallback(): void;
     /**
      * Sets the selected state of the filterchip along with the icon.
      * aria-pressed attribute is also set to true or false.

package/dist/components/filterchip/filterchip.component.js

@@ -22,13 +22,16 @@ import { DEFAULTS } from './filterchip.constants';
  */
 class FilterChip extends Chip {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The selected state of the filterchip.
          *
          * @default false
          */
         this.selected = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.color = DEFAULTS.COLOR;
     }
     /**

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

@@ -27,7 +27,7 @@ declare class FormfieldGroup extends FormfieldGroup_base {
      * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
      */
     protected isRadio: boolean;
-    constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -27,12 +27,15 @@ import styles from './formfieldgroup.styles';
  */
 class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * @internal
          * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
          */
         this.isRadio = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         /** @internal */
         this.shouldRenderLabel = false;
         this.id = '';

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

@@ -76,7 +76,7 @@ declare class ListItem extends ListItem_base {
      * This appears on the trailing side of the list item.
      */
     sublineText?: string;
-    constructor();
+    connectedCallback(): void;
     /**
      * Generates a template for a text slot with the specified content.
      *

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

@@ -55,12 +55,15 @@ import styles from './listitem.styles';
  */
 class ListItem extends DataAriaLabelMixin(DisabledMixin(TabIndexMixin(Component))) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The variant of the list item. It can be a pill, rectangle or a full-width.
          * @default 'full-width'
          */
         this.variant = DEFAULTS.VARIANT;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.role = this.role || 'listitem';
     }
     /**

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

@@ -28,7 +28,7 @@ declare class Option extends Option_base {
      * Any additional description can be provided here for screen readers.
      */
     ariaLabel: string | null;
-    constructor();
+    connectedCallback(): void;
     /**
      * Listens to changes in the default slot and updates the label of the option accordingly.
      * This is used to set the label of the option when it is not explicitly set.

package/dist/components/option/option.component.js

@@ -31,7 +31,7 @@ import styles from './option.styles';
  */
 class Option extends FormInternalsMixin(ListItem) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The selected attribute is used to indicate that the option is selected.
          */
@@ -40,6 +40,9 @@ class Option extends FormInternalsMixin(ListItem) {
          * Any additional description can be provided here for screen readers.
          */
         this.ariaLabel = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.role = 'option';
         this.variant = LISTITEM_VARIANTS.INSET_RECTANGLE;
         this.updateAttribute('aria-selected', `${this.selected}`);

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

@@ -12,6 +12,12 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  *
  * @tagname mdc-popover
  *
+ *
+ * @event shown - (React: onShown) This event is dispatched when the popover is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
+ * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)
+ *
  * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
  * @cssproperty --mdc-popover-arrow-border - border of the arrow
  * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover

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

@@ -28,6 +28,12 @@ import { PopoverUtils } from './popover.utils';
  *
  * @tagname mdc-popover
  *
+ *
+ * @event shown - (React: onShown) This event is dispatched when the popover is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
+ * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)
+ *
  * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
  * @cssproperty --mdc-popover-arrow-border - border of the arrow
  * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover

package/dist/components/popover/popover.events.js

@@ -18,7 +18,7 @@ export class PopoverEventManager {
      * @param instance - The popover instance.
      */
     static onShowPopover(instance) {
-        this.dispatchPopoverEvent('popover-on-show', instance);
+        this.dispatchPopoverEvent('shown', instance);
     }
     /**
      * Custom event that is fired when the popover is hidden.
@@ -26,7 +26,7 @@ export class PopoverEventManager {
      * @param instance - The popover instance.
      */
     static onHidePopover(instance) {
-        this.dispatchPopoverEvent('popover-on-hide', instance);
+        this.dispatchPopoverEvent('hidden', instance);
     }
     /**
      * Custom event that is fired when the popover is created.
@@ -34,7 +34,7 @@ export class PopoverEventManager {
      * @param instance - The popover instance.
      */
     static onCreatedPopover(instance) {
-        this.dispatchPopoverEvent('popover-on-created', instance);
+        this.dispatchPopoverEvent('created', instance);
     }
     /**
      * Custom event that is fired when the popover is destroyed.
@@ -42,6 +42,6 @@ export class PopoverEventManager {
      * @param instance - The popover instance.
      */
     static onDestroyedPopover(instance) {
-        this.dispatchPopoverEvent('popover-on-destroyed', instance);
+        this.dispatchPopoverEvent('destroyed', instance);
     }
 }

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

@@ -51,7 +51,7 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
    * @default false
    */
     autofocus: boolean;
-    constructor();
+    connectedCallback(): void;
     firstUpdated(): void;
     /**
    * Returns all radios within the same group (name).

package/dist/components/radio/radio.component.js

@@ -48,7 +48,7 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
  */
 class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
         * Determines whether the radio is selected or unselected.
         *
@@ -75,6 +75,9 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       ${this.renderHelperText()}
     </div>`;
         };
+    }
+    connectedCallback() {
+        super.connectedCallback();
         // Radio does not contain helpTextType property.
         this.helpTextType = undefined;
     }

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

@@ -112,7 +112,7 @@ declare class Tab extends Tab_base {
      * @internal
      */
     private prevIconName?;
-    constructor();
+    connectedCallback(): void;
     /**
      * Modifies the icon name based on the active state.
      * If the tab is active, the icon name is suffixed with '-filled'.

package/dist/components/tab/tab.component.js

@@ -106,7 +106,7 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
  */
 class Tab extends IconNameMixin(Buttonsimple) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * Tab can have three variants:
          * - `glass`
@@ -117,6 +117,9 @@ class Tab extends IconNameMixin(Buttonsimple) {
          * @default pill
          */
         this.variant = DEFAULTS.VARIANT;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.role = 'tab';
         this.softDisabled = undefined;
         this.size = undefined;

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

@@ -115,7 +115,6 @@ declare class Textarea extends Textarea_base {
     inputElement: HTMLTextAreaElement;
     private characterLimitExceedingFired;
     protected get textarea(): HTMLTextAreaElement;
-    constructor();
     connectedCallback(): void;
     private setTextareaValidity;
     /** @internal */

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

@@ -67,12 +67,8 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
  */
 class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
-    get textarea() {
-        return this.inputElement;
-    }
     constructor() {
-        var _a;
-        super();
+        super(...arguments);
         /**
          * readonly attribute of the textarea field. If true, the textarea field is read-only.
          * @default false
@@ -109,11 +105,15 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
          */
         this.autofocus = false;
         this.characterLimitExceedingFired = false;
-        // Set the default value to the textarea field if the value is set through the text content directly
-        this.value = ((_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || this.value;
+    }
+    get textarea() {
+        return this.inputElement;
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
+        // Set the default value to the textarea field if the value is set through the text content directly
+        this.value = ((_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || this.value;
         this.updateComplete.then(() => {
             if (this.textarea) {
                 this.textarea.checkValidity();

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

@@ -58,7 +58,7 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
    * @default false
    */
     autofocus: boolean;
-    constructor();
+    connectedCallback(): void;
     /** @internal
    * Resets the checkbox to its initial state.
    * The checked property is set to false.

package/dist/components/toggle/toggle.component.js

@@ -54,7 +54,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  */
 class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
         * Determines whether the toggle is active or inactive.
         * @default false
@@ -73,6 +73,9 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
        * @default false
        */
         this.autofocus = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         // Toggle does not contain helpTextType property.
         this.helpTextType = undefined;
     }

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

@@ -10,6 +10,11 @@ import type { TooltipType } from './tooltip.types';
  *
  * @tagname mdc-tooltip
  *
+ * @event shown - (React: onShown) This event is dispatched when the tooltip is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden
+ * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)
+ *
  * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.
  * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.
  * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.
@@ -26,7 +31,7 @@ declare class Tooltip extends Popover {
      */
     tooltipType: TooltipType;
     private defaultSlotNodes;
-    constructor();
+    connectedCallback(): void;
     /**
      * @returns The tooltip text.
      */

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

@@ -21,6 +21,11 @@ import { POPOVER_PLACEMENT } from '../popover/popover.constants';
  *
  * @tagname mdc-tooltip
  *
+ * @event shown - (React: onShown) This event is dispatched when the tooltip is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden
+ * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)
+ *
  * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.
  * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.
  * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.
@@ -29,7 +34,7 @@ import { POPOVER_PLACEMENT } from '../popover/popover.constants';
  */
 class Tooltip extends Popover {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The type of tooltip.
          * - **description** sets aria-describedby on the trigger component which refers to the tooltip id.
@@ -38,8 +43,10 @@ class Tooltip extends Popover {
          * @default 'description'
          */
         this.tooltipType = DEFAULTS.TOOLTIP_TYPE;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.backdrop = false;
-        this.color = DEFAULTS.COLOR;
         this.delay = DEFAULTS.DELAY;
         this.focusTrap = false;
         this.hideOnBlur = true;
@@ -50,7 +57,6 @@ class Tooltip extends Popover {
         this.role = 'tooltip';
         this.showArrow = true;
         this.trigger = 'mouseenter focusin';
-        this.visible = false;
         this.enabledFocusTrap = false;
         this.enabledPreventScroll = false;
         this.flip = true;

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

@@ -6,7 +6,6 @@ declare const TOOLTIP_TYPES: {
 };
 declare const DEFAULTS: {
     BACKDROP: boolean;
-    COLOR: "tonal";
     DELAY: string;
     OFFSET: number;
     PLACEMENT: "top";