@momentum-design/components 0.100.0 → 0.100.2

package/dist/components/tablist/tablist.component.js

@@ -61,6 +61,13 @@ import { getFirstTab, getLastTab, getNextTab, getPreviousTab, findTab, getActive
  * @cssproperty  --mdc-tablist-arrow-button-margin - Margin value for the arrow button
  */
 class TabList extends Component {
+    /**
+     * @internal
+     */
+    isRtl() {
+        var _a;
+        return (((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl' || window.getComputedStyle(this).direction === 'rtl');
+    }
     constructor() {
         super();
         /**
@@ -77,277 +84,7 @@ class TabList extends Component {
          * @internal
          */
         this.showBackwardArrowButton = false;
-        /**
-         * @internal
-         */
-        this.isRtl = () => { var _a; return ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl' || window.getComputedStyle(this).direction === 'rtl'; };
-        /**
-         * Dispatch the change event.
-         *
-         * @internal
-         *
-         * @param newTab - the new tab that is active.
-         */
-        this.fireTabChangeEvent = (newTab) => {
-            const event = new CustomEvent('change', {
-                detail: { tabId: newTab.tabId },
-            });
-            this.dispatchEvent(event);
-        };
-        /**
-         * When the tablist receives focus, then focus the active tab.
-         *
-         * @internal
-         *
-         * @param event - Focus event.
-         */
-        this.handleFocus = async (event) => {
-            /**
-             * If the element losing focus is a tab, do nothing.
-             * This also covers the case when previous focus was on a tab that belongs to another tablist.
-             */
-            if (event.relatedTarget instanceof Tab) {
-                return;
-            }
-            /**
-             * If the element gaining focus is not a tab, do nothing.
-             */
-            if (!(event.target instanceof Tab)) {
-                return;
-            }
-            const activeTab = getActiveTab(this.tabs || []);
-            if (!(activeTab instanceof Tab)) {
-                return;
-            }
-            await this.focusTab(activeTab);
-        };
-        /**
-         * Prevent the mousedown event from triggering a focus event before the click event.
-         *
-         * @internal
-         *
-         * @param event - Mouse event.
-         */
-        this.handleMousedown = (event) => {
-            if (!(event.target instanceof Tab)) {
-                return;
-            }
-            event.preventDefault();
-        };
-        /**
-         * Handle the tab active change event fired from the nested tab.
-         *
-         * @internal
-         *
-         * @param event - Custom Event fired from the nested tab.
-         */
-        this.handleNestedTabActiveChange = async (event) => {
-            event.stopPropagation();
-            const tab = event.target;
-            if (!(tab instanceof Tab)) {
-                return;
-            }
-            this.setActiveTab(tab);
-            await this.focusTab(tab);
-            this.activeTabId = tab.tabId;
-        };
-        /**
-         * Resets all tabs' tabindex to -1 and sets the tabindex of the
-         * given tab to 0.
-         * This is used when navigating the tabs via keyboard.
-         *
-         * @internal
-         *
-         * @param tabId - The id of the new active tab in the tabs.
-         */
-        this.resetTabIndexAndSetNewTabIndex = (newTab) => {
-            var _a;
-            (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach(tab => {
-                tab.setAttribute('tabindex', tab === newTab ? '0' : '-1');
-            });
-        };
-        /**
-         * Removes active attribute from all tabs and sets active on the new tab.
-         *
-         * @internal
-         *
-         * @param tabId - The id of the new active tab.
-         */
-        this.setActiveTab = (newTab) => {
-            var _a;
-            (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach(tab => {
-                if (tab === newTab) {
-                    tab.setAttribute('active', '');
-                }
-                else {
-                    tab.removeAttribute('active');
-                }
-            });
-        };
-        /**
-         * Set focus on the new tab, then scroll it into view.
-         *
-         * @internal
-         *
-         * @param tab - Tab to set focus on.
-         */
-        this.focusTab = async (tab) => {
-            if (!(tab instanceof Tab)) {
-                return;
-            }
-            if (tab !== (document === null || document === void 0 ? void 0 : document.activeElement)) {
-                this.resetTabIndexAndSetNewTabIndex(tab);
-                tab.focus();
-            }
-            await this.handleArrowButtonVisibility();
-        };
-        /**
-         * Handle the keydown event. The arrow keys, Home, End, Enter, and Space keys are supported.
-         *
-         * @internal
-         *
-         * @param event - HTML Keyboard Event.
-         */
-        this.handleKeydown = async (event) => {
-            const tab = event.target;
-            if (!(tab instanceof Tab)) {
-                return;
-            }
-            if (!this.tabs) {
-                return;
-            }
-            const previousTab = getPreviousTab(this.tabs, tab);
-            const nextTab = getNextTab(this.tabs, tab);
-            const firstTab = getFirstTab(this.tabs);
-            const lastTab = getLastTab(this.tabs);
-            switch (event.code) {
-                case KEYCODES.LEFT:
-                    event.preventDefault();
-                    await this.focusTab(!this.isRtl() ? previousTab : nextTab);
-                    break;
-                case KEYCODES.RIGHT:
-                    event.preventDefault();
-                    await this.focusTab(!this.isRtl() ? nextTab : previousTab);
-                    break;
-                case KEYCODES.HOME:
-                    await this.focusTab(firstTab);
-                    break;
-                case KEYCODES.END:
-                    await this.focusTab(lastTab);
-                    break;
-                default:
-            }
-        };
-        /**
-         * Should the arrow button be shown.
-         *
-         * @internal
-         *
-         * @param direction - The direction of the arrow button.
-         */
-        this.shouldShowArrowButton = (direction) => direction === ARROW_BUTTON_DIRECTION.FORWARD ? this.showForwardArrowButton : this.showBackwardArrowButton;
-        /**
-         * If an arrow button is in focus and it gets removed, switch focus to the opposite arrow button.
-         * If both arrow buttons are removed, switch focus to the active tab.
-         *
-         * @internal
-         */
-        this.switchFocus = async () => {
-            var _a, _b;
-            await this.updateComplete;
-            if (!this.showBackwardArrowButton && !this.showForwardArrowButton) {
-                (_a = getActiveTab(this.tabs || [])) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else if ((this.showBackwardArrowButton && !this.showForwardArrowButton) ||
-                (this.showForwardArrowButton && !this.showBackwardArrowButton)) {
-                (_b = this.notFocusedArrowButton) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-        };
-        /**
-         * Show or hide the arrow buttons based on the position of the tabs
-         * corresponding to the tab list.
-         *
-         * @internal
-         */
-        this.handleArrowButtonVisibility = async () => {
-            var _a, _b, _c;
-            if (!this.tabs) {
-                return;
-            }
-            if (!this.tabsContainer) {
-                return;
-            }
-            let isArrowButtonFocused = false;
-            /**
-             * If the active element is an arrow button,
-             * then run the switchFocus function after setting the arrow button visibility.
-             */
-            if (((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) instanceof Button) {
-                isArrowButtonFocused = true;
-            }
-            const firstTab = getFirstTab(this.tabs);
-            const lastTab = getLastTab(this.tabs);
-            const firstTabLeftEdgePosition = firstTab.getBoundingClientRect().left;
-            const tabListLeftEdgePosition = (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().left;
-            const lastTabRightEdgePosition = lastTab.getBoundingClientRect().right;
-            const tabListRightEdgePosition = (_c = this.tabsContainer) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().right;
-            // when RTL, the edges are reversed
-            const firstTabRightEdgePosition = firstTab.getBoundingClientRect().right;
-            const lastTabLeftEdgePosition = lastTab.getBoundingClientRect().left;
-            if (!this.isRtl()) {
-                if (firstTabLeftEdgePosition <= tabListLeftEdgePosition) {
-                    this.showBackwardArrowButton = true;
-                }
-                else {
-                    this.showBackwardArrowButton = false;
-                }
-                if (lastTabRightEdgePosition > tabListRightEdgePosition) {
-                    this.showForwardArrowButton = true;
-                }
-                else {
-                    this.showForwardArrowButton = false;
-                }
-                if (isArrowButtonFocused) {
-                    await this.switchFocus();
-                }
-                return;
-            }
-            if (firstTabRightEdgePosition > tabListRightEdgePosition) {
-                this.showBackwardArrowButton = true;
-            }
-            else {
-                this.showBackwardArrowButton = false;
-            }
-            if (lastTabLeftEdgePosition < tabListLeftEdgePosition) {
-                this.showForwardArrowButton = true;
-            }
-            else {
-                this.showForwardArrowButton = false;
-            }
-            if (isArrowButtonFocused) {
-                await this.switchFocus();
-            }
-        };
-        /**
-         * Scroll tabs forward or backward.
-         *
-         * @internal
-         *
-         * @param direction - The direction to scroll the tabs in.
-         */
-        this.scrollTabs = async (direction) => {
-            var _a;
-            const forwardMultiplier = !this.isRtl() ? 1 : -1;
-            const backwardMultiplier = !this.isRtl() ? -1 : 1;
-            (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.scrollBy({
-                left: this.tabsContainer.clientWidth *
-                    (direction === ARROW_BUTTON_DIRECTION.FORWARD ? forwardMultiplier : backwardMultiplier),
-                // @ts-ignore : https://github.com/Microsoft/TypeScript/issues/28755
-                behavior: 'instant',
-            });
-            await this.handleArrowButtonVisibility();
-        };
-        this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('keydown', this.handleKeydown.bind(this));
         // Reason for assertion below: https://github.com/microsoft/TypeScript/issues/28357
         this.addEventListener('activechange', this.handleNestedTabActiveChange);
     }
@@ -386,8 +123,14 @@ class TabList extends Component {
         if (!this.activeTabId) {
             this.activeTabId = (_a = getFirstTab(this.tabs)) === null || _a === void 0 ? void 0 : _a.tabId;
         }
-        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.addEventListener('focusin', this.handleFocus);
-        (_c = this.tabsContainer) === null || _c === void 0 ? void 0 : _c.addEventListener('mousedown', this.handleMousedown);
+        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.addEventListener('focusin', this.handleFocus.bind(this));
+        (_c = this.tabsContainer) === null || _c === void 0 ? void 0 : _c.addEventListener('mousedown', this.handleMousedown.bind(this));
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.handleFocus);
+        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.handleMousedown);
     }
     /**
      * Observe the tablist element for changes in the activeTabId attribute.
@@ -426,6 +169,274 @@ class TabList extends Component {
             }
         }
     }
+    /**
+     * Dispatch the change event.
+     *
+     * @internal
+     *
+     * @param newTab - the new tab that is active.
+     */
+    fireTabChangeEvent(newTab) {
+        const event = new CustomEvent('change', {
+            detail: { tabId: newTab.tabId },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * When the tablist receives focus, then focus the active tab.
+     *
+     * @internal
+     *
+     * @param event - Focus event.
+     */
+    async handleFocus(event) {
+        /**
+         * If the element losing focus is a tab, do nothing.
+         * This also covers the case when previous focus was on a tab that belongs to another tablist.
+         */
+        if (event.relatedTarget instanceof Tab) {
+            return;
+        }
+        /**
+         * If the element gaining focus is not a tab, do nothing.
+         */
+        if (!(event.target instanceof Tab)) {
+            return;
+        }
+        const activeTab = getActiveTab(this.tabs || []);
+        if (!(activeTab instanceof Tab)) {
+            return;
+        }
+        await this.focusTab(activeTab);
+    }
+    /**
+     * Prevent the mousedown event from triggering a focus event before the click event.
+     *
+     * @internal
+     *
+     * @param event - Mouse event.
+     */
+    handleMousedown(event) {
+        if (!(event.target instanceof Tab)) {
+            return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Handle the tab active change event fired from the nested tab.
+     *
+     * @internal
+     *
+     * @param event - Custom Event fired from the nested tab.
+     */
+    async handleNestedTabActiveChange(event) {
+        event.stopPropagation();
+        const tab = event.target;
+        if (!(tab instanceof Tab)) {
+            return;
+        }
+        this.setActiveTab(tab);
+        await this.focusTab(tab);
+        this.activeTabId = tab.tabId;
+    }
+    /**
+     * Resets all tabs' tabindex to -1 and sets the tabindex of the
+     * given tab to 0.
+     * This is used when navigating the tabs via keyboard.
+     *
+     * @internal
+     *
+     * @param tabId - The id of the new active tab in the tabs.
+     */
+    resetTabIndexAndSetNewTabIndex(newTab) {
+        var _a;
+        (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach(tab => {
+            tab.setAttribute('tabindex', tab === newTab ? '0' : '-1');
+        });
+    }
+    /**
+     * Removes active attribute from all tabs and sets active on the new tab.
+     *
+     * @internal
+     *
+     * @param tabId - The id of the new active tab.
+     */
+    setActiveTab(newTab) {
+        var _a;
+        (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach(tab => {
+            if (tab === newTab) {
+                tab.setAttribute('active', '');
+            }
+            else {
+                tab.removeAttribute('active');
+            }
+        });
+    }
+    /**
+     * Set focus on the new tab, then scroll it into view.
+     *
+     * @internal
+     *
+     * @param tab - Tab to set focus on.
+     */
+    async focusTab(tab) {
+        if (!(tab instanceof Tab)) {
+            return;
+        }
+        if (tab !== (document === null || document === void 0 ? void 0 : document.activeElement)) {
+            this.resetTabIndexAndSetNewTabIndex(tab);
+            tab.focus();
+        }
+        await this.handleArrowButtonVisibility();
+    }
+    /**
+     * Handle the keydown event. The arrow keys, Home, End, Enter, and Space keys are supported.
+     *
+     * @internal
+     *
+     * @param event - HTML Keyboard Event.
+     */
+    async handleKeydown(event) {
+        const tab = event.target;
+        if (!(tab instanceof Tab)) {
+            return;
+        }
+        if (!this.tabs) {
+            return;
+        }
+        const previousTab = getPreviousTab(this.tabs, tab);
+        const nextTab = getNextTab(this.tabs, tab);
+        const firstTab = getFirstTab(this.tabs);
+        const lastTab = getLastTab(this.tabs);
+        switch (event.code) {
+            case KEYCODES.LEFT:
+                event.preventDefault();
+                await this.focusTab(!this.isRtl() ? previousTab : nextTab);
+                break;
+            case KEYCODES.RIGHT:
+                event.preventDefault();
+                await this.focusTab(!this.isRtl() ? nextTab : previousTab);
+                break;
+            case KEYCODES.HOME:
+                await this.focusTab(firstTab);
+                break;
+            case KEYCODES.END:
+                await this.focusTab(lastTab);
+                break;
+            default:
+        }
+    }
+    /**
+     * Should the arrow button be shown.
+     *
+     * @internal
+     *
+     * @param direction - The direction of the arrow button.
+     */
+    shouldShowArrowButton(direction) {
+        return direction === ARROW_BUTTON_DIRECTION.FORWARD ? this.showForwardArrowButton : this.showBackwardArrowButton;
+    }
+    /**
+     * If an arrow button is in focus and it gets removed, switch focus to the opposite arrow button.
+     * If both arrow buttons are removed, switch focus to the active tab.
+     *
+     * @internal
+     */
+    async switchFocus() {
+        var _a, _b;
+        await this.updateComplete;
+        if (!this.showBackwardArrowButton && !this.showForwardArrowButton) {
+            (_a = getActiveTab(this.tabs || [])) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if ((this.showBackwardArrowButton && !this.showForwardArrowButton) ||
+            (this.showForwardArrowButton && !this.showBackwardArrowButton)) {
+            (_b = this.notFocusedArrowButton) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    /**
+     * Show or hide the arrow buttons based on the position of the tabs
+     * corresponding to the tab list.
+     *
+     * @internal
+     */
+    async handleArrowButtonVisibility() {
+        var _a, _b, _c;
+        if (!this.tabs) {
+            return;
+        }
+        if (!this.tabsContainer) {
+            return;
+        }
+        let isArrowButtonFocused = false;
+        /**
+         * If the active element is an arrow button,
+         * then run the switchFocus function after setting the arrow button visibility.
+         */
+        if (((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) instanceof Button) {
+            isArrowButtonFocused = true;
+        }
+        const firstTab = getFirstTab(this.tabs);
+        const lastTab = getLastTab(this.tabs);
+        const firstTabLeftEdgePosition = firstTab.getBoundingClientRect().left;
+        const tabListLeftEdgePosition = (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().left;
+        const lastTabRightEdgePosition = lastTab.getBoundingClientRect().right;
+        const tabListRightEdgePosition = (_c = this.tabsContainer) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().right;
+        // when RTL, the edges are reversed
+        const firstTabRightEdgePosition = firstTab.getBoundingClientRect().right;
+        const lastTabLeftEdgePosition = lastTab.getBoundingClientRect().left;
+        if (!this.isRtl()) {
+            if (firstTabLeftEdgePosition <= tabListLeftEdgePosition) {
+                this.showBackwardArrowButton = true;
+            }
+            else {
+                this.showBackwardArrowButton = false;
+            }
+            if (lastTabRightEdgePosition > tabListRightEdgePosition) {
+                this.showForwardArrowButton = true;
+            }
+            else {
+                this.showForwardArrowButton = false;
+            }
+            if (isArrowButtonFocused) {
+                await this.switchFocus();
+            }
+            return;
+        }
+        if (firstTabRightEdgePosition > tabListRightEdgePosition) {
+            this.showBackwardArrowButton = true;
+        }
+        else {
+            this.showBackwardArrowButton = false;
+        }
+        if (lastTabLeftEdgePosition < tabListLeftEdgePosition) {
+            this.showForwardArrowButton = true;
+        }
+        else {
+            this.showForwardArrowButton = false;
+        }
+        if (isArrowButtonFocused) {
+            await this.switchFocus();
+        }
+    }
+    /**
+     * Scroll tabs forward or backward.
+     *
+     * @internal
+     *
+     * @param direction - The direction to scroll the tabs in.
+     */
+    async scrollTabs(direction) {
+        var _a;
+        const forwardMultiplier = !this.isRtl() ? 1 : -1;
+        const backwardMultiplier = !this.isRtl() ? -1 : 1;
+        (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.scrollBy({
+            left: this.tabsContainer.clientWidth *
+                (direction === ARROW_BUTTON_DIRECTION.FORWARD ? forwardMultiplier : backwardMultiplier),
+            // @ts-ignore : https://github.com/Microsoft/TypeScript/issues/28755
+            behavior: 'instant',
+        });
+        await this.handleArrowButtonVisibility();
+    }
     render() {
         const forwardArrowDirection = !this.isRtl() ? 'right' : 'left';
         const backwardArrowDirection = !this.isRtl() ? 'left' : 'right';

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

@@ -66,12 +66,12 @@ declare class Textarea extends Textarea_base {
      * The rows attribute specifies the visible number of lines in a text area.
      * @default 5
      */
-    rows: 5;
+    rows?: number;
     /**
      * The cols attribute specifies the visible number of lines in a text area.
      * @default 40
      */
-    cols: 40;
+    cols?: number;
     /**
      * The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.
      * @default 'soft'

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

@@ -317,11 +317,11 @@ __decorate([
 ], Textarea.prototype, "readonly", void 0);
 __decorate([
     property({ type: Number }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Number)
 ], Textarea.prototype, "rows", void 0);
 __decorate([
     property({ type: Number }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Number)
 ], Textarea.prototype, "cols", void 0);
 __decorate([
     property({ type: String }),

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

@@ -58,7 +58,7 @@ declare class Tooltip extends Popover {
      * @param changedProperties - The changed properties.
      */
     private onTooltipTypeUpdated;
-    update(changedProperties: PropertyValues): void;
+    update(changedProperties: PropertyValues): Promise<void>;
     static styles: Array<CSSResult>;
 }
 export default Tooltip;

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

@@ -86,20 +86,20 @@ class Tooltip extends Popover {
     /**
      * Updates the tooltip id if it is empty.
      */
-    onIdUpdated() {
+    async onIdUpdated() {
         // Set tooltip ID if not set.
         if (this.id.length === 0) {
             this.id = `mdc-tooltip-${uuidv4()}`;
         }
+        await this.updateComplete;
         // Update the aria props on the trigger component to updated tooltip id.
-        const triggerElement = document.getElementById(this.triggerID);
-        if (triggerElement) {
+        if (this.triggerElement) {
             switch (this.tooltipType) {
                 case TOOLTIP_TYPES.DESCRIPTION:
-                    triggerElement.setAttribute('aria-describedby', this.id);
+                    this.triggerElement.setAttribute('aria-describedby', this.id);
                     break;
                 case TOOLTIP_TYPES.LABEL:
-                    triggerElement.setAttribute('aria-labelledby', this.id);
+                    this.triggerElement.setAttribute('aria-labelledby', this.id);
                     break;
                 default:
                     break;
@@ -124,28 +124,27 @@ class Tooltip extends Popover {
         if (!Object.values(TOOLTIP_TYPES).includes(this.tooltipType)) {
             this.setTooltipType(DEFAULTS.TOOLTIP_TYPE);
         }
-        const triggerElement = document.getElementById(this.triggerID);
-        if (triggerElement) {
+        if (this.triggerElement) {
             const tooltipText = this.getTooltipText();
             switch (this.tooltipType) {
                 case TOOLTIP_TYPES.DESCRIPTION:
                     if (previousTooltipType === TOOLTIP_TYPES.LABEL) {
-                        triggerElement.removeAttribute('aria-labelledby');
+                        this.triggerElement.removeAttribute('aria-labelledby');
                     }
-                    triggerElement.setAttribute('aria-describedby', this.id);
+                    this.triggerElement.setAttribute('aria-describedby', this.id);
                     break;
                 case TOOLTIP_TYPES.LABEL:
                     if (previousTooltipType === TOOLTIP_TYPES.DESCRIPTION) {
-                        triggerElement.removeAttribute('aria-describedby');
+                        this.triggerElement.removeAttribute('aria-describedby');
                     }
-                    triggerElement.setAttribute('aria-labelledby', this.id);
+                    this.triggerElement.setAttribute('aria-labelledby', this.id);
                     break;
                 default:
                     if (previousTooltipType === TOOLTIP_TYPES.DESCRIPTION) {
-                        triggerElement.removeAttribute('aria-describedby');
+                        this.triggerElement.removeAttribute('aria-describedby');
                     }
                     else if (previousTooltipType === TOOLTIP_TYPES.LABEL) {
-                        triggerElement.removeAttribute('aria-labelledby');
+                        this.triggerElement.removeAttribute('aria-labelledby');
                     }
                     break;
             }
@@ -154,10 +153,10 @@ class Tooltip extends Popover {
             }
         }
     }
-    update(changedProperties) {
+    async update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('id')) {
-            this.onIdUpdated();
+            await this.onIdUpdated();
         }
         if (changedProperties.has('placement')) {
             this.onPlacementUpdated();