@ukic/web-components 3.3.0 → 3.5.0

package/dist/components/ic-navigation-button.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as getBrandForegroundAppearance, b as inheritAttributes, o as onComponentRequiredPropUndefined, i as isSlotUsed, I as IC_INHERITED_ARIA, e as IcBrandForegroundEnum } from './helpers.js';
+import { b as inheritAttributes, o as onComponentRequiredPropUndefined, k as getBrandForegroundAppearance, L as IC_BLOCK_COLOR_COMPONENTS, e as IcBrandForegroundEnum, i as isSlotUsed, I as IC_INHERITED_ARIA } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-button2.js';
 import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
@@ -16,7 +16,6 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
         this.__attachShadow();
         this.inheritedAttributes = {};
         this.hostMutationObserver = null;
-        this.initialAppearance = getBrandForegroundAppearance();
         /**
          * The display mode.
          */
@@ -29,7 +28,9 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         this.theme = "inherit";
-        // triggered when attributes of host element change
+        /**
+         * Triggered when attributes of host element change
+         */
         this.hostMutationCallback = (mutationList) => {
             let forceComponentUpdate = false;
             mutationList.forEach(({ attributeName }) => {
@@ -50,6 +51,7 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
         this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
     }
     componentDidLoad() {
+        this.updateTheme();
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Navigation Button");
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
         this.hostMutationObserver.observe(this.el, {
@@ -57,8 +59,9 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
         });
     }
     componentWillRender() {
-        const iconEl = this.el.querySelector(`[slot="icon"]`);
-        iconEl !== null && iconEl.setAttribute("viewBox", "0 0 24 24");
+        var _a;
+        (_a = this.el
+            .querySelector(`[slot="icon"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
     }
     disconnectedCallback() {
         var _a;
@@ -70,51 +73,40 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
     navBarMenuCloseHandler() {
         this.mode = "navbar";
     }
-    brandChangeHandler(ev) {
-        this.initialAppearance = ev.detail.mode;
+    brandChangeHandler({ detail: { mode } }) {
+        this.updateTheme(mode);
     }
     /**
      * Sets focus on the native `button`.
      */
     async setFocus() {
-        if (this.buttonEl) {
-            this.buttonEl.focus();
-        }
+        var _a;
+        (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+    }
+    updateTheme(mode = getBrandForegroundAppearance()) {
+        var _a;
+        if ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest(IC_BLOCK_COLOR_COMPONENTS))
+            return;
+        this.theme =
+            mode === IcBrandForegroundEnum.Light
+                ? IcBrandForegroundEnum.Dark
+                : IcBrandForegroundEnum.Light;
     }
     render() {
-        const { href, target, rel, download, referrerpolicy } = this;
-        let label = "";
-        let className = "";
-        let variant = "icon";
-        let appearance = this.initialAppearance;
-        let size = "large";
-        let fullWidth = false;
-        let disableTooltip = false;
-        if (this.mode === "menu") {
-            label = this.label;
-            variant = "tertiary";
-            appearance = IcBrandForegroundEnum.Default;
-            size = "medium";
-            fullWidth = true;
-            className = "popout-menu-button";
-            disableTooltip = true;
-        }
+        const { download, href, inheritedAttributes, label, mode, referrerpolicy, rel, target, theme, } = this;
+        const isMenuMode = mode === "menu";
         const buttonProps = {
-            variant,
-            appearance,
-            size,
-            href,
-            target,
-            rel,
             download,
+            href,
             referrerpolicy,
-            fullWidth,
-            disableTooltip,
+            rel,
+            target,
+            theme,
         };
-        return (h(Host, { key: 'a750cb73987d5c9d0c7bcdb6ece9807bcc688c9f', class: {
-                ["in-side-menu"]: this.mode === "menu",
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("ic-button", Object.assign({ key: 'd55eb3e8c54c6bb76e61044af2a5b1a2dddafbf6', class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes, { monochrome: this.mode !== "menu", theme: getBrandForegroundAppearance() == "light" ? "light" : "dark" }), label, h("slot", { key: '4193d9cd02c05a3b12946233cb86256e2c729abc', slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { key: 'a53d6158424e97fddc62b25006f6060b2cbee4c5', name: "badge" }))));
+        return (h(Host, { key: '341c602f37816c5bd021d7d2457a60cc48ec0a4d', class: {
+                "in-side-menu": isMenuMode,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("ic-button", Object.assign({ key: '7f122b31c8584bc6ccea93220a60f1a7754f7985', ref: (el) => (this.buttonEl = el), class: { "popout-menu-button": isMenuMode }, "aria-label": !isMenuMode ? label : null, disableTooltip: isMenuMode, fullWidth: isMenuMode, monochrome: !isMenuMode, size: isMenuMode ? "medium" : "large", variant: isMenuMode ? "tertiary" : "icon" }, buttonProps, inheritedAttributes), isMenuMode ? label : "", h("slot", { key: '68d45cf8961f30491f610d5c009da84350611c1b', slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { key: '43740c1e00ca73197b6d121b6ccf6df550d3b5c7', name: "badge" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -127,8 +119,7 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
         "referrerpolicy": [1],
         "rel": [1],
         "target": [1],
-        "theme": [1],
-        "initialAppearance": [32],
+        "theme": [1025],
         "mode": [32],
         "setFocus": [64]
     }, [[4, "icNavigationMenuOpened", "navBarMenuOpenHandler"], [4, "icNavigationMenuClosed", "navBarMenuCloseHandler"], [4, "brandChange", "brandChangeHandler"]]]);

package/dist/components/ic-navigation-button.js.map

@@ -1 +1 @@
-{"file":"ic-navigation-button.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n\n:host::part(button) {\n  height: 100%;\n  min-height: 2.5rem;\n}\n\n:host(.in-side-menu) ::part(button) {\n  color: var(--ic-top-navigation-icon-active);\n}\n\n:host(.in-side-menu) ::part(button):hover {\n  color: var(--ic-top-navigation-icon-hover);\n  background-color: var(--ic-top-navigation-icon-hover-background);\n}\n\n:host(.in-side-menu) ::part(button):active {\n  color: var(--ic-top-navigation-icon-pressed);\n  background-color: var(--ic-top-navigation-icon-pressed-background);\n}\n\n:host(.in-side-menu) ::slotted(ic-badge) {\n  margin-left: var(--ic-space-xs);\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getBrandForegroundAppearance,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcBrandForegroundNoDefault,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl?: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver | null = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance: IcBrandForegroundNoDefault | IcBrandForeground =\n    getBrandForegroundAppearance();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.initialAppearance = ev.detail.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (attributeName) {\n        const attribute = this.el.getAttribute(attributeName);\n        if (attribute && MUTABLE_ATTRIBUTES.includes(attributeName)) {\n          this.inheritedAttributes[attributeName] = attribute;\n          forceComponentUpdate = true;\n        }\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcBrandForeground | IcBrandForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"medium\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcBrandForegroundEnum.Default;\n      size = \"medium\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"in-side-menu\"]: this.mode === \"menu\",\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n          monochrome={this.mode !== \"menu\"}\n          theme={getBrandForegroundAppearance() == \"light\" ? \"light\" : \"dark\"}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-navigation-button.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n\n:host::part(button) {\n  height: 100%;\n  min-height: 2.5rem;\n}\n\n:host(.in-side-menu) ::part(button) {\n  color: var(--ic-top-navigation-icon-active);\n}\n\n:host(.in-side-menu) ::part(button):hover {\n  color: var(--ic-top-navigation-icon-hover);\n  background-color: var(--ic-top-navigation-icon-hover-background);\n}\n\n:host(.in-side-menu) ::part(button):active {\n  color: var(--ic-top-navigation-icon-pressed);\n  background-color: var(--ic-top-navigation-icon-pressed-background);\n}\n\n:host(.in-side-menu) ::slotted(ic-badge) {\n  margin-left: var(--ic-space-xs);\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  forceUpdate,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  IC_BLOCK_COLOR_COMPONENTS,\n  IC_INHERITED_ARIA,\n} from \"../../utils/constants\";\nimport {\n  getBrandForegroundAppearance,\n  inheritAttributes,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl?: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver | null = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    this.el\n      .querySelector(`[slot=\"icon\"]`)\n      ?.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail: { mode } }: CustomEvent<IcBrand>): void {\n    this.updateTheme(mode);\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.buttonEl?.setFocus();\n  }\n\n  /**\n   * Triggered when attributes of host element change\n   */\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (attributeName) {\n        const attribute = this.el.getAttribute(attributeName);\n        if (attribute && MUTABLE_ATTRIBUTES.includes(attributeName)) {\n          this.inheritedAttributes[attributeName] = attribute;\n          forceComponentUpdate = true;\n        }\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  private updateTheme(\n    mode: IcBrandForeground = getBrandForegroundAppearance()\n  ) {\n    if (this.el.parentElement?.closest(IC_BLOCK_COLOR_COMPONENTS)) return;\n\n    this.theme =\n      mode === IcBrandForegroundEnum.Light\n        ? IcBrandForegroundEnum.Dark\n        : IcBrandForegroundEnum.Light;\n  }\n\n  render() {\n    const {\n      download,\n      href,\n      inheritedAttributes,\n      label,\n      mode,\n      referrerpolicy,\n      rel,\n      target,\n      theme,\n    } = this;\n\n    const isMenuMode = mode === \"menu\";\n\n    const buttonProps = {\n      download,\n      href,\n      referrerpolicy,\n      rel,\n      target,\n      theme,\n    };\n\n    return (\n      <Host\n        class={{\n          \"in-side-menu\": isMenuMode,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <ic-button\n          ref={(el) => (this.buttonEl = el)}\n          class={{ \"popout-menu-button\": isMenuMode }}\n          aria-label={!isMenuMode ? label : null}\n          disableTooltip={isMenuMode}\n          fullWidth={isMenuMode}\n          monochrome={!isMenuMode}\n          size={isMenuMode ? \"medium\" : \"large\"}\n          variant={isMenuMode ? \"tertiary\" : \"icon\"}\n          {...buttonProps}\n          {...inheritedAttributes}\n        >\n          {isMenuMode ? label : \"\"}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-navigation-group.js

@@ -1,11 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, k as getBrandForegroundAppearance, n as getCurrentDeviceSize, L as getNavItemParentDetails } from './helpers.js';
+import { D as DEVICE_SIZES, k as getBrandForegroundAppearance, n as getCurrentDeviceSize, M as getNavItemParentDetails } from './helpers.js';
 import { c as chevronIcon } from './chevron-icon.js';
 import { d as defineCustomElement$2 } from './ic-typography2.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 = /*@__PURE__*/ proxyCustomElement(class NavigationGroup extends HTMLElement {
     constructor() {
         super();
@@ -13,99 +16,75 @@ const NavigationGroup = /*@__PURE__*/ proxyCustomElement(class NavigationGroup e
         this.__attachShadow();
         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.
          */
         this.expandable = false;
+        /**
+         * If `true`, the expandable group will be expanded by default when in an ic-side-navigation component. To enable this prop, `expandable` must also be set to `true`.
+         */
+        this.expanded = true;
         /**
          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         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();
@@ -115,50 +94,46 @@ const NavigationGroup = /*@__PURE__*/ proxyCustomElement(class NavigationGroup e
             }
         };
         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;
@@ -168,63 +143,38 @@ const NavigationGroup = /*@__PURE__*/ proxyCustomElement(class NavigationGroup e
         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;
@@ -252,12 +202,20 @@ const NavigationGroup = /*@__PURE__*/ proxyCustomElement(class NavigationGroup e
         }
     }
     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();
@@ -277,14 +235,14 @@ const NavigationGroup = /*@__PURE__*/ proxyCustomElement(class NavigationGroup e
      * 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) {
@@ -300,43 +258,40 @@ const NavigationGroup = /*@__PURE__*/ proxyCustomElement(class NavigationGroup e
             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: 'd89ce479bb2f5142a2ef6dd2284229a73367c916', 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: '1c16958eaa37fb0d37d04178e7bd2d469af832f6', 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: chevronIcon })))) : isSideNav && !this.isSideNavExpanded ? null : (h("div", { class: navGroupTitleClassNames }, this.renderGroupTitleText())), this.renderNavigationItems()));
+                "chevron-toggle-icon-closed": !!expanded,
+            }, innerHTML: chevronIcon })))) : ((!isSideNav || isSideNavExpanded) && (h("div", { class: navGroupTitleClassNames }, this.renderGroupTitleText()))), this.renderNavigationItems()));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get style() { return IcNavigationGroupStyle0; }
 }, [17, "ic-navigation-group", {
         "expandable": [4],
+        "expanded": [1028],
         "label": [1],
         "theme": [1],
         "deviceSize": [32],
         "dropdownOpen": [32],
-        "expanded": [32],
         "focusStyle": [32],
         "inTopNavSideMenu": [32],
         "navigationType": [32],