@momentum-design/components 0.66.1 → 0.66.2

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

@@ -1,8 +1,8 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-import { ROLE } from './formfieldgroup.constants';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import styles from './formfieldgroup.styles';
 /**

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

@@ -1,6 +1,2 @@
 declare const TAG_NAME: "mdc-formfieldgroup";
-declare const ROLE: {
-    readonly RADIOGROUP: "radiogroup";
-    readonly GROUP: "group";
-};
-export { ROLE, TAG_NAME };
+export { TAG_NAME };

package/dist/components/formfieldgroup/formfieldgroup.constants.js

@@ -1,7 +1,3 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('formfieldgroup');
-const ROLE = {
-    RADIOGROUP: 'radiogroup',
-    GROUP: 'group',
-};
-export { ROLE, TAG_NAME };
+export { TAG_NAME };

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

@@ -1,5 +1,6 @@
 import type { CSSResult } from 'lit';
 import { Component } from '../../models';
+import type { RoleType } from '../../utils/roles';
 declare const List_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof Component;
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
@@ -20,6 +21,8 @@ declare class List extends List_base {
      * The header text of the list.
      */
     headerText?: string;
+    /** @internal */
+    protected dataRole: RoleType;
     constructor();
     /**
      * Handles the keydown event on the list element.

package/dist/components/list/list.component.js

@@ -10,12 +10,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
+import { KEYS } from '../../utils/keys';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { ROLE } from '../../utils/roles';
 import { TAG_NAME as LISTITEM_TAGNAME } from '../listitem/listitem.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { HEADER_ID } from './list.constants';
 import styles from './list.styles';
-import { KEYS } from '../../utils/keys';
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *
@@ -28,6 +29,8 @@ import { KEYS } from '../../utils/keys';
 class List extends DataAriaLabelMixin(Component) {
     constructor() {
         super();
+        /** @internal */
+        this.dataRole = ROLE.LIST;
         this.addEventListener('keydown', this.handleKeyDown);
     }
     /**
@@ -117,7 +120,7 @@ class List extends DataAriaLabelMixin(Component) {
     ` : nothing;
         return html `
       <div
-        role="list"
+        role="${this.dataRole}"
         aria-labelledby="${this.headerText ? HEADER_ID : ''}"
         aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
       >

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

@@ -1,4 +1,5 @@
 import '../text';
+import '../tooltip';
 import ListItem from './listitem.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/listitem/index.js

@@ -1,4 +1,5 @@
 import '../text';
+import '../tooltip';
 import ListItem from './listitem.component';
 import { TAG_NAME } from './listitem.constants';
 ListItem.register(TAG_NAME);

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

@@ -1,7 +1,8 @@
 import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { nothing } from 'lit';
 import { Component } from '../../models';
-import { TextType } from '../text/text.types';
+import type { PopoverPlacement } from '../popover/popover.types';
+import type { TextType } from '../text/text.types';
 import type { ListItemVariants } from './listitem.types';
 declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
 /**
@@ -15,6 +16,11 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
  * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
  *
+ * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.
+ * The placement of the tooltip can be adjusted using the tooltip-placement attribute.
+ * This will be helpful when the listitem text is truncated or
+ * when you want to display additional information about the listitem.
+ *
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
@@ -36,6 +42,7 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
  * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
+ * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
@@ -77,7 +84,29 @@ declare class ListItem extends ListItem_base {
      * This appears on the trailing side of the list item.
      */
     sublineText?: string;
+    /**
+     * The tooltip text is displayed on hover of the list item.
+     */
+    tooltipText?: string;
+    /**
+     * The tooltip placement of the list item. If the tooltip text is present,
+     * then this tooltip placement will be applied.
+     * @default 'top'
+     */
+    tooltipPlacement: PopoverPlacement;
+    constructor();
     connectedCallback(): void;
+    private handleClick;
+    /**
+     * Display a tooltip for the listitem.
+     * Create the tooltip programmatically after the nearest parent element.
+     */
+    private displayTooltipForLongText;
+    /**
+     * Removes the dynamically created tooltip for long text label on focus or mouse leave.
+     * This is triggered on focusout and mouseout events.
+     */
+    private hideTooltipOnLeave;
     /**
      * Generates a template for a text slot with the specified content.
      *

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

@@ -12,8 +12,10 @@ import { property, queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+import { ROLE } from '../../utils/roles';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { DEFAULTS } from './listitem.constants';
+import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
+import { DEFAULTS, LISTITEM_ID, TOOLTIP_ID } from './listitem.constants';
 import styles from './listitem.styles';
 /**
  * mdc-listitem component is used to display a label with different types of controls.
@@ -26,6 +28,11 @@ import styles from './listitem.styles';
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
  * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
  *
+ * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.
+ * The placement of the tooltip can be adjusted using the tooltip-placement attribute.
+ * This will be helpful when the listitem text is truncated or
+ * when you want to display additional information about the listitem.
+ *
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
@@ -47,6 +54,7 @@ import styles from './listitem.styles';
  *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
  * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
+ * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
@@ -55,16 +63,62 @@ import styles from './listitem.styles';
  */
 class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The variant of the list item. It can be a pill, rectangle or a full-width.
          * @default 'full-width'
          */
         this.variant = DEFAULTS.VARIANT;
+        /**
+         * The tooltip placement of the list item. If the tooltip text is present,
+         * then this tooltip placement will be applied.
+         * @default 'top'
+         */
+        this.tooltipPlacement = DEFAULTS.TOOLTIP_PLACEMENT;
+        this.addEventListener('focusin', this.displayTooltipForLongText);
+        this.addEventListener('mouseover', this.displayTooltipForLongText);
+        this.addEventListener('focusout', this.hideTooltipOnLeave);
+        this.addEventListener('mouseout', this.hideTooltipOnLeave);
+        this.addEventListener('click', this.handleClick);
     }
     connectedCallback() {
         super.connectedCallback();
-        this.role = this.role || 'listitem';
+        this.role = this.role || ROLE.LISTITEM;
+    }
+    handleClick() {
+        // If the tooltip is open, it has to be closed first.
+        this.hideTooltipOnLeave();
+    }
+    /**
+     * Display a tooltip for the listitem.
+     * Create the tooltip programmatically after the nearest parent element.
+     */
+    displayTooltipForLongText() {
+        var _a;
+        if (!this.tooltipText) {
+            return;
+        }
+        // Add a unique id to the listitem if it does not have one to attach the tooltip.
+        this.id = this.id || LISTITEM_ID;
+        // Create tooltip for the listitem element.
+        const tooltip = document.createElement(TOOLTIP_TAG_NAME);
+        tooltip.id = TOOLTIP_ID;
+        tooltip.textContent = this.tooltipText;
+        tooltip.setAttribute('triggerid', this.id);
+        tooltip.setAttribute('placement', this.tooltipPlacement);
+        tooltip.setAttribute('visible', '');
+        tooltip.setAttribute('show-arrow', '');
+        // Add tooltip programmatically after the parent element.
+        (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.after(tooltip);
+    }
+    /**
+     * Removes the dynamically created tooltip for long text label on focus or mouse leave.
+     * This is triggered on focusout and mouseout events.
+     */
+    hideTooltipOnLeave() {
+        this.id = this.id === LISTITEM_ID ? '' : this.id;
+        const existingTooltip = document.querySelector(`#${TOOLTIP_ID}`);
+        existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
     }
     /**
      * Generates a template for a text slot with the specified content.
@@ -160,4 +214,12 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'subline-text' }),
     __metadata("design:type", String)
 ], ListItem.prototype, "sublineText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'tooltip-text' }),
+    __metadata("design:type", String)
+], ListItem.prototype, "tooltipText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'tooltip-placement' }),
+    __metadata("design:type", String)
+], ListItem.prototype, "tooltipPlacement", void 0);
 export default ListItem;

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

@@ -1,4 +1,6 @@
 declare const TAG_NAME: "mdc-listitem";
+declare const TOOLTIP_ID = "dynamic-listitem-tooltip-popover";
+declare const LISTITEM_ID = "dynamic-listitem-tooltip-triggerid";
 declare const LISTITEM_VARIANTS: {
     readonly FULL_WIDTH: "full-width";
     readonly INSET_PILL: "inset-pill";
@@ -6,5 +8,6 @@ declare const LISTITEM_VARIANTS: {
 };
 declare const DEFAULTS: {
     readonly VARIANT: "full-width";
+    readonly TOOLTIP_PLACEMENT: "top";
 };
-export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS };
+export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS, TOOLTIP_ID, LISTITEM_ID };

package/dist/components/listitem/listitem.constants.js

@@ -1,5 +1,8 @@
 import utils from '../../utils/tag-name';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('listitem');
+const TOOLTIP_ID = 'dynamic-listitem-tooltip-popover';
+const LISTITEM_ID = 'dynamic-listitem-tooltip-triggerid';
 const LISTITEM_VARIANTS = {
     FULL_WIDTH: 'full-width',
     INSET_PILL: 'inset-pill',
@@ -7,5 +10,6 @@ const LISTITEM_VARIANTS = {
 };
 const DEFAULTS = {
     VARIANT: LISTITEM_VARIANTS.FULL_WIDTH,
+    TOOLTIP_PLACEMENT: POPOVER_PLACEMENT.TOP,
 };
-export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS };
+export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS, TOOLTIP_ID, LISTITEM_ID };

package/dist/components/listitem/listitem.styles.js

@@ -9,6 +9,7 @@ const styles = css `
     --mdc-listitem-secondary-label-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-listitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
     --mdc-listitem-column-gap: 0.75rem;
+    --mdc-listitem-padding-left-and-right: 0.75rem;
   }
   :host {
     background-color: var(--mdc-listitem-default-background-color);
@@ -16,7 +17,7 @@ const styles = css `
     cursor: pointer;
     display: flex;
     flex-direction: row;
-    padding: 0.5rem 0.75rem;
+    padding: 0.5rem var(--mdc-listitem-padding-left-and-right);
     width: 100%;
   }
   :host([variant="inset-rectangle"]) {
@@ -25,6 +26,20 @@ const styles = css `
   :host([variant="inset-pill"]) {
     border-radius: 3.125rem;
   }
+  :host::part(leading-text) {
+    flex: 1;
+    /** 2x of column gap on both ends of the listitem - 100% width */
+    width: calc(100% - (2 * var(--mdc-listitem-padding-left-and-right)));
+  }
+  :host::part(leading-text-primary-label),
+  :host::part(leading-text-secondary-label),
+  :host::part(leading-text-tertiary-label),
+  :host::part(trailing-text-side-header),
+  :host::part(trailing-text-subline) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   :host([disabled]),
   :host([disabled]:hover),
   :host([disabled]:active),
@@ -43,17 +58,14 @@ const styles = css `
   :host(:active) {
     background-color: var(--mdc-listitem-background-color-active);
   }
-  :host::part(trailing) {
-    margin-left: auto;
-  }
-  :host::part(trailing):dir(rtl) {
-    margin-left: unset;
-    margin-right: auto;
-  }
   :host::part(leading), :host::part(trailing) {
     align-items: center;
     column-gap: var(--mdc-listitem-column-gap);
     display: flex;
+    width: 100%;
+  }
+  :host::part(trailing) {
+    justify-content: flex-end;
   }
   :host::part(leading-text-secondary-label), :host::part(leading-text-tertiary-label) {
     color: var(--mdc-listitem-secondary-label-color);

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

@@ -1,4 +1,5 @@
 import '../text';
+import '../tooltip';
 import MenuItem from './menuitem.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/menuitem/index.js

@@ -1,4 +1,5 @@
 import '../text';
+import '../tooltip';
 import MenuItem from './menuitem.component';
 import { TAG_NAME } from './menuitem.constants';
 MenuItem.register(TAG_NAME);

package/dist/components/menuitem/menuitem.component.js

@@ -1,3 +1,4 @@
+import { ROLE } from '../../utils/roles';
 import ListItem from '../listitem/listitem.component';
 import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
 /**
@@ -21,7 +22,7 @@ import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
 class MenuItem extends ListItem {
     connectedCallback() {
         super.connectedCallback();
-        this.role = 'menuitem';
+        this.role = ROLE.MENUITEM;
         this.variant = LISTITEM_VARIANTS.INSET_RECTANGLE;
     }
 }

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

@@ -1,10 +1,12 @@
-import { CSSResult, PropertyValues } from 'lit';
+import type { CSSResult, PropertyValues } from 'lit';
 import type { IconNames } from '../icon/icon.types';
 import ListItem from '../listitem/listitem.component';
 declare const Option_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & typeof ListItem;
 /**
  * option component, which is used as a list item in a select component.<br/>
  * We can pass an icon which will be displayed in leading position of the option label text.
+ * We can pass a tooltip which will be displayed on hover of the option label text.
+ * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -33,19 +35,6 @@ declare class Option extends Option_base {
      */
     ariaLabel: string | null;
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    private handleClick;
-    /**
-     * Display a tooltip for long text label with an ellipse at the end.
-     * Create the tooltip programmatically after the nearest select component or the parent element.
-     * @param event - A focus or a mouse event.
-     */
-    private displayTooltipForLongText;
-    /**
-     * Removes the dynamically created tooltip for long text label on focus or mouse leave.
-     * This is triggered on focusout and mouseout events.
-     */
-    private hideTooltipOnLeave;
     /**
      * 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

@@ -13,14 +13,14 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import ListItem from '../listitem/listitem.component';
 import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
-import { TAG_NAME as SELECT_TAG_NAME } from '../select/select.constants';
 import { TYPE } from '../text/text.constants';
-import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
-import { SELECTED_ICON_NAME, TOOLTIP_ID } from './option.constants';
+import { SELECTED_ICON_NAME } from './option.constants';
 import styles from './option.styles';
 /**
  * option component, which is used as a list item in a select component.<br/>
  * We can pass an icon which will be displayed in leading position of the option label text.
+ * We can pass a tooltip which will be displayed on hover of the option label text.
+ * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -58,57 +58,6 @@ class Option extends FormInternalsMixin(ListItem) {
         this.secondaryLabel = undefined;
         this.sideHeaderText = undefined;
         this.sublineText = undefined;
-        this.addEventListener('focusin', this.displayTooltipForLongText);
-        this.addEventListener('mouseover', this.displayTooltipForLongText);
-        this.addEventListener('focusout', this.hideTooltipOnLeave);
-        this.addEventListener('mouseout', this.hideTooltipOnLeave);
-        this.addEventListener('click', this.handleClick);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('focusin', this.displayTooltipForLongText);
-        this.removeEventListener('mouseover', this.displayTooltipForLongText);
-        this.removeEventListener('focusout', this.hideTooltipOnLeave);
-        this.removeEventListener('mouseout', this.hideTooltipOnLeave);
-        this.removeEventListener('click', this.handleClick);
-    }
-    handleClick() {
-        // When the select dropdown (popover) is open,
-        // then if the tooltip is open, it has to be closed first.
-        // only then we can close the dropdown on option click/select.
-        this.hideTooltipOnLeave();
-    }
-    /**
-     * Display a tooltip for long text label with an ellipse at the end.
-     * Create the tooltip programmatically after the nearest select component or the parent element.
-     * @param event - A focus or a mouse event.
-     */
-    displayTooltipForLongText(event) {
-        var _a, _b;
-        const dimensions = (_a = event.target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="leading-text-primary-label"]');
-        if (dimensions && dimensions.scrollWidth && dimensions.clientWidth
-            && dimensions.scrollWidth <= (dimensions === null || dimensions === void 0 ? void 0 : dimensions.clientWidth)) {
-            // it means that the option label text is fully visible and we do not need to show the tooltip.
-            return;
-        }
-        // Create tooltip for long text label which has an ellipse at the end.
-        const tooltip = document.createElement(TOOLTIP_TAG_NAME);
-        tooltip.id = TOOLTIP_ID;
-        tooltip.textContent = (_b = this.label) !== null && _b !== void 0 ? _b : '';
-        tooltip.setAttribute('triggerid', this.id);
-        tooltip.setAttribute('visible', '');
-        tooltip.setAttribute('show-arrow', '');
-        // Add tooltip programmatically after the nearest select component or the parent element.
-        const parent = this.closest(SELECT_TAG_NAME) || this.parentElement;
-        parent === null || parent === void 0 ? void 0 : parent.after(tooltip);
-    }
-    /**
-     * Removes the dynamically created tooltip for long text label on focus or mouse leave.
-     * This is triggered on focusout and mouseout events.
-     */
-    hideTooltipOnLeave() {
-        const existingTooltip = document.querySelector(`#${TOOLTIP_ID}`);
-        existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
     }
     /**
      * Listens to changes in the default slot and updates the label of the option accordingly.

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

@@ -1,5 +1,4 @@
 import type { IconNames } from '../icon/icon.types';
 declare const SELECTED_ICON_NAME: Extract<IconNames, 'check-bold'>;
-declare const TOOLTIP_ID = "dynamic-option-tooltip-popover";
 declare const TAG_NAME: "mdc-option";
-export { SELECTED_ICON_NAME, TAG_NAME, TOOLTIP_ID };
+export { SELECTED_ICON_NAME, TAG_NAME };

package/dist/components/option/option.constants.js

@@ -1,5 +1,4 @@
 import utils from '../../utils/tag-name';
 const SELECTED_ICON_NAME = 'check-bold';
-const TOOLTIP_ID = 'dynamic-option-tooltip-popover';
 const TAG_NAME = utils.constructTagName('option');
-export { SELECTED_ICON_NAME, TAG_NAME, TOOLTIP_ID };
+export { SELECTED_ICON_NAME, TAG_NAME };

package/dist/components/option/option.styles.js

@@ -23,10 +23,5 @@ const styles = css `
     /** 2x of leading and trailing icon width + 2x of column gap on both sides of the label text */
     width: calc(100% - (2 * var(--mdc-option-icon-width)) - (2 * var(--mdc-listitem-column-gap)));
   }
-  :host::part(leading-text-primary-label) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 `;
 export default [styles];

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

@@ -1,5 +1,5 @@
-import type { CSSResult } from 'lit';
 import type { PropertyValues } from '@lit/reactive-element';
+import type { CSSResult } from 'lit';
 import Popover from '../popover/popover.component';
 import type { TooltipType } from './tooltip.types';
 /**

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

@@ -9,10 +9,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { property, queryAssignedNodes } from 'lit/decorators.js';
 import { v4 as uuidv4 } from 'uuid';
-import { DEFAULTS, TOOLTIP_TYPES } from './tooltip.constants';
+import { ROLE } from '../../utils/roles';
 import Popover from '../popover/popover.component';
-import styles from './tooltip.styles';
 import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { DEFAULTS, TOOLTIP_TYPES } from './tooltip.constants';
+import styles from './tooltip.styles';
 /**
  * A tooltip is triggered by mouse hover or by keyboard focus
  * and will disappear upon mouse exit or focus change.
@@ -47,14 +48,14 @@ class Tooltip extends Popover {
     connectedCallback() {
         super.connectedCallback();
         this.backdrop = false;
-        this.delay = DEFAULTS.DELAY;
+        this.delay = this.delay || DEFAULTS.DELAY;
         this.focusTrap = false;
         this.hideOnBlur = true;
         this.hideOnEscape = true;
         this.interactive = false;
-        this.offset = DEFAULTS.OFFSET;
-        this.placement = DEFAULTS.PLACEMENT;
-        this.role = 'tooltip';
+        this.offset = this.offset || DEFAULTS.OFFSET;
+        this.placement = this.placement || DEFAULTS.PLACEMENT;
+        this.role = ROLE.TOOLTIP;
         this.trigger = 'mouseenter focusin';
         this.enabledFocusTrap = false;
         this.enabledPreventScroll = false;