@limetech/lime-elements 40.5.4 → 40.6.1

package/dist/collection/components/menu/menu.js

@@ -98,10 +98,7 @@ export class Menu {
                 return;
             }
             const pressedHotkey = hotkeyFromKeyboardEvent(event);
-            if (!pressedHotkey) {
-                return;
-            }
-            if (this.isReservedMenuHotkey(pressedHotkey)) {
+            if (!pressedHotkey || this.isReservedMenuHotkey(pressedHotkey)) {
                 return;
             }
             const matchedItem = this.findMenuItemByHotkey(pressedHotkey);
@@ -255,12 +252,13 @@ export class Menu {
                 return;
             }
             // Down on last item: go to search input (if it exists)
-            if (isDown && this.isLastListItemFocused() && this.searchInput) {
-                event.stopPropagation();
-                event.preventDefault();
-                this.searchInput.focus();
+            if (!isDown || !this.isLastListItemFocused() || !this.searchInput) {
+                // If no search input, let MDC Menu handle wrap-around
+                return;
             }
-            // If no search input, let MDC Menu handle wrap-around
+            event.stopPropagation();
+            event.preventDefault();
+            this.searchInput.focus();
         };
         // Key handler for the menu list (bubble phase)
         // Will change focus to the search field if using shift+tab
@@ -282,16 +280,17 @@ export class Menu {
                 (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
-            if (!this.gridLayout && (isLeft || isRight)) {
-                const currentItem = this.getCurrentItem();
-                event.stopPropagation();
-                event.preventDefault();
-                if (isRight) {
-                    this.goForward(currentItem);
-                }
-                else if (isLeft) {
-                    this.goBack();
-                }
+            if (this.gridLayout || (!isLeft && !isRight)) {
+                return;
+            }
+            const currentItem = this.getCurrentItem();
+            event.stopPropagation();
+            event.preventDefault();
+            if (isRight) {
+                this.goForward(currentItem);
+            }
+            else if (isLeft) {
+                this.goBack();
             }
         };
         // Key handler for breadcrumbs
@@ -387,10 +386,11 @@ export class Menu {
                 }
                 return;
             }
-            if (this.triggersDisabledByMenu.has(element)) {
-                element.removeAttribute('disabled');
-                this.triggersDisabledByMenu.delete(element);
+            if (!this.triggersDisabledByMenu.has(element)) {
+                return;
             }
+            element.removeAttribute('disabled');
+            this.triggersDisabledByMenu.delete(element);
         };
         this.onClose = () => {
             const restoreFocus = this.shouldRestoreFocusOnClose;
@@ -418,7 +418,7 @@ export class Menu {
                 this.setFocus();
                 return;
             }
-            else if (isFunction(menuItem === null || menuItem === void 0 ? void 0 : menuItem.items)) {
+            if (isFunction(menuItem === null || menuItem === void 0 ? void 0 : menuItem.items)) {
                 const menuLoader = menuItem.items;
                 this.selectedMenuItem = menuItem;
                 this.loadingSubItems = true;
@@ -462,7 +462,7 @@ export class Menu {
             }
             this.list = element;
             if (this.list) {
-                this.list.addEventListener('keydown', this.handleListKeyDownCapture, true);
+                this.list.addEventListener('keydown', this.handleListKeyDownCapture, { capture: true });
             }
         };
         this.setFocus = () => {
@@ -585,14 +585,15 @@ export class Menu {
     }
     componentDidRender() {
         const slotElement = this.host.shadowRoot.querySelector('slot');
-        // eslint-disable-next-line unicorn/no-array-for-each
-        slotElement.assignedElements().forEach(this.setTriggerAttributes);
+        for (const element of slotElement.assignedElements()) {
+            this.setTriggerAttributes(element);
+        }
     }
     render() {
         const cssProperties = this.getCssProperties();
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
-        return (h("div", { key: 'c66307a5cc7257e2b394f0b5d56d6fbc6fce18b1', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '7c37448e29deaee202f74d3288d21697529c82b5', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'f7f1b14ae5c6e19fa8e9651c2a847db0bb246427', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'c2fd7257bfe8ccf820b8aabc6a8959f6d5d1cd2f', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
+        return (h("div", { key: '53dad76785873b9673e15413e2c2f6d3b7253725', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '13bb5f53e6e13101a8ecbb18dbc4df4d74ac5f27', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'cb64f614e55158e1b3d49fe9111e8c4ad36794b1', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'bfe7f53832ac43ec7b0e60f8dd7ac385d0ea3f14', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
                 'has-grid-layout': this.gridLayout,
             } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
     }
@@ -624,10 +625,14 @@ export class Menu {
             this.teardownGlobalHandlers();
             return;
         }
-        document.addEventListener('keydown', this.handleDocumentKeyDown, true);
+        document.addEventListener('keydown', this.handleDocumentKeyDown, {
+            capture: true,
+        });
     }
     teardownGlobalHandlers() {
-        document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
+        document.removeEventListener('keydown', this.handleDocumentKeyDown, {
+            capture: true,
+        });
     }
     isFromTextInput(event) {
         const path = typeof event.composedPath === 'function'
@@ -637,13 +642,8 @@ export class Menu {
             if (!(node instanceof HTMLElement)) {
                 continue;
             }
-            if (node.isContentEditable) {
-                return true;
-            }
-            const tagName = node.tagName;
-            if (tagName === 'INPUT' ||
-                tagName === 'TEXTAREA' ||
-                tagName === 'SELECT') {
+            if (node.isContentEditable ||
+                ['INPUT', 'TEXTAREA', 'SELECT'].includes(node.tagName)) {
                 return true;
             }
         }
@@ -673,14 +673,16 @@ export class Menu {
         if (hasModifiers) {
             return false;
         }
-        return (key === 'arrowup' ||
-            key === 'arrowdown' ||
-            key === 'arrowleft' ||
-            key === 'arrowright' ||
-            key === 'tab' ||
-            key === 'enter' ||
-            key === 'space' ||
-            key === 'escape');
+        return [
+            'arrowup',
+            'arrowdown',
+            'arrowleft',
+            'arrowright',
+            'tab',
+            'enter',
+            'space',
+            'escape',
+        ].includes(key);
     }
     findMenuItemByHotkey(pressedHotkey) {
         for (const item of this.visibleItems) {
@@ -756,7 +758,7 @@ export class Menu {
             }
             return `${assignedTriggers[0].clientWidth}px`;
         }
-        else if (this.surfaceWidth === 'inherit-from-menu') {
+        if (this.surfaceWidth === 'inherit-from-menu') {
             if (!((_c = this.host) === null || _c === void 0 ? void 0 : _c.clientWidth)) {
                 return '';
             }
@@ -769,7 +771,7 @@ export class Menu {
         if (Array.isArray(this.searchResults) && this.searchValue) {
             return this.searchResults;
         }
-        else if (Array.isArray((_a = this.currentSubMenu) === null || _a === void 0 ? void 0 : _a.items)) {
+        if (Array.isArray((_a = this.currentSubMenu) === null || _a === void 0 ? void 0 : _a.items)) {
             if (this.cachedSubMenuSource !== this.currentSubMenu) {
                 this.cachedSubMenuSource = this.currentSubMenu;
                 this.cachedSubMenuItems = this.currentSubMenu.items.map((item) => (Object.assign(Object.assign({}, item), { parentItem: this.currentSubMenu })));

package/dist/collection/components/menu-list/menu-list-renderer.js

@@ -17,12 +17,12 @@ export class MenuListRenderer {
          */
         this.getIndexForWhichToApplyTabIndex = (items) => {
             let result;
-            for (let i = 0, max = items.length; i < max; i += 1) {
-                if ('separator' in items[i]) {
+            for (const [i, entry] of items.entries()) {
+                if ('separator' in entry) {
                     // Ignore ListSeparator
                 }
                 else {
-                    const item = items[i];
+                    const item = entry;
                     if (item.disabled) {
                         // Skip disabled items - they should never get tabindex
                         continue;
@@ -56,8 +56,8 @@ export class MenuListRenderer {
             if (index === this.applyTabIndexToItemAtIndex) {
                 attributes.tabindex = '0';
             }
-            const hasSubMenu = this.hasSubItems(item);
-            const hasMeta = hasSubMenu ||
+            const hasSubmenu = this.hasSubItems(item);
+            const hasMeta = hasSubmenu ||
                 item.badge !== undefined ||
                 !!item.hotkey ||
                 !!item.commandText;
@@ -69,7 +69,7 @@ export class MenuListRenderer {
                         hotkey: item.hotkey,
                         disabled: !!item.disabled,
                         badge: item.badge,
-                        showChevron: hasSubMenu,
+                        showChevron: hasSubmenu,
                     },
                 }
                 : undefined;
@@ -78,7 +78,7 @@ export class MenuListRenderer {
                 'mdc-deprecated-list-item': true, // required for keyboard navigation with arrow keys
                 'mdc-deprecated-list-item--disabled': !!item.disabled, // MDC’s foundation checks for the disabled class before toggling selected state
             };
-            return (h("limel-list-item", Object.assign({ key: key, class: classNames, "data-index": index }, attributes, { "aria-haspopup": hasSubMenu ? 'menu' : undefined, "aria-expanded": hasSubMenu ? 'false' : undefined, type: "menuitem", text: item.text, secondaryText: item.secondaryText, icon: item.icon, primaryComponent: primaryComponent, badgeIcon: this.config.badgeIcons, selected: item.selected, disabled: item.disabled })));
+            return (h("limel-list-item", Object.assign({ key: key, class: classNames, "data-index": index }, attributes, { "aria-haspopup": hasSubmenu ? 'menu' : undefined, "aria-expanded": hasSubmenu ? 'false' : undefined, type: "menuitem", text: item.text, secondaryText: item.secondaryText, icon: item.icon, primaryComponent: primaryComponent, badgeIcon: this.config.badgeIcons, selected: item.selected, disabled: item.disabled })));
         };
         this.renderTextForSeparator = (item) => {
             if ('text' in item) {
@@ -91,7 +91,7 @@ export class MenuListRenderer {
         };
     }
     render(items, config = {}) {
-        items = items || [];
+        items || (items = []);
         this.config = Object.assign(Object.assign({}, this.defaultConfig), config);
         this.applyTabIndexToItemAtIndex =
             this.getIndexForWhichToApplyTabIndex(items);

package/dist/collection/components/menu-list/menu-list.js

@@ -88,7 +88,7 @@ export class MenuList {
             iconSize: this.iconSize,
         };
         const html = this.MenuListRenderer.render(this.items, this.config);
-        return h("div", { key: 'df56cd634e8431eefe497bf49bf7767fe7211af3', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: 'd543dcdd212cd774cd4da536fba637212c4afa59', class: "mdc-menu mdc-menu-surface" }, html);
     }
     itemsChanged() {
         setTimeout(() => {

package/dist/collection/components/menu-surface/menu-surface.js

@@ -34,10 +34,7 @@ export class MenuSurface {
         };
         this.handleDocumentClick = (event) => {
             const elementPath = event.composedPath ? event.composedPath() : [];
-            if (!this.open) {
-                return;
-            }
-            if (isDescendant(event.target, this.host)) {
+            if (!this.open || isDescendant(event.target, this.host)) {
                 return;
             }
             if (this.allowClicksElement) {
@@ -82,10 +79,11 @@ export class MenuSurface {
         this.handleKeyDown = (event) => {
             const isEscape = event.key === ESCAPE;
             const isTab = event.key === TAB;
-            if (this.open && (isEscape || isTab)) {
-                event.stopPropagation();
-                this.dismiss.emit();
+            if (!(this.open && (isEscape || isTab))) {
+                return;
             }
+            event.stopPropagation();
+            this.dismiss.emit();
         };
     }
     connectedCallback() {
@@ -105,7 +103,7 @@ export class MenuSurface {
             'mdc-elevation-transition': true,
             'mdc-elevation--z4': true,
         };
-        return (h("div", { key: '61370a07bbfbba621b506644802b10516281150b', class: classList, tabindex: "-1" }, h("slot", { key: '44076f03f8ef4b24ce3805374379ba4e7b01acb5' })));
+        return (h("div", { key: '9bc341ae3ec547e20c882d282cfeb8e876ef067a', class: classList, tabindex: "-1" }, h("slot", { key: '81a18040d209809e41d20d2d37b1a657b8e07c33' })));
     }
     static get is() { return "limel-menu-surface"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notched-outline/notched-outline.js

@@ -59,7 +59,7 @@ export class NotchedOutline {
         this.hasFloatingLabel = false;
     }
     render() {
-        return (h("div", { key: '928b12e7565dd3a827b29e57dfb94cbd668feb91', class: "limel-notched-outline" }, h("slot", { key: 'ae0a6205b1e8aeed3edea040a198ba7faebecc85', name: "content" }), h("span", { key: '84b1fd4feb65005eea9280717dd2cb6d74fc513c', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '4ae9c02d23197109c5ea0721a4f1abfab802822e', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'd7b70aa632b22b7b639bf208ea57fd39a82884e3', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: 'dc6355aacb61f03ab180b619bd8a619cd2c80cb4', class: "limel-notched-outline" }, h("slot", { key: '49297b4ac7c981f840c359a7f536e57f9a92b91f', name: "content" }), h("span", { key: '78018e75d6e77cbd0ca235d5036d29f9360fe2d0', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: 'ae1aaa6291a429db8f376a68609241c2701c6c80', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'd86779e2e34c5bd4138d3d47d127b73af95456d0', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
     }
     renderLabel() {
         if (!this.label) {

package/dist/collection/components/pagination/jump/pagination-jump.js

@@ -93,12 +93,12 @@ export class PaginationJump {
         this.value = String(this.page);
         this.shouldFocusField = true;
     }
-    componentDidRender() {
+    async componentDidRender() {
         if (!this.shouldFocusField) {
             return;
         }
         this.shouldFocusField = false;
-        this.focusField();
+        await this.focusField();
     }
     render() {
         if (!this.open) {
@@ -135,16 +135,18 @@ export class PaginationJump {
      * is enough. Selecting as well, so the page the user is on is both the
      * starting value and out of the way of the first keystroke.
      */
-    focusField() {
+    async focusField() {
         const host = this.field;
-        host === null || host === void 0 ? void 0 : host.componentOnReady().then(() => {
-            // A frame later, so the popover has been put where it belongs
-            // before the field takes the keyboard.
-            requestAnimationFrame(() => {
-                var _a, _b;
-                host.focus();
-                (_b = (_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.select();
-            });
+        if (!host) {
+            return;
+        }
+        await host.componentOnReady();
+        // A frame later, so the popover has been put where it belongs
+        // before the field takes the keyboard.
+        requestAnimationFrame(() => {
+            var _a, _b;
+            host.focus();
+            (_b = (_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.select();
         });
     }
     /**

package/dist/collection/components/pagination/pagination.js

@@ -113,10 +113,11 @@ export class Pagination {
             const page = event.detail;
             this.focusGap(this.openGap);
             this.openGap = undefined;
-            if (this.goTo(page)) {
-                this.awaitedJump = page;
-                this.jumpedFrom = this.view.page;
+            if (!this.goTo(page)) {
+                return;
             }
+            this.awaitedJump = page;
+            this.jumpedFrom = this.view.page;
         };
         // Bound once: a handler built per render is a new identity each time, so
         // every button would have its listener swapped on every page change.
@@ -303,7 +304,7 @@ export class Pagination {
     }
     render() {
         const { slots } = this.view;
-        return (h(Host, { key: 'fac46260ef2a4e1e8d4aad962c90477831b6497f' }, h("nav", { key: '239f0ba745b9a385064c4a2c91a572e70a9e6525', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '82fa3c9fb3fa8063be64d8373158d3d0e93138c1', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: 'f2218cfa9c631d93e39ecee3a9823c3dd73ba505' }, h("nav", { key: '7b1989a9abdbf254b66d3d2780583749a3ecd44e', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: 'ad9af64cb7885d6bb6227d5bb6897a267c1a598e', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,

package/dist/collection/components/picker/picker.js

@@ -132,7 +132,7 @@ export class Picker {
         this.search = async (query) => {
             const timeoutId = setTimeout(() => {
                 this.loading = true;
-            });
+            }, 0);
             const searcher = this.searcher || this.defaultSearcher;
             const result = await searcher(this.textValue);
             // If the search function resolves immediately,
@@ -199,7 +199,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '3596e789685aa295baf079c38f4cc4cab0fa3317', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: '5045ffdd72efce3465448fb8e1ae3044c32ffea2', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }
@@ -483,32 +483,34 @@ export class Picker {
             listElement.focus();
             return;
         }
-        if (isUp) {
-            const listItems = list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
-            const listElement = [...listItems].at(-1);
-            if (!listElement) {
-                return;
-            }
-            event.preventDefault();
-            listElement.focus();
+        if (!isUp) {
+            return;
         }
+        const listItems = list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
+        const listElement = [...listItems].at(-1);
+        if (!listElement) {
+            return;
+        }
+        event.preventDefault();
+        listElement.focus();
     }
     handleSearchResult(query, result) {
         var _a;
-        if (query === this.textValue) {
-            let nextItems = result;
-            if (this.multiple) {
-                const values = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-                nextItems = result.filter((item) => {
-                    if ('separator' in item) {
-                        return true;
-                    }
-                    return !values.includes(item);
-                });
-            }
-            this.items = this.prependSearchHeader(query, nextItems);
-            this.loading = false;
+        if (query !== this.textValue) {
+            return;
         }
+        let nextItems = result;
+        if (this.multiple) {
+            const values = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+            nextItems = result.filter((item) => {
+                if ('separator' in item) {
+                    return true;
+                }
+                return !values.includes(item);
+            });
+        }
+        this.items = this.prependSearchHeader(query, nextItems);
+        this.loading = false;
     }
     hasPickableItems(items) {
         return items.some((item) => !('separator' in item));

package/dist/collection/components/popover/popover.js

@@ -89,10 +89,11 @@ export class Popover {
     }
     watchOpen() {
         this.setupGlobalHandlers();
-        if (!this.open && this.shouldRestoreFocusOnClose) {
-            this.shouldRestoreFocusOnClose = false;
-            setTimeout(this.focusTrigger, 0);
+        if (this.open || !this.shouldRestoreFocusOnClose) {
+            return;
         }
+        this.shouldRestoreFocusOnClose = false;
+        setTimeout(this.focusTrigger, 0);
     }
     connectedCallback() {
         this.setupGlobalHandlers();
@@ -104,8 +105,9 @@ export class Popover {
         if (!this.triggerSlot) {
             return;
         }
-        // eslint-disable-next-line unicorn/no-array-for-each
-        this.triggerSlot.assignedElements().forEach(this.setTriggerAttributes);
+        for (const element of this.triggerSlot.assignedElements()) {
+            this.setTriggerAttributes(element);
+        }
     }
     setupGlobalHandlers() {
         // Stencil keeps firing `@Watch` on a detached instance, so `open` can
@@ -135,16 +137,17 @@ export class Popover {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: 'd34ccb8ce24c315432db83e6e1d998c4d230255f', class: "trigger-anchor" }, h("slot", { key: 'f2ab0bc064a439cecfee0fc75cb160cde227e018', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '047d3643c80c445c8b97f1c30a6b7a8c236beaa9', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '91c6f19807aeda2d37652bce452f6bd3cd6bcc9f', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: '5726846ff3f4ccc50067c63cab387ce9efa34e9b', class: "trigger-anchor" }, h("slot", { key: '9bc0082641e95e2345b0ae3eb548477827420e85', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'fb247bd41c2d0f62f598a0e7d21776661490c485', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '808155682967864b09f4344106cc0d1106f9e2c5', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;
         const clickedInside = portalContains(this.host, element);
-        if (this.open && !clickedInside) {
-            event.stopPropagation();
-            event.preventDefault();
-            this.close.emit();
+        if (!this.open || clickedInside) {
+            return;
         }
+        event.stopPropagation();
+        event.preventDefault();
+        this.close.emit();
     }
     getCssProperties() {
         const propertyNames = [

package/dist/collection/components/popover-surface/popover-surface.js

@@ -8,7 +8,7 @@ export class PopoverSurface {
         this.appendElement();
     }
     render() {
-        return h("div", { key: 'c3f7cda21c76bdd39eba1e8e4e28503561d28a7e', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '246fdc8fe255ae881e4ece6ae20bbb7f34a827b5', class: "limel-popover-surface", tabindex: "0" });
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');

package/dist/collection/components/portal/contains.js

@@ -11,14 +11,15 @@
  */
 export function portalContains(element, child) {
     var _a;
-    if (element.contains(child) || ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(child))) {
-        return true;
-    }
-    const parent = findParent(child);
-    if (!parent) {
-        return false;
-    }
-    return portalContains(element, parent);
+    let current = child;
+    do {
+        if (element.contains(current) ||
+            ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(current))) {
+            return true;
+        }
+        current = findParent(current);
+    } while (current);
+    return false;
 }
 function findParent(element) {
     const portal = element.closest('.limel-portal--container');

package/dist/collection/components/portal/portal.js

@@ -108,13 +108,14 @@ export class Portal {
         this.hideContainer();
         this.attachContainer();
         this.styleContainer();
-        if (this.visible) {
-            this.createPopper();
-            this.showContainer();
+        if (!this.visible) {
+            return;
         }
+        this.createPopper();
+        this.showContainer();
     }
     render() {
-        return h("slot", { key: 'ce5bfa7d65680773e1917e0a6d54256f5852bd65' });
+        return h("slot", { key: '7fd1ebea533dbbd8ff3df343830cc195e0a66555' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -141,11 +142,10 @@ export class Portal {
         Object.assign(this.container, {
             portalSource: this.host,
         });
-        // eslint-disable-next-line unicorn/no-array-for-each
-        content.forEach((element) => {
+        for (const element of content) {
             this.parents.set(element, element.parentElement);
             this.container.append(element);
-        });
+        }
     }
     attachContainer() {
         this.getParent().append(this.container);
@@ -154,14 +154,13 @@ export class Portal {
         if (!this.container) {
             return;
         }
-        // eslint-disable-next-line unicorn/no-array-for-each
-        [...this.container.children].forEach((element) => {
+        for (const element of [...this.container.children]) {
             const parent = this.parents.get(element);
             if (!parent) {
-                return;
+                continue;
             }
             parent.append(element);
-        });
+        }
         this.container.remove();
     }
     hideContainer() {
@@ -184,10 +183,11 @@ export class Portal {
                 return;
             }
             this.container.classList.remove(IS_HIDING_CLASS);
-            if (!this.visible) {
-                this.container.classList.remove(IS_VISIBLE_CLASS);
-                this.destroyPopper();
+            if (this.visible) {
+                return;
             }
+            this.container.classList.remove(IS_VISIBLE_CLASS);
+            this.destroyPopper();
         }, hideAnimationDuration);
     }
     styleContainer() {
@@ -217,8 +217,8 @@ export class Portal {
         return this.getContentWidth(elementContent);
     }
     setContainerStyles() {
-        for (const property of Object.keys(this.containerStyle)) {
-            this.container.style[property] = this.containerStyle[property];
+        for (const [property, value] of Object.entries(this.containerStyle)) {
+            this.container.style[property] = value;
         }
     }
     // Compared against what was last written rather than against

package/dist/collection/components/profile-picture/profile-picture.js

@@ -261,10 +261,11 @@ export class ProfilePicture {
         return undefined;
     }
     revokeObjectUrl() {
-        if (this.objectUrl) {
-            URL.revokeObjectURL(this.objectUrl);
-            this.objectUrl = undefined;
+        if (!this.objectUrl) {
+            return;
         }
+        URL.revokeObjectURL(this.objectUrl);
+        this.objectUrl = undefined;
     }
     static get is() { return "limel-profile-picture"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-flow/progress-flow.js

@@ -93,16 +93,17 @@ export class ProgressFlow {
     }
     scrollToSelectedItem() {
         const selectedElement = this.getElementForSelectedItem();
-        if (selectedElement) {
-            const selectedItemLeftPosition = selectedElement.offsetLeft - this.element.offsetLeft;
-            const selectedElementLeftPositionCentered = selectedItemLeftPosition - this.element.offsetWidth / 2;
-            const selectedElementCentered = selectedElementLeftPositionCentered +
-                selectedElement.offsetWidth / 2;
-            this.element.scrollTo({
-                behavior: 'smooth',
-                left: selectedElementCentered,
-            });
+        if (!selectedElement) {
+            return;
         }
+        const selectedItemLeftPosition = selectedElement.offsetLeft - this.element.offsetLeft;
+        const selectedElementLeftPositionCentered = selectedItemLeftPosition - this.element.offsetWidth / 2;
+        const selectedElementCentered = selectedElementLeftPositionCentered +
+            selectedElement.offsetWidth / 2;
+        this.element.scrollTo({
+            behavior: 'smooth',
+            left: selectedElementCentered,
+        });
     }
     getElementForSelectedItem() {
         return this.element.shadowRoot.querySelector('.flow-item.selected');