@ukic/canary-web-components 3.0.0-canary.17 → 3.0.0-canary.19

package/dist/esm/ic-navigation-group.entry.js

@@ -1,26 +1,28 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { D as DEVICE_SIZES, g as getBrandForegroundAppearance, e as getCurrentDeviceSize, v as getNavItemParentDetails } from './helpers-fb59efa8.js';
+import { D as DEVICE_SIZES, g as getBrandForegroundAppearance, e as getCurrentDeviceSize, v as getNavItemParentDetails } from './helpers-fc03923c.js';
 import { C as Chevron } from './chevron-icon-875b7af2.js';
 
 const icNavigationGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-typography-color:currentcolor}:host(.in-side-menu){border-bottom:var(--ic-border-width) solid\n    var(--ic-divider-background-monochrome);padding:var(--ic-space-md) 0}:host .navigation-group{height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-brand-text-color);display:flex;gap:var(--ic-space-xxs);align-items:center;justify-content:center;padding:0 var(--ic-space-md);transition:var(--ic-easing-transition-slow);position:relative;background:none;border:none;text-align:left;box-sizing:border-box}:host .navigation-group:hover,:host .navigation-group:active,:host .selected{background-color:var(--ic-architectural-20);color:var(--ic-color-text-primary-light);outline:none;cursor:pointer}:host(.in-side-menu) .navigation-group{min-height:2.5rem;width:100%;gap:1.25rem}:host(.in-side-menu) .navigation-group .ic-typography-label{width:100%}:host(.in-side-menu:not(.ic-navigation-group-expandable)) .navigation-group,:host(.in-side-menu) .navigation-group-side-menu-collapsed,:host(.in-side-menu) .navigation-group-side-menu-expanded{color:var(--ic-top-navigation-nav-group-link);justify-content:flex-start;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-expanded{margin-bottom:var(--ic-space-xs)}:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,:host(.in-side-menu) .navigation-group-side-menu-expanded::after{border-style:solid;border-width:0.125em 0.125em 0 0;content:\"\";display:inline-block;min-height:0.45em;position:relative;top:-0.1em;transform:rotate(135deg);vertical-align:top;min-width:0.45em}:host(.in-side-menu) .navigation-group-side-menu-expanded::after{top:0.15em;transform:rotate(-45deg)}:host(:not(.in-side-menu)) .navigation-group:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);z-index:var(--ic-z-index-navigation-item);transition:box-shadow var(--ic-easing-transition-fast)}:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus){background-color:var(--ic-top-navigation-nav-group-hover);cursor:pointer}:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus){background-color:var(--ic-top-navigation-nav-group-pressed)}:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);background:none}:host .navigation-group-dropdown{background-color:var(--ic-top-navigation-menu-background);border-bottom:var(--ic-space-1px) solid var(--ic-top-navigation-menu-border);position:absolute;left:0;right:0;padding:var(--ic-space-xs) var(--ic-space-md);box-shadow:0 0.375rem 0.5rem -0.375rem rgba(0 0 0 / 20%);z-index:calc(var(--ic-z-index-navigation-item) - 1)}:host .navigation-group-dropdown-items-list{list-style:none;display:flex;flex-flow:column wrap;align-content:flex-start;padding-left:var(--ic-space-md);max-height:16.5rem}:host .chevron-toggle-icon-wrapper{display:flex;align-items:center}:host .chevron-toggle-icon-wrapper svg{transform:rotate(90deg);height:var(--ic-space-lg);width:var(--ic-space-lg)}:host .chevron-toggle-icon-closed svg{transform:rotate(-90deg)}:host(.ic-navigation-group-expanded) .grouped-links-wrapper{height:var(--navigation-child-items-height, auto) !important;transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.ic-navigation-group-side-nav) .link,:host(.ic-navigation-group-side-nav) ::slotted(a){height:var(--navigation-child-items-height, auto)}:host(.ic-navigation-group-collapsed) .grouped-links-wrapper{height:0;transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.ic-navigation-group-side-nav) .navigation-group{min-height:var(--navigation-group-height);min-width:100%;width:var(--navigation-group-width, auto);justify-content:var(--navigation-group-justify-content);padding:var(--ic-space-md) var(--navigation-group-expand-toggle-padding)\n    var(--ic-space-xs) var(--ic-space-md)}:host(.ic-navigation-group-side-nav:not(.ic-navigation-group-expandable)) .navigation-group{padding-right:var(--ic-space-md)}:host(.ic-navigation-group-side-nav) .navigation-group:hover,:host(.ic-navigation-group-side-nav) .navigation-group:active,:host(.ic-navigation-group-side-nav) .selected{background-color:var(--navigation-group-hover);color:var(--navigation-group-text-hover)}:host(.ic-navigation-group-side-nav:not(.ic-navigation-group-expandable)) .navigation-group:hover,:host(.ic-navigation-group-side-nav:not(.ic-navigation-group-expandable)) .navigation-group:active,:host(.in-side-menu:not(.ic-navigation-group-expandable)) .navigation-group:hover,:host(.in-side-menu:not(.ic-navigation-group-expandable)) .navigation-group:active{background:none;cursor:auto}:host(.ic-navigation-group-side-nav) .navigation-group:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background:none}:host(.ic-navigation-group-side-nav) .ic-typography-caption{position:var(--navigation-group-title-position);left:var(--navigation-group-title-position-left)}";
 const IcNavigationGroupStyle0 = icNavigationGroupCss;
 
+const IC_NAVIGATION_ITEM = "ic-navigation-item";
+const DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;
+const NODE_NAME = "IC-NAVIGATION-GROUP";
 const NavigationGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.navigationGroupOpened = createEvent(this, "navigationGroupOpened", 7);
         this.navigationGroupExpanded = createEvent(this, "navigationGroupExpanded", 7);
-        this.allGroupedNavigationItems = [];
-        this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;
-        this.IC_NAVIGATION_ITEM = "ic-navigation-item";
+        this.allGroupedNavigationItemHeights = "";
+        this.collapsedNavItemsHeight = null;
+        this.expandedNavItemsHeight = null;
         this.mouseGate = false;
-        this.nodeName = "IC-NAVIGATION-GROUP";
-        this.GROUPED_LINKS_WRAPPER_CLASS = ".grouped-links-wrapper";
         this.deviceSize = DEVICE_SIZES.XL;
         this.dropdownOpen = false;
         this.expanded = true;
         this.focusStyle = getBrandForegroundAppearance();
         this.inTopNavSideMenu = false;
+        this.isSideNavExpanded = false;
         /**
          *  If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.
          */
@@ -30,79 +32,53 @@ const NavigationGroup = class {
          */
         this.theme = "inherit";
         this.sideNavExpandHandler = (event) => {
-            var _a;
             this.isSideNavExpanded = event.detail.sideNavExpanded;
-            const linkWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);
-            if (!linkWrapper)
+            if (!this.linkWrapper || !this.expanded)
                 return;
-            if (this.isSideNavExpanded) {
-                if (this.expanded && this.expandedNavItemsHeight) {
-                    this.setGroupedLinksElementHeight(linkWrapper, this.expandedNavItemsHeight);
-                }
-                else if (this.expanded) {
-                    setTimeout(() => {
-                        this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();
-                        this.setGroupedLinksElementHeight(linkWrapper, this.expandedNavItemsHeight);
-                    }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
-                }
+            const navItemsHeight = this.isSideNavExpanded
+                ? this.expandedNavItemsHeight
+                : this.collapsedNavItemsHeight;
+            if (navItemsHeight) {
+                this.setGroupedLinksElementHeight(navItemsHeight);
             }
             else {
-                if (this.expanded && this.collapsedNavItemsHeight) {
-                    this.setGroupedLinksElementHeight(linkWrapper, this.collapsedNavItemsHeight);
-                }
-                else if (this.expanded) {
-                    setTimeout(() => {
-                        this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();
-                        this.setGroupedLinksElementHeight(linkWrapper, this.collapsedNavItemsHeight);
-                    }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
-                }
+                setTimeout(() => {
+                    if (this.isSideNavExpanded) {
+                        this.expandedNavItemsHeight = this.allGroupedNavigationItemHeights;
+                    }
+                    else {
+                        this.collapsedNavItemsHeight = this.allGroupedNavigationItemHeights;
+                    }
+                    this.setGroupedLinksElementHeight(this.allGroupedNavigationItemHeights);
+                }, DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
             }
         };
-        this.topNavResizedHandler = ({ detail, }) => {
+        this.topNavResizedHandler = ({ detail: { size }, }) => {
             var _a;
-            const { size } = detail;
-            if (size !== this.deviceSize) {
-                this.deviceSize = size;
-                this.inTopNavSideMenu =
-                    size <=
-                        (((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.customMobileBreakpoint) || DEVICE_SIZES.L);
-            }
+            if (size === this.deviceSize)
+                return;
+            this.deviceSize = size;
+            this.inTopNavSideMenu =
+                size <=
+                    (((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.customMobileBreakpoint) ||
+                        DEVICE_SIZES.L);
         };
-        this.setGroupedNavItemTabIndex = (tabIndexValue) => {
-            this.el
-                .querySelectorAll(this.IC_NAVIGATION_ITEM)
-                .forEach((navigationItem) => {
+        this.toggleExpanded = () => {
+            this.expanded = !this.expanded;
+            if (!this.linkWrapper)
+                return;
+            this.setGroupedLinksElementHeight(!this.expanded
+                ? "0"
+                : this.isSideNavExpanded
+                    ? this.expandedNavItemsHeight
+                    : this.collapsedNavItemsHeight);
+            this.el.querySelectorAll(IC_NAVIGATION_ITEM).forEach((navigationItem) => {
                 var _a;
                 const navItem = ((_a = navigationItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("a")) ||
                     navigationItem.querySelector("a");
-                if (navItem) {
-                    navItem.setAttribute("tabindex", tabIndexValue);
-                }
+                navItem === null || navItem === void 0 ? void 0 : navItem.setAttribute("tabindex", this.expanded ? "0" : "-1");
             });
         };
-        this.toggleGroupedLinkWrapperHeight = (wrapper, expanded) => {
-            if (!wrapper)
-                return;
-            if (expanded) {
-                if (this.isSideNavExpanded) {
-                    this.setGroupedLinksElementHeight(wrapper, this.expandedNavItemsHeight);
-                }
-                else {
-                    this.setGroupedLinksElementHeight(wrapper, this.collapsedNavItemsHeight);
-                }
-                this.setGroupedNavItemTabIndex("0");
-            }
-            else {
-                wrapper.style.setProperty("--navigation-child-items-height", "0");
-                this.setGroupedNavItemTabIndex("-1");
-            }
-        };
-        this.toggleExpanded = () => {
-            var _a;
-            this.expanded = !this.expanded;
-            const linkWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);
-            this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);
-        };
         this.handleClick = (ev) => {
             if (this.navigationType === "top" && ev.detail) {
                 this.toggleDropdown();
@@ -112,50 +88,46 @@ const NavigationGroup = class {
             }
         };
         this.handleBlur = (ev) => {
-            const target = ev.relatedTarget;
-            if (!this.el.contains(target)) {
-                this.hideDropdown();
-            }
-        };
-        this.handleTopNavKeydown = (ev) => {
-            if (ev.key === " " || ev.key === "Enter") {
-                this.toggleDropdown();
-            }
-            else if (!this.inTopNavSideMenu && ev.key === "Escape") {
+            if (!this.el.contains(ev.relatedTarget)) {
                 this.hideDropdown();
             }
         };
         this.handleKeydown = (ev) => {
-            if (ev.key === "Enter" || ev.key === " " || ev.key === "Escape") {
-                switch (this.navigationType) {
-                    case "top":
-                        this.handleTopNavKeydown(ev);
-                        break;
-                    case "side":
-                        this.toggleExpanded();
-                        ev.preventDefault();
-                        break;
-                    default:
-                        this.toggleExpanded();
-                        break;
-                }
+            const { key } = ev;
+            if (key !== "Enter" && key !== " " && key !== "Escape")
+                return;
+            switch (this.navigationType) {
+                case "top":
+                    if (key === " " || key === "Enter") {
+                        this.toggleDropdown();
+                    }
+                    else if (!this.inTopNavSideMenu) {
+                        this.hideDropdown();
+                    }
+                    break;
+                case "side":
+                    this.toggleExpanded();
+                    ev.preventDefault();
+                    break;
+                default:
+                    this.toggleExpanded();
+                    break;
             }
         };
         this.handleMouseLeave = (ev) => {
             const relTarget = ev.relatedTarget;
             this.mouseGate = false;
-            if (!this.el.contains(relTarget) &&
-                relTarget !== this.dropdown &&
-                document.activeElement !== this.el &&
-                !this.el.contains(document.activeElement) &&
-                (relTarget === null || relTarget === void 0 ? void 0 : relTarget.nodeName) === this.nodeName &&
-                this.dropdownOpen === true) {
+            if (this.el.contains(relTarget) ||
+                relTarget === this.dropdown ||
+                this.el.contains(document.activeElement))
+                return;
+            if (document.activeElement !== this.el &&
+                (relTarget === null || relTarget === void 0 ? void 0 : relTarget.nodeName) === NODE_NAME &&
+                this.dropdownOpen) {
                 this.mouseGate = true;
                 this.hideDropdown();
             }
-            else if (!this.el.contains(relTarget) &&
-                relTarget !== this.dropdown &&
-                !this.el.contains(document.activeElement)) {
+            else {
                 this.mouseGate = false;
                 setTimeout(() => {
                     this.dropdownOpen ? this.hideDropdown() : null;
@@ -165,63 +137,38 @@ const NavigationGroup = class {
         this.handleMouseEnter = (ev) => {
             const relTarget = ev.relatedTarget;
             document.addEventListener("keydown", this.handleKeydown);
-            if ((relTarget === null || relTarget === void 0 ? void 0 : relTarget.nodeName) === this.nodeName && this.mouseGate === true) {
+            if ((relTarget === null || relTarget === void 0 ? void 0 : relTarget.nodeName) === NODE_NAME && this.mouseGate) {
                 this.showDropdown();
             }
-            else if (this.dropdownOpen === false &&
-                relTarget !== null &&
-                this.mouseGate === false) {
+            else if (!this.dropdownOpen && !this.mouseGate) {
                 this.mouseGate = true;
                 setTimeout(() => {
-                    this.mouseGate && this.showDropdown();
+                    if (this.mouseGate)
+                        this.showDropdown();
                 }, 500);
             }
         };
-        this.renderDropdownGroupedLinks = () => (h("div", { class: {
-                ["navigation-group-dropdown"]: !this.inTopNavSideMenu,
-                ["navigation-group-dropdown-side-menu"]: this.inTopNavSideMenu,
-                ["selected"]: this.dropdownOpen && !this.inTopNavSideMenu,
-            }, onMouseLeave: !this.inTopNavSideMenu ? this.handleMouseLeave : undefined, ref: (el) => (this.dropdown = el) }, h("nav", { class: {
-                ["navigation-group-dropdown-items"]: !this.inTopNavSideMenu,
-            }, "aria-labelledby": "nav-group-title" }, h("ul", null, h("slot", null)))));
-        this.renderGroupedLinks = () => (h("ul", { class: "grouped-links-wrapper" }, h("slot", null)));
-        /**
-         * Gets the total height of navigation links to improve
-         * smoothness of expand/collapse animations
-         */
-        this.getNavigationChildItemsHeight = () => {
-            let navigationChildItemsHeight = 0;
-            this.allGroupedNavigationItems.forEach((navItem) => {
-                navigationChildItemsHeight += navItem.offsetHeight;
-            });
-            return `${navigationChildItemsHeight}px`;
-        };
-        this.setInitialGroupedLinksWrapperHeight = () => {
-            var _a;
-            const linkWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);
-            if (!linkWrapper)
-                return;
-            if (!this.isSideNavExpanded &&
-                !this.collapsedNavItemsHeight &&
-                this.expanded) {
-                this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();
-                this.setGroupedLinksElementHeight(linkWrapper, this.collapsedNavItemsHeight);
-            }
-            if (this.isSideNavExpanded && this.expanded) {
-                this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();
-                this.setGroupedLinksElementHeight(linkWrapper, this.expandedNavItemsHeight);
-            }
-        };
         this.renderGroupTitleText = () => (h("ic-typography", { id: "nav-group-title", variant: this.navigationType === "side" ? "caption" : "label" }, this.label));
         this.renderNavigationItems = () => {
             if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {
-                return this.renderDropdownGroupedLinks();
+                return (h("div", { class: {
+                        [this.inTopNavSideMenu
+                            ? "navigation-group-dropdown-side-menu"
+                            : "navigation-group-dropdown"]: true,
+                        selected: this.dropdownOpen && !this.inTopNavSideMenu,
+                    }, onMouseLeave: !this.inTopNavSideMenu ? this.handleMouseLeave : undefined, ref: (el) => (this.dropdown = el) }, h("nav", { class: {
+                        "navigation-group-dropdown-items": !this.inTopNavSideMenu,
+                    }, "aria-labelledby": "nav-group-title" }, h("ul", null, h("slot", null)))));
             }
             if (this.navigationType !== "top") {
-                return this.renderGroupedLinks();
+                return (h("ul", { ref: (el) => (this.linkWrapper = el), class: "grouped-links-wrapper" }, h("slot", null)));
             }
             return null;
         };
+        this.setGroupedLinksElementHeight = (height) => {
+            var _a;
+            (_a = this.linkWrapper) === null || _a === void 0 ? void 0 : _a.style.setProperty("--navigation-child-items-height", height);
+        };
     }
     disconnectedCallback() {
         var _a, _b;
@@ -249,12 +196,20 @@ const NavigationGroup = class {
         }
     }
     componentDidLoad() {
-        this.allGroupedNavigationItems = Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));
+        this.allGroupedNavigationItemHeights = `${Array.from(this.el.querySelectorAll(IC_NAVIGATION_ITEM)).reduce((childrenHeights, { offsetHeight }) => childrenHeights + offsetHeight, 0)}px`;
         /**
          * debounce is required as the incorrect height was retrieved instantly after
          * componentDidLoad is invoked.
          */
-        setTimeout(() => this.setInitialGroupedLinksWrapperHeight(), this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
+        setTimeout(() => {
+            if (!this.linkWrapper || !this.expanded)
+                return;
+            if (!this.isSideNavExpanded)
+                this.collapsedNavItemsHeight = this.allGroupedNavigationItemHeights;
+            else
+                this.expandedNavItemsHeight = this.allGroupedNavigationItemHeights;
+            this.setGroupedLinksElementHeight(this.allGroupedNavigationItemHeights);
+        }, DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
     }
     childBlurHandler() {
         this.hideDropdown();
@@ -274,14 +229,14 @@ const NavigationGroup = class {
      * Sets focus on the nav item.
      */
     async setFocus() {
-        if (this.groupEl) {
-            this.groupEl.focus();
-        }
+        var _a;
+        (_a = this.groupEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     toggleDropdown() {
         this.dropdownOpen = !this.dropdownOpen;
-        this.inTopNavSideMenu &&
+        if (this.inTopNavSideMenu) {
             this.navigationGroupExpanded.emit({ expanded: this.dropdownOpen });
+        }
     }
     showDropdown() {
         if (!this.dropdownOpen) {
@@ -297,32 +252,29 @@ const NavigationGroup = class {
             this.toggleDropdown();
         }
     }
-    setGroupedLinksElementHeight(groupedNavItemWrapper, height) {
-        groupedNavItemWrapper.style.setProperty("--navigation-child-items-height", height);
-    }
     render() {
-        const { dropdownOpen, expanded, inTopNavSideMenu, expandable } = this;
+        const { dropdownOpen, expanded, inTopNavSideMenu, expandable, theme, isSideNavExpanded, focusStyle, } = this;
+        const getExpandedClassSuffix = (prop) => prop ? "expanded" : "collapsed";
         const navGroupTitleClassNames = {
-            ["navigation-group"]: true,
-            [this.focusStyle]: !inTopNavSideMenu,
-            ["navigation-group-side-menu-collapsed"]: inTopNavSideMenu && !!expandable && !dropdownOpen,
-            ["navigation-group-side-menu-expanded"]: inTopNavSideMenu && !!expandable && dropdownOpen,
-            ["selected"]: dropdownOpen && !inTopNavSideMenu,
+            "navigation-group": true,
+            [focusStyle]: !inTopNavSideMenu,
+            [`navigation-group-side-menu-${getExpandedClassSuffix(dropdownOpen)}`]: inTopNavSideMenu && expandable,
+            selected: dropdownOpen && !inTopNavSideMenu,
         };
         const isSideNav = this.navigationType === "side";
         const isTopNav = this.navigationType === "top";
+        const isTopNavDesktop = !inTopNavSideMenu && isTopNav;
         const ariaExpanded = (isSideNav && expanded) || (isTopNav && dropdownOpen);
-        return (h(Host, { key: 'adb77d5c28a33cdf4e6c65b12122a325cc8f57c5', class: {
-                ["in-side-menu"]: inTopNavSideMenu,
-                "ic-navigation-group-expanded": expanded,
-                "ic-navigation-group-collapsed": !expanded,
-                ["ic-navigation-group-side-nav"]: isSideNav,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-                ["ic-navigation-group-expandable"]: !!expandable,
-            }, role: "listitem" }, this.expandable || (!inTopNavSideMenu && isTopNav) ? (h("button", { onMouseEnter: !inTopNavSideMenu && isTopNav ? this.handleMouseEnter : undefined, onMouseLeave: isTopNav ? this.handleMouseLeave : undefined, onBlur: this.handleBlur, onClick: this.handleClick, onKeyDown: this.handleKeydown, class: navGroupTitleClassNames, ref: (el) => (this.groupEl = el), "aria-expanded": `${ariaExpanded}`, "aria-haspopup": `${!inTopNavSideMenu && isTopNav}` }, this.renderGroupTitleText(), isSideNav && expandable && (h("div", { class: {
+        return (h(Host, { key: 'ae7929d3d2206250e982dbe9475b4ecb63835369', class: {
+                "in-side-menu": inTopNavSideMenu,
+                "ic-navigation-group-expandable": expandable,
+                "ic-navigation-group-side-nav": isSideNav,
+                [`ic-navigation-group-${getExpandedClassSuffix(expanded)}`]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, role: "listitem" }, expandable || isTopNavDesktop ? (h("button", { onMouseEnter: isTopNavDesktop ? this.handleMouseEnter : undefined, onMouseLeave: isTopNav ? this.handleMouseLeave : undefined, onBlur: this.handleBlur, onClick: this.handleClick, onKeyDown: this.handleKeydown, class: navGroupTitleClassNames, ref: (el) => (this.groupEl = el), "aria-expanded": `${ariaExpanded}`, "aria-haspopup": `${isTopNavDesktop}` }, this.renderGroupTitleText(), isSideNav && expandable && (h("div", { class: {
                 "chevron-toggle-icon-wrapper": true,
                 "chevron-toggle-icon-closed": expanded,
-            }, innerHTML: Chevron })))) : isSideNav && !this.isSideNavExpanded ? null : (h("div", { class: navGroupTitleClassNames }, this.renderGroupTitleText())), this.renderNavigationItems()));
+            }, innerHTML: Chevron })))) : ((!isSideNav || isSideNavExpanded) && (h("div", { class: navGroupTitleClassNames }, this.renderGroupTitleText()))), this.renderNavigationItems()));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }