@ukic/web-components 3.0.0-alpha.13 → 3.0.0-alpha.15

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

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-group.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Listen,\n  h,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getBrandForegroundAppearance,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n  IcNavType,\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundNoDefault,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcNavigationOpenEventDetail } from \"./ic-navigation-group.types\";\n\n@Component({\n  tag: \"ic-navigation-group\",\n  styleUrl: \"ic-navigation-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationGroup {\n  private allGroupedNavigationItems: HTMLIcNavigationItemElement[] = [];\n  private collapsedNavItemsHeight: string;\n  private dropdown?: HTMLElement;\n  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;\n  private expandedNavItemsHeight: string;\n  private groupEl?: HTMLElement;\n  private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\n  private isSideNavExpanded: boolean;\n  private mouseGate: boolean = false;\n  private nodeName = \"IC-NAVIGATION-GROUP\";\n  private GROUPED_LINKS_WRAPPER_CLASS = \".grouped-links-wrapper\";\n\n  @Element() el: HTMLIcNavigationGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownOpen: boolean = false;\n  @State() expanded: boolean = true;\n  @State() focusStyle: IcBrandForegroundNoDefault | IcBrandForeground =\n    getBrandForegroundAppearance();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement | null;\n\n  /**\n   *  If `true`, the group will be expandable in the side menu.\n   */\n  @Prop() expandable?: boolean = false;\n\n  /**\n   * The label to display on the group.\n   */\n  @Prop() label!: 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  /**\n   * @internal Emitted when a navigation group opens.\n   */\n  @Event() navigationGroupOpened: EventEmitter<IcNavigationOpenEventDetail>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl?.removeEventListener(\n        \"icSideNavExpanded\",\n        this.sideNavExpandHandler as EventListener\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl?.removeEventListener(\n        \"icTopNavResized\",\n        this.topNavResizedHandler as EventListener\n      );\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    const { navType, parent } = getNavItemParentDetails(this.el);\n    this.navigationType = navType;\n    this.parentEl = parent;\n\n    if (this.navigationType === \"side\") {\n      this.parentEl?.addEventListener(\n        \"icSideNavExpanded\",\n        this.sideNavExpandHandler as EventListener\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl?.addEventListener(\n        \"icTopNavResized\",\n        this.topNavResizedHandler as EventListener\n      );\n      if (\n        this.deviceSize <=\n        (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint!\n      )\n        this.inTopNavSideMenu = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.allGroupedNavigationItems = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n\n    /**\n     * debounce is required as the incorrect height was retrieved instantly after\n     * componentDidLoad is invoked.\n     */\n    setTimeout(\n      () => this.setInitialGroupedLinksWrapperHeight(),\n      this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n    );\n  }\n\n  @Listen(\"childBlur\")\n  childBlurHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"navigationGroupOpened\", { target: \"document\" })\n  handleNavigationGroupOpened(event: CustomEvent): void {\n    if (event.detail.source !== this.el) {\n      this.hideDropdown();\n    }\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.focusStyle = ev.detail.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.groupEl) {\n      this.groupEl.focus();\n    }\n  }\n\n  private sideNavExpandHandler = (event: CustomEvent): void => {\n    this.isSideNavExpanded = event.detail.sideNavExpanded;\n    const linkWrapper = this.el.shadowRoot?.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n\n    if (!linkWrapper) return;\n\n    if (this.isSideNavExpanded) {\n      if (this.expanded && this.expandedNavItemsHeight) {\n        this.setGroupedLinksElementHeight(\n          linkWrapper,\n          this.expandedNavItemsHeight\n        );\n      } else if (this.expanded) {\n        setTimeout(() => {\n          this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n          this.setGroupedLinksElementHeight(\n            linkWrapper,\n            this.expandedNavItemsHeight\n          );\n        }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n      }\n    } else {\n      if (this.expanded && this.collapsedNavItemsHeight) {\n        this.setGroupedLinksElementHeight(\n          linkWrapper,\n          this.collapsedNavItemsHeight\n        );\n      } else if (this.expanded) {\n        setTimeout(() => {\n          this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n          this.setGroupedLinksElementHeight(\n            linkWrapper,\n            this.collapsedNavItemsHeight\n          );\n        }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n      }\n    }\n  };\n\n  private topNavResizedHandler = ({\n    detail,\n  }: CustomEvent<{ size: number }>): void => {\n    const { size } = detail;\n    if (size !== this.deviceSize) {\n      this.deviceSize = size;\n      this.inTopNavSideMenu =\n        size <=\n        ((this.parentEl as HTMLIcTopNavigationElement)\n          ?.customMobileBreakpoint || DEVICE_SIZES.L);\n    }\n  };\n\n  private toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  private setGroupedNavItemTabIndex = (tabIndexValue: string) => {\n    this.el\n      .querySelectorAll(this.IC_NAVIGATION_ITEM)\n      .forEach((navigationItem) => {\n        const navItem =\n          navigationItem.shadowRoot?.querySelector(\"a\") ||\n          navigationItem.querySelector(\"a\");\n        if (navItem) {\n          navItem.setAttribute(\"tabindex\", tabIndexValue);\n        }\n      });\n  };\n\n  private toggleGroupedLinkWrapperHeight = (\n    wrapper: HTMLElement,\n    expanded: boolean\n  ) => {\n    if (!wrapper) return;\n\n    if (expanded) {\n      if (this.isSideNavExpanded) {\n        this.setGroupedLinksElementHeight(wrapper, this.expandedNavItemsHeight);\n      } else {\n        this.setGroupedLinksElementHeight(\n          wrapper,\n          this.collapsedNavItemsHeight\n        );\n      }\n      this.setGroupedNavItemTabIndex(\"0\");\n    } else {\n      wrapper.style.setProperty(\"--navigation-child-items-height\", \"0\");\n      this.setGroupedNavItemTabIndex(\"-1\");\n    }\n  };\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n    const linkWrapper = this.el.shadowRoot?.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n    this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);\n  };\n\n  private showDropdown() {\n    if (!this.dropdownOpen) {\n      this.navigationGroupOpened.emit({\n        source: this.el,\n      });\n\n      this.toggleDropdown();\n    }\n  }\n\n  private hideDropdown() {\n    document.removeEventListener(\"keydown\", this.handleKeydown);\n    if (this.dropdownOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  private handleClick = (ev: MouseEvent) => {\n    if (this.navigationType === \"top\" && ev.detail) {\n      this.toggleDropdown();\n    } else {\n      this.toggleExpanded();\n    }\n  };\n\n  private handleBlur = (ev: FocusEvent) => {\n    const target = ev.relatedTarget as HTMLElement;\n    if (!this.el.contains(target)) {\n      this.hideDropdown();\n    }\n  };\n\n  private handleTopNavKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \" \" || ev.key === \"Enter\") {\n      this.toggleDropdown();\n    } else if (!this.inTopNavSideMenu && ev.key === \"Escape\") {\n      this.hideDropdown();\n    }\n  };\n\n  private handleKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Enter\" || ev.key === \" \" || ev.key === \"Escape\") {\n      switch (this.navigationType) {\n        case \"top\":\n          this.handleTopNavKeydown(ev as KeyboardEvent);\n          break;\n        case \"side\":\n          this.toggleExpanded();\n          ev.preventDefault();\n          break;\n        default:\n          this.toggleExpanded();\n          break;\n      }\n    }\n  };\n\n  private handleMouseLeave = (ev: MouseEvent) => {\n    const relTarget = ev.relatedTarget as HTMLElement;\n\n    this.mouseGate = false;\n\n    if (\n      !this.el.contains(relTarget) &&\n      relTarget !== this.dropdown &&\n      document.activeElement !== this.el &&\n      !this.el.contains(document.activeElement) &&\n      relTarget?.nodeName === this.nodeName &&\n      this.dropdownOpen === true\n    ) {\n      this.mouseGate = true;\n      this.hideDropdown();\n    } else if (\n      !this.el.contains(relTarget) &&\n      relTarget !== this.dropdown &&\n      !this.el.contains(document.activeElement)\n    ) {\n      this.mouseGate = false;\n      setTimeout(() => {\n        this.dropdownOpen ? this.hideDropdown() : null;\n      }, 500);\n    }\n  };\n\n  private handleMouseEnter = (ev: MouseEvent) => {\n    const relTarget = ev.relatedTarget as HTMLElement;\n    document.addEventListener(\"keydown\", this.handleKeydown);\n\n    if (relTarget?.nodeName === this.nodeName && this.mouseGate === true) {\n      this.showDropdown();\n    } else if (\n      this.dropdownOpen === false &&\n      relTarget !== null &&\n      this.mouseGate === false\n    ) {\n      this.mouseGate = true;\n      setTimeout(() => {\n        this.mouseGate && this.showDropdown();\n      }, 500);\n    }\n  };\n\n  private renderDropdownGroupedLinks = (): HTMLDivElement => (\n    <div\n      class={{\n        [\"navigation-group-dropdown\"]: !this.inTopNavSideMenu,\n        [\"navigation-group-dropdown-side-menu\"]: this.inTopNavSideMenu,\n        [\"selected\"]: this.dropdownOpen && !this.inTopNavSideMenu,\n      }}\n      onMouseLeave={!this.inTopNavSideMenu ? this.handleMouseLeave : undefined}\n      ref={(el) => (this.dropdown = el)}\n    >\n      <nav\n        class={{\n          [\"navigation-group-dropdown-items\"]: !this.inTopNavSideMenu,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </nav>\n    </div>\n  );\n\n  private renderGroupedLinks = (): HTMLDivElement => (\n    <ul class=\"grouped-links-wrapper\">\n      <slot></slot>\n    </ul>\n  );\n\n  /**\n   * Gets the total height of navigation links to improve\n   * smoothness of expand/collapse animations\n   */\n  private getNavigationChildItemsHeight = (): string => {\n    let navigationChildItemsHeight = 0;\n    this.allGroupedNavigationItems.forEach((navItem) => {\n      navigationChildItemsHeight += navItem.offsetHeight;\n    });\n\n    return `${navigationChildItemsHeight}px`;\n  };\n\n  private setInitialGroupedLinksWrapperHeight = () => {\n    const linkWrapper = this.el.shadowRoot?.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n\n    if (!linkWrapper) return;\n\n    if (\n      !this.isSideNavExpanded &&\n      !this.collapsedNavItemsHeight &&\n      this.expanded\n    ) {\n      this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n      this.setGroupedLinksElementHeight(\n        linkWrapper,\n        this.collapsedNavItemsHeight\n      );\n    }\n\n    if (this.isSideNavExpanded && this.expanded) {\n      this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n      this.setGroupedLinksElementHeight(\n        linkWrapper,\n        this.expandedNavItemsHeight\n      );\n    }\n  };\n\n  private renderNavigationItems = (): HTMLDivElement | null => {\n    if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {\n      return this.renderDropdownGroupedLinks();\n    }\n\n    if (this.navigationType !== \"top\") {\n      return this.renderGroupedLinks();\n    }\n\n    return null;\n  };\n\n  private setGroupedLinksElementHeight(\n    groupedNavItemWrapper: HTMLElement,\n    height: string\n  ) {\n    groupedNavItemWrapper.style.setProperty(\n      \"--navigation-child-items-height\",\n      height\n    );\n  }\n\n  render() {\n    const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n\n    return (\n      <Host\n        class={{\n          [\"in-side-menu\"]: inTopNavSideMenu,\n          \"ic-navigation-group-expanded\": this.expanded,\n          \"ic-navigation-group-collapsed\": !this.expanded,\n          [\"ic-navigation-group-side-nav\"]: this.navigationType === \"side\",\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n        role=\"listitem\"\n      >\n        <button\n          onMouseEnter={\n            !inTopNavSideMenu && this.navigationType === \"top\"\n              ? this.handleMouseEnter\n              : undefined\n          }\n          onMouseLeave={\n            this.navigationType === \"top\" ? this.handleMouseLeave : undefined\n          }\n          tabindex={inTopNavSideMenu && !expandable ? \"-1\" : \"0\"}\n          onBlur={this.handleBlur}\n          onClick={expandable ? this.handleClick : undefined}\n          onKeyDown={this.handleKeydown}\n          class={{\n            [\"navigation-group\"]: true,\n            [this.focusStyle]: !inTopNavSideMenu,\n            [\"navigation-group-side-menu\"]: inTopNavSideMenu && !expandable,\n            [\"navigation-group-side-menu-collapsed\"]:\n              inTopNavSideMenu && !!expandable && !dropdownOpen,\n            [\"navigation-group-side-menu-expanded\"]:\n              inTopNavSideMenu && !!expandable && dropdownOpen,\n            [\"selected\"]: dropdownOpen && !inTopNavSideMenu,\n          }}\n          ref={(el) => (this.groupEl = el)}\n          aria-expanded={`${dropdownOpen || this.expanded}`}\n          aria-haspopup={`${\n            !inTopNavSideMenu && this.navigationType === \"top\"\n          }`}\n        >\n          <ic-typography\n            variant={this.navigationType === \"side\" ? \"caption\" : \"label\"}\n          >\n            {label}\n          </ic-typography>\n          {this.navigationType === \"side\" && expandable && (\n            <div\n              class={{\n                \"chevron-toggle-icon-wrapper\": true,\n                \"chevron-toggle-icon-closed\": this.expanded,\n              }}\n              innerHTML={chevronIcon}\n            ></div>\n          )}\n        </button>\n        {this.renderNavigationItems()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-group.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Listen,\n  h,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getBrandForegroundAppearance,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n  IcNavType,\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundNoDefault,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n  IcNavigationExpandEventDetail,\n  IcNavigationOpenEventDetail,\n} from \"./ic-navigation-group.types\";\n\n@Component({\n  tag: \"ic-navigation-group\",\n  styleUrl: \"ic-navigation-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationGroup {\n  private allGroupedNavigationItems: HTMLIcNavigationItemElement[] = [];\n  private collapsedNavItemsHeight: string;\n  private dropdown?: HTMLElement;\n  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;\n  private expandedNavItemsHeight: string;\n  private groupEl?: HTMLElement;\n  private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\n  private mouseGate: boolean = false;\n  private nodeName = \"IC-NAVIGATION-GROUP\";\n  private GROUPED_LINKS_WRAPPER_CLASS = \".grouped-links-wrapper\";\n\n  @Element() el: HTMLIcNavigationGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownOpen: boolean = false;\n  @State() expanded: boolean = true;\n  @State() focusStyle: IcBrandForegroundNoDefault | IcBrandForeground =\n    getBrandForegroundAppearance();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement | null;\n  @State() isSideNavExpanded: boolean;\n\n  /**\n   *  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.\n   */\n  @Prop() expandable?: boolean = false;\n\n  /**\n   * The label to display on the group.\n   */\n  @Prop() label!: 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  /**\n   * @internal Emitted when a navigation group is opened - when within an ic-top-navigation at large screen sizes.\n   */\n  @Event() navigationGroupOpened: EventEmitter<IcNavigationOpenEventDetail>;\n\n  /**\n   * @internal Emitted when a navigation group is expanded - when within an ic-top-navigation at small screen sizes.\n   */\n  @Event() navigationGroupExpanded: EventEmitter<IcNavigationExpandEventDetail>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl?.removeEventListener(\n        \"icSideNavExpanded\",\n        this.sideNavExpandHandler as EventListener\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl?.removeEventListener(\n        \"icTopNavResized\",\n        this.topNavResizedHandler as EventListener\n      );\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    const { navType, parent } = getNavItemParentDetails(this.el);\n    this.navigationType = navType;\n    this.parentEl = parent;\n\n    if (this.navigationType === \"side\") {\n      this.parentEl?.addEventListener(\n        \"icSideNavExpanded\",\n        this.sideNavExpandHandler as EventListener\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl?.addEventListener(\n        \"icTopNavResized\",\n        this.topNavResizedHandler as EventListener\n      );\n      if (\n        this.deviceSize <=\n        (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint!\n      )\n        this.inTopNavSideMenu = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.allGroupedNavigationItems = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n\n    /**\n     * debounce is required as the incorrect height was retrieved instantly after\n     * componentDidLoad is invoked.\n     */\n    setTimeout(\n      () => this.setInitialGroupedLinksWrapperHeight(),\n      this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n    );\n  }\n\n  @Listen(\"childBlur\")\n  childBlurHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"navigationGroupOpened\", { target: \"document\" })\n  handleNavigationGroupOpened(event: CustomEvent): void {\n    if (event.detail.source !== this.el) {\n      this.hideDropdown();\n    }\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.focusStyle = ev.detail.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.groupEl) {\n      this.groupEl.focus();\n    }\n  }\n\n  private sideNavExpandHandler = (event: CustomEvent): void => {\n    this.isSideNavExpanded = event.detail.sideNavExpanded;\n    const linkWrapper = this.el.shadowRoot?.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n\n    if (!linkWrapper) return;\n\n    if (this.isSideNavExpanded) {\n      if (this.expanded && this.expandedNavItemsHeight) {\n        this.setGroupedLinksElementHeight(\n          linkWrapper,\n          this.expandedNavItemsHeight\n        );\n      } else if (this.expanded) {\n        setTimeout(() => {\n          this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n          this.setGroupedLinksElementHeight(\n            linkWrapper,\n            this.expandedNavItemsHeight\n          );\n        }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n      }\n    } else {\n      if (this.expanded && this.collapsedNavItemsHeight) {\n        this.setGroupedLinksElementHeight(\n          linkWrapper,\n          this.collapsedNavItemsHeight\n        );\n      } else if (this.expanded) {\n        setTimeout(() => {\n          this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n          this.setGroupedLinksElementHeight(\n            linkWrapper,\n            this.collapsedNavItemsHeight\n          );\n        }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n      }\n    }\n  };\n\n  private topNavResizedHandler = ({\n    detail,\n  }: CustomEvent<{ size: number }>): void => {\n    const { size } = detail;\n    if (size !== this.deviceSize) {\n      this.deviceSize = size;\n      this.inTopNavSideMenu =\n        size <=\n        ((this.parentEl as HTMLIcTopNavigationElement)\n          ?.customMobileBreakpoint || DEVICE_SIZES.L);\n    }\n  };\n\n  private toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n    this.inTopNavSideMenu &&\n      this.navigationGroupExpanded.emit({ expanded: this.dropdownOpen });\n  }\n\n  private setGroupedNavItemTabIndex = (tabIndexValue: string) => {\n    this.el\n      .querySelectorAll(this.IC_NAVIGATION_ITEM)\n      .forEach((navigationItem) => {\n        const navItem =\n          navigationItem.shadowRoot?.querySelector(\"a\") ||\n          navigationItem.querySelector(\"a\");\n        if (navItem) {\n          navItem.setAttribute(\"tabindex\", tabIndexValue);\n        }\n      });\n  };\n\n  private toggleGroupedLinkWrapperHeight = (\n    wrapper: HTMLElement,\n    expanded: boolean\n  ) => {\n    if (!wrapper) return;\n\n    if (expanded) {\n      if (this.isSideNavExpanded) {\n        this.setGroupedLinksElementHeight(wrapper, this.expandedNavItemsHeight);\n      } else {\n        this.setGroupedLinksElementHeight(\n          wrapper,\n          this.collapsedNavItemsHeight\n        );\n      }\n      this.setGroupedNavItemTabIndex(\"0\");\n    } else {\n      wrapper.style.setProperty(\"--navigation-child-items-height\", \"0\");\n      this.setGroupedNavItemTabIndex(\"-1\");\n    }\n  };\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n    const linkWrapper = this.el.shadowRoot?.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n    this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);\n  };\n\n  private showDropdown() {\n    if (!this.dropdownOpen) {\n      this.navigationGroupOpened.emit({\n        source: this.el,\n      });\n\n      this.toggleDropdown();\n    }\n  }\n\n  private hideDropdown() {\n    document.removeEventListener(\"keydown\", this.handleKeydown);\n    if (this.dropdownOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  private handleClick = (ev: MouseEvent) => {\n    if (this.navigationType === \"top\" && ev.detail) {\n      this.toggleDropdown();\n    } else {\n      this.toggleExpanded();\n    }\n  };\n\n  private handleBlur = (ev: FocusEvent) => {\n    const target = ev.relatedTarget as HTMLElement;\n    if (!this.el.contains(target)) {\n      this.hideDropdown();\n    }\n  };\n\n  private handleTopNavKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \" \" || ev.key === \"Enter\") {\n      this.toggleDropdown();\n    } else if (!this.inTopNavSideMenu && ev.key === \"Escape\") {\n      this.hideDropdown();\n    }\n  };\n\n  private handleKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Enter\" || ev.key === \" \" || ev.key === \"Escape\") {\n      switch (this.navigationType) {\n        case \"top\":\n          this.handleTopNavKeydown(ev as KeyboardEvent);\n          break;\n        case \"side\":\n          this.toggleExpanded();\n          ev.preventDefault();\n          break;\n        default:\n          this.toggleExpanded();\n          break;\n      }\n    }\n  };\n\n  private handleMouseLeave = (ev: MouseEvent) => {\n    const relTarget = ev.relatedTarget as HTMLElement;\n\n    this.mouseGate = false;\n\n    if (\n      !this.el.contains(relTarget) &&\n      relTarget !== this.dropdown &&\n      document.activeElement !== this.el &&\n      !this.el.contains(document.activeElement) &&\n      relTarget?.nodeName === this.nodeName &&\n      this.dropdownOpen === true\n    ) {\n      this.mouseGate = true;\n      this.hideDropdown();\n    } else if (\n      !this.el.contains(relTarget) &&\n      relTarget !== this.dropdown &&\n      !this.el.contains(document.activeElement)\n    ) {\n      this.mouseGate = false;\n      setTimeout(() => {\n        this.dropdownOpen ? this.hideDropdown() : null;\n      }, 500);\n    }\n  };\n\n  private handleMouseEnter = (ev: MouseEvent) => {\n    const relTarget = ev.relatedTarget as HTMLElement;\n    document.addEventListener(\"keydown\", this.handleKeydown);\n\n    if (relTarget?.nodeName === this.nodeName && this.mouseGate === true) {\n      this.showDropdown();\n    } else if (\n      this.dropdownOpen === false &&\n      relTarget !== null &&\n      this.mouseGate === false\n    ) {\n      this.mouseGate = true;\n      setTimeout(() => {\n        this.mouseGate && this.showDropdown();\n      }, 500);\n    }\n  };\n\n  private renderDropdownGroupedLinks = (): HTMLDivElement => (\n    <div\n      class={{\n        [\"navigation-group-dropdown\"]: !this.inTopNavSideMenu,\n        [\"navigation-group-dropdown-side-menu\"]: this.inTopNavSideMenu,\n        [\"selected\"]: this.dropdownOpen && !this.inTopNavSideMenu,\n      }}\n      onMouseLeave={!this.inTopNavSideMenu ? this.handleMouseLeave : undefined}\n      ref={(el) => (this.dropdown = el)}\n    >\n      <nav\n        class={{\n          [\"navigation-group-dropdown-items\"]: !this.inTopNavSideMenu,\n        }}\n        aria-labelledby=\"nav-group-title\"\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </nav>\n    </div>\n  );\n\n  private renderGroupedLinks = (): HTMLDivElement => (\n    <ul class=\"grouped-links-wrapper\">\n      <slot></slot>\n    </ul>\n  );\n\n  /**\n   * Gets the total height of navigation links to improve\n   * smoothness of expand/collapse animations\n   */\n  private getNavigationChildItemsHeight = (): string => {\n    let navigationChildItemsHeight = 0;\n    this.allGroupedNavigationItems.forEach((navItem) => {\n      navigationChildItemsHeight += navItem.offsetHeight;\n    });\n\n    return `${navigationChildItemsHeight}px`;\n  };\n\n  private setInitialGroupedLinksWrapperHeight = () => {\n    const linkWrapper = this.el.shadowRoot?.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n\n    if (!linkWrapper) return;\n\n    if (\n      !this.isSideNavExpanded &&\n      !this.collapsedNavItemsHeight &&\n      this.expanded\n    ) {\n      this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n      this.setGroupedLinksElementHeight(\n        linkWrapper,\n        this.collapsedNavItemsHeight\n      );\n    }\n\n    if (this.isSideNavExpanded && this.expanded) {\n      this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n      this.setGroupedLinksElementHeight(\n        linkWrapper,\n        this.expandedNavItemsHeight\n      );\n    }\n  };\n\n  private renderGroupTitleText = (): HTMLIcTypographyElement => (\n    <ic-typography\n      id=\"nav-group-title\"\n      variant={this.navigationType === \"side\" ? \"caption\" : \"label\"}\n    >\n      {this.label}\n    </ic-typography>\n  );\n\n  private renderNavigationItems = (): HTMLDivElement | null => {\n    if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {\n      return this.renderDropdownGroupedLinks();\n    }\n\n    if (this.navigationType !== \"top\") {\n      return this.renderGroupedLinks();\n    }\n\n    return null;\n  };\n\n  private setGroupedLinksElementHeight(\n    groupedNavItemWrapper: HTMLElement,\n    height: string\n  ) {\n    groupedNavItemWrapper.style.setProperty(\n      \"--navigation-child-items-height\",\n      height\n    );\n  }\n\n  render() {\n    const { dropdownOpen, inTopNavSideMenu, expandable } = this;\n\n    const navGroupTitleClassNames = {\n      [\"navigation-group\"]: true,\n      [this.focusStyle]: !inTopNavSideMenu,\n      [\"navigation-group-side-menu-collapsed\"]:\n        inTopNavSideMenu && !!expandable && !dropdownOpen,\n      [\"navigation-group-side-menu-expanded\"]:\n        inTopNavSideMenu && !!expandable && dropdownOpen,\n      [\"selected\"]: dropdownOpen && !inTopNavSideMenu,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"in-side-menu\"]: inTopNavSideMenu,\n          \"ic-navigation-group-expanded\": this.expanded,\n          \"ic-navigation-group-collapsed\": !this.expanded,\n          [\"ic-navigation-group-side-nav\"]: this.navigationType === \"side\",\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          [\"ic-navigation-group-expandable\"]: !!expandable,\n        }}\n        role=\"listitem\"\n      >\n        {this.expandable ||\n        (!inTopNavSideMenu && this.navigationType === \"top\") ? (\n          <button\n            onMouseEnter={\n              !inTopNavSideMenu && this.navigationType === \"top\"\n                ? this.handleMouseEnter\n                : undefined\n            }\n            onMouseLeave={\n              this.navigationType === \"top\" ? this.handleMouseLeave : undefined\n            }\n            onBlur={this.handleBlur}\n            onClick={this.handleClick}\n            onKeyDown={this.handleKeydown}\n            class={navGroupTitleClassNames}\n            ref={(el) => (this.groupEl = el)}\n            aria-expanded={`${dropdownOpen || this.expanded}`}\n            aria-haspopup={`${\n              !inTopNavSideMenu && this.navigationType === \"top\"\n            }`}\n          >\n            {this.renderGroupTitleText()}\n            {this.navigationType === \"side\" && expandable && (\n              <div\n                class={{\n                  \"chevron-toggle-icon-wrapper\": true,\n                  \"chevron-toggle-icon-closed\": this.expanded,\n                }}\n                innerHTML={chevronIcon}\n              ></div>\n            )}\n          </button>\n        ) : this.navigationType === \"side\" && !this.isSideNavExpanded ? null : (\n          <div class={navGroupTitleClassNames}>\n            {this.renderGroupTitleText()}\n          </div>\n        )}\n        {this.renderNavigationItems()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-navigation-group/ic-navigation-group.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-group.types.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IcNavigationOpenEventDetail {\n  source: HTMLElement;\n}\n"]}
+{"version":3,"file":"ic-navigation-group.types.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IcNavigationOpenEventDetail {\n  source: HTMLElement;\n}\n\nexport interface IcNavigationExpandEventDetail {\n  expanded: boolean;\n}\n"]}

package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js

@@ -1,5 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { getSlot, getSlotContent, isSlotUsed } from "../../utils/helpers";
+const NAV_GROUP_TAG = "IC-NAVIGATION-GROUP";
+const NAV_ITEM_TAG = "IC-NAVIGATION-ITEM";
 /**
  * @slot navigation - Content will be rendered at top of panel.
  * @slot buttons - Content will be rendered above version info and below navigation.
@@ -23,6 +25,21 @@ export class NavigationMenu {
          * The version info to display.
          */
         this.version = "";
+        this.setLastTabStop = (lastNavGroupExpanded) => {
+            let lastEl = this.navigationEls[this.navigationEls.length - 1];
+            if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {
+                const childNavItems = lastEl.children;
+                lastEl = childNavItems[childNavItems.length - 1];
+            }
+            if (lastEl.tagName === NAV_ITEM_TAG) {
+                //check for slotted content i.e. react router link
+                const slotContent = getSlot(lastEl, "navigation-item");
+                if (slotContent !== null) {
+                    lastEl = slotContent;
+                }
+            }
+            this.lastTabStop = lastEl;
+        };
         this.closeMenu = () => {
             this.icNavigationMenuClose.emit();
         };
@@ -35,8 +52,8 @@ export class NavigationMenu {
             if (this.lastTabStop !== null) {
                 switch (this.lastTabStop.tagName) {
                     case "IC-NAVIGATION-BUTTON":
-                    case "IC-NAVIGATION-ITEM":
-                    case "IC-NAVIGATION-GROUP":
+                    case NAV_ITEM_TAG:
+                    case NAV_GROUP_TAG:
                         focusEl = this.lastTabStop;
                         focusEl.focus();
                         break;
@@ -49,15 +66,20 @@ export class NavigationMenu {
     }
     componentWillLoad() {
         this.navBarEl = document.querySelector("ic-top-navigation");
-        const navigationEls = getSlotContent(this.el, "navigation");
-        if (navigationEls) {
+        this.navigationEls = getSlotContent(this.el, "navigation");
+        if (this.navigationEls) {
             this.hasNavigation = true;
-            const lastEl = navigationEls[navigationEls.length - 1];
-            if (lastEl.tagName === "IC-NAVIGATION-ITEM") {
+            const lastEl = this.navigationEls[this.navigationEls.length - 1];
+            if (lastEl.tagName === NAV_ITEM_TAG) {
                 this.navItemAboveButtons = true;
             }
-            const firstEl = navigationEls[0];
-            if (firstEl.tagName === "IC-NAVIGATION-GROUP") {
+            else if (lastEl.tagName === NAV_GROUP_TAG) {
+                lastEl.addEventListener("navigationGroupExpanded", ((event) => {
+                    this.setLastTabStop(event.detail.expanded);
+                }));
+            }
+            const firstEl = this.navigationEls[0];
+            if (firstEl.tagName === NAV_GROUP_TAG) {
                 this.navGroupFirst = true;
             }
         }
@@ -67,16 +89,8 @@ export class NavigationMenu {
             this.lastTabStop = buttonContent[buttonContent.length - 1];
         }
         else {
-            if (this.hasNavigation && navigationEls) {
-                const lastEl = navigationEls[navigationEls.length - 1];
-                //check for slotted content i.e. react router link
-                const slotContent = getSlot(lastEl, "navigation-item");
-                if (slotContent !== null) {
-                    this.lastTabStop = slotContent;
-                }
-                else {
-                    this.lastTabStop = lastEl;
-                }
+            if (this.hasNavigation && this.navigationEls) {
+                this.setLastTabStop(false);
             }
         }
     }
@@ -109,16 +123,16 @@ export class NavigationMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'e9ecbbb6dd588afa6020ebdc5fd4b9f3b9d6d17d', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: 'a11a0b572d3134f644b81a65b2183f3831cf7eef', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: 'ff9724d8a0b3bf3071d9cfc9b44bcbbe1a63592e', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: '59a95028fc7047fbc0b25a8bf1c8b702758ff0c7', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: '925162fcf3432baaabfac61766b0833a65ff7413', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: '4c8aefb471b0f993ec4789662adae82798cfe364', class: {
+        return (h(Host, { key: 'd8a429fb76fa3a1ef80580957fd6481e240f5317', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: '7bf2fffdc59f70baa6674deae32a1bc4b94ad1c7', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: '5f040801d741e34fa84396292a7ff2e6c371c004', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: 'e1b5a6eb1689c24845f8dde72d4b4439333889a2', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: 'cfe33959155fc33481c1d71b43e740c97d59447f', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: 'd6bcbb09f3477305ec0dacd2274d7be1b92818c4', class: {
                 ["menu-close-button-container"]: true,
                 ["nav-group-first"]: this.navGroupFirst,
-            } }, h("ic-button", { key: '5f51478c203469b9dd182c2b53f5f47de12d7cf3', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: 'a27d75cdc971183b31193d2e8b5476f4fc4af2fc', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9df95971b7e3d2ddc31c7e6c610a33087da046fe', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { key: 'c5ea5be8dff71b36b4933f899877370ba2c93709', name: "navigation" })), this.hasButtons && (h("div", { key: 'e620a0c3deb6adf1f892fda537b759757bf84d42', class: {
+            } }, h("ic-button", { key: '29c00c1baf94e77fc12c4f5808b7f959261b9307', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: '8117252bd49a7fb0a884730ed79d059955cd973e', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f7b68f7e0b0860dc30f3477ef49f3b9da41e2625', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { key: '42a9be2b531c8aeffd12ecbe1b8b089121416def', name: "navigation" })), this.hasButtons && (h("div", { key: '53bd2be53748f6ce6aff7d835e2fa05ae4a4302f', class: {
                 ["menu-buttons-container"]: true,
                 ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
-            } }, h("slot", { key: 'd5050cea88cc2a0e9ceebcf7c299d2cfba25d30b', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: '26bb00f5b7a9b926be7c20d6855874997595a395', class: {
+            } }, h("slot", { key: 'fc5df99477f01b812d5ff4fdcadf8766a613734d', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: '74d83ccdcd72f225733da95a63313d1ac1fc9cbd', class: {
                 ["menu-status-version-container"]: true,
                 ["status-version-no-buttons"]: !this.hasButtons,
-            } }, this.status !== "" && (h("div", { key: '44f8e916cb8cda5d2708c94f4a682f8617b09a03', class: "menu-status" }, h("ic-typography", { key: 'eed2bd09e04fc12e76505b50da937bbd9eaed88d', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: '53cd05a0b7f707e37840ffa6c5f97ede69f3a2eb', class: "menu-version" }, h("ic-typography", { key: '3821ec288d9553aa73ad8ee23fd968121eab643d', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
+            } }, this.status !== "" && (h("div", { key: '5b41cca5949cb96006b7660334561c378e039fd9', class: "menu-status" }, h("ic-typography", { key: 'c068f6a9e6f4f3dcb4386185e5b34547c93dcbc2', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: 'bcd01f93742c4a3b1106437da91ec7e6541e5e13', class: "menu-version" }, h("ic-typography", { key: 'aa25f91209bd326e9b2f4f34869885e9e78d263c', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
     }
     static get is() { return "ic-navigation-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n  tag: \"ic-navigation-menu\",\n  styleUrl: \"ic-navigation-menu.css\",\n  shadow: true,\n})\nexport class NavigationMenu {\n  private closeButton?: HTMLIcButtonElement;\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private lastTabStop: HTMLElement | null = null;\n  private navBarEl: HTMLIcTopNavigationElement | null;\n  private navGroupFirst: boolean = false;\n  private navItemAboveButtons: boolean = false;\n\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   * The status info to display.\n   */\n  @Prop() status?: 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  /**\n   * The version info to display.\n   */\n  @Prop() version?: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    this.navBarEl = document.querySelector(\"ic-top-navigation\");\n    const navigationEls = getSlotContent(this.el, \"navigation\");\n    if (navigationEls) {\n      this.hasNavigation = true;\n      const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n      if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n        this.navItemAboveButtons = true;\n      }\n      const firstEl = navigationEls[0] as HTMLElement;\n      if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n        this.navGroupFirst = true;\n      }\n    }\n    const buttonContent = getSlotContent(this.el, \"buttons\");\n\n    if (buttonContent !== null) {\n      this.hasButtons = true;\n      this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n    } else {\n      if (this.hasNavigation && navigationEls) {\n        const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n        //check for slotted content i.e. react router link\n        const slotContent = getSlot(lastEl, \"navigation-item\");\n        if (slotContent !== null) {\n          this.lastTabStop = slotContent as HTMLElement;\n        } else {\n          this.lastTabStop = lastEl;\n        }\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.focusCloseButton();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasButtons = isSlotUsed(this.el, \"buttons\");\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.closeMenu();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Tab\") {\n      if (ev.shiftKey) {\n        if (document.activeElement === this.navBarEl) {\n          ev.preventDefault();\n          this.focusLastTabStop();\n        }\n      } else if (\n        document.activeElement === this.lastTabStop ||\n        this.lastTabStop === null\n      ) {\n        ev.preventDefault();\n        this.focusCloseButton();\n      }\n    } else if (ev.key === \"Escape\") {\n      this.closeMenu();\n    }\n  }\n\n  private closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    this.closeButton?.focus();\n  };\n\n  private focusLastTabStop = () => {\n    let focusEl;\n    if (this.lastTabStop !== null) {\n      switch (this.lastTabStop.tagName) {\n        case \"IC-NAVIGATION-BUTTON\":\n        case \"IC-NAVIGATION-ITEM\":\n        case \"IC-NAVIGATION-GROUP\":\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host class={{ [`ic-theme-${this.theme}`]: this.theme !== \"inherit\" }}>\n        <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n        <div\n          class=\"popout-menu\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n        >\n          <span\n            aria-hidden=\"true\"\n            id=\"navigation-landmark-text\"\n            class=\"navigation-landmark-text\"\n          >\n            Main navigation\n          </span>\n          <nav\n            aria-labelledby=\"navigation-landmark-text\"\n            aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n          >\n            <div\n              class={{\n                [\"menu-close-button-container\"]: true,\n                [\"nav-group-first\"]: this.navGroupFirst,\n              }}\n            >\n              <ic-button\n                ref={(el) => (this.closeButton = el)}\n                id=\"menu-close-button\"\n                class=\"menu-close-button\"\n                variant=\"icon\"\n                size=\"large\"\n                aria-label={`Close ${\n                  this.hasNavigation ? \"navigation\" : \"app\"\n                } menu`}\n                onClick={this.closeMenu}\n              >\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" />\n                </svg>\n              </ic-button>\n            </div>\n            {this.hasNavigation && <slot name=\"navigation\"></slot>}\n          </nav>\n          {this.hasButtons && (\n            <div\n              class={{\n                [\"menu-buttons-container\"]: true,\n                [\"menu-buttons-container-nav-item-above\"]:\n                  this.navItemAboveButtons,\n              }}\n            >\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n          {(this.status !== \"\" || this.version !== \"\") && (\n            <div\n              class={{\n                [\"menu-status-version-container\"]: true,\n                [\"status-version-no-buttons\"]: !this.hasButtons,\n              }}\n            >\n              {this.status !== \"\" && (\n                <div class=\"menu-status\">\n                  <ic-typography\n                    variant=\"label-uppercase\"\n                    aria-label=\"app tag\"\n                    class=\"menu-status-text\"\n                  >\n                    {this.status}\n                  </ic-typography>\n                </div>\n              )}\n              {this.version !== \"\" && (\n                <div class=\"menu-version\">\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"menu-version-text\"\n                    aria-label=\"app version\"\n                  >\n                    {this.version}\n                  </ic-typography>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\nconst NAV_GROUP_TAG = \"IC-NAVIGATION-GROUP\";\nconst NAV_ITEM_TAG = \"IC-NAVIGATION-ITEM\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n  tag: \"ic-navigation-menu\",\n  styleUrl: \"ic-navigation-menu.css\",\n  shadow: true,\n})\nexport class NavigationMenu {\n  private closeButton?: HTMLIcButtonElement;\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private lastTabStop: HTMLElement | null = null;\n  private navBarEl: HTMLIcTopNavigationElement | null;\n  private navGroupFirst: boolean = false;\n  private navigationEls: HTMLElement[];\n  private navItemAboveButtons: boolean = false;\n\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   * The status info to display.\n   */\n  @Prop() status?: 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  /**\n   * The version info to display.\n   */\n  @Prop() version?: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    this.navBarEl = document.querySelector(\"ic-top-navigation\");\n    this.navigationEls = getSlotContent(this.el, \"navigation\") as HTMLElement[];\n\n    if (this.navigationEls) {\n      this.hasNavigation = true;\n      const lastEl = this.navigationEls[this.navigationEls.length - 1];\n      if (lastEl.tagName === NAV_ITEM_TAG) {\n        this.navItemAboveButtons = true;\n      } else if (lastEl.tagName === NAV_GROUP_TAG) {\n        lastEl.addEventListener(\"navigationGroupExpanded\", ((\n          event: CustomEvent\n        ) => {\n          this.setLastTabStop(event.detail.expanded);\n        }) as EventListener);\n      }\n      const firstEl = this.navigationEls[0];\n      if (firstEl.tagName === NAV_GROUP_TAG) {\n        this.navGroupFirst = true;\n      }\n    }\n    const buttonContent = getSlotContent(this.el, \"buttons\");\n\n    if (buttonContent !== null) {\n      this.hasButtons = true;\n      this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n    } else {\n      if (this.hasNavigation && this.navigationEls) {\n        this.setLastTabStop(false);\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.focusCloseButton();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasButtons = isSlotUsed(this.el, \"buttons\");\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.closeMenu();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Tab\") {\n      if (ev.shiftKey) {\n        if (document.activeElement === this.navBarEl) {\n          ev.preventDefault();\n          this.focusLastTabStop();\n        }\n      } else if (\n        document.activeElement === this.lastTabStop ||\n        this.lastTabStop === null\n      ) {\n        ev.preventDefault();\n        this.focusCloseButton();\n      }\n    } else if (ev.key === \"Escape\") {\n      this.closeMenu();\n    }\n  }\n\n  private setLastTabStop = (lastNavGroupExpanded: boolean) => {\n    let lastEl = this.navigationEls[\n      this.navigationEls.length - 1\n    ] as HTMLElement;\n\n    if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {\n      const childNavItems = lastEl.children;\n      lastEl = childNavItems[childNavItems.length - 1] as HTMLElement;\n    }\n\n    if (lastEl.tagName === NAV_ITEM_TAG) {\n      //check for slotted content i.e. react router link\n      const slotContent = getSlot(lastEl, \"navigation-item\");\n      if (slotContent !== null) {\n        lastEl = slotContent as HTMLElement;\n      }\n    }\n\n    this.lastTabStop = lastEl;\n  };\n\n  private closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    this.closeButton?.focus();\n  };\n\n  private focusLastTabStop = () => {\n    let focusEl;\n    if (this.lastTabStop !== null) {\n      switch (this.lastTabStop.tagName) {\n        case \"IC-NAVIGATION-BUTTON\":\n        case NAV_ITEM_TAG:\n        case NAV_GROUP_TAG:\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host class={{ [`ic-theme-${this.theme}`]: this.theme !== \"inherit\" }}>\n        <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n        <div\n          class=\"popout-menu\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n        >\n          <span\n            aria-hidden=\"true\"\n            id=\"navigation-landmark-text\"\n            class=\"navigation-landmark-text\"\n          >\n            Main navigation\n          </span>\n          <nav\n            aria-labelledby=\"navigation-landmark-text\"\n            aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n          >\n            <div\n              class={{\n                [\"menu-close-button-container\"]: true,\n                [\"nav-group-first\"]: this.navGroupFirst,\n              }}\n            >\n              <ic-button\n                ref={(el) => (this.closeButton = el)}\n                id=\"menu-close-button\"\n                class=\"menu-close-button\"\n                variant=\"icon\"\n                size=\"large\"\n                aria-label={`Close ${\n                  this.hasNavigation ? \"navigation\" : \"app\"\n                } menu`}\n                onClick={this.closeMenu}\n              >\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" />\n                </svg>\n              </ic-button>\n            </div>\n            {this.hasNavigation && <slot name=\"navigation\"></slot>}\n          </nav>\n          {this.hasButtons && (\n            <div\n              class={{\n                [\"menu-buttons-container\"]: true,\n                [\"menu-buttons-container-nav-item-above\"]:\n                  this.navItemAboveButtons,\n              }}\n            >\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n          {(this.status !== \"\" || this.version !== \"\") && (\n            <div\n              class={{\n                [\"menu-status-version-container\"]: true,\n                [\"status-version-no-buttons\"]: !this.hasButtons,\n              }}\n            >\n              {this.status !== \"\" && (\n                <div class=\"menu-status\">\n                  <ic-typography\n                    variant=\"label-uppercase\"\n                    aria-label=\"app tag\"\n                    class=\"menu-status-text\"\n                  >\n                    {this.status}\n                  </ic-typography>\n                </div>\n              )}\n              {this.version !== \"\" && (\n                <div class=\"menu-version\">\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"menu-version-text\"\n                    aria-label=\"app version\"\n                  >\n                    {this.version}\n                  </ic-typography>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-page-header/ic-page-header.js

@@ -106,23 +106,24 @@ export class PageHeader {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
+        var _a, _b;
         const { size, border, heading, subheading, aligned, sticky, stickyDesktopOnly, theme, } = this;
-        const navAriaLabel = heading
-            ? `${heading} page sections`
-            : "navigation-landmark-page-header";
-        return (h(Host, { key: '882e854b99de01f0ea135d35f2e57e01f5987f1a', class: {
+        const navAriaLabel = `${isSlotUsed(this.el, "heading")
+            ? (_b = (_a = this.el.querySelector('[slot="heading"]')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : ""
+            : heading !== null && heading !== void 0 ? heading : ""} page sections`;
+        return (h(Host, { key: 'cf0a316e1397ddc7fb6d3c31dc9a311583e16a91', class: {
                 ["ic-page-header-sticky"]: !!sticky,
                 ["ic-page-header-sticky-desktop"]: !sticky && !!stickyDesktopOnly,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, "aria-label": this.el.ariaLabel || "page header" }, h("header", { key: '6f725d92b668fcb497c7cb78ac2ee84616d4800d', class: {
+            }, "aria-label": this.el.ariaLabel || "page header" }, h("header", { key: 'a4f043e2af90f690fba09b93a4013d1389515e0a', class: {
                 ["border-bottom"]: !!border,
                 ["tabs"]: isSlotUsed(this.el, "tabs"),
-            }, role: "presentation" }, h("ic-section-container", { key: 'e8072cda194f34af9cb12f1fb51322afae1aa760', aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { key: '286b74debcda61aa1f749b3745345e159f620e3d', class: "breadcrumb-area" }, h("slot", { key: 'bc103c6d95854acc0d5e90e75356d839c87355f4', name: "breadcrumbs" }))), h("div", { key: '62a089e84bbe549456a0a1fbe4ad79fbb952ac70', class: "main-content" }, h("div", { key: '09bbf9e2f146a58c6dd9359bb795713a8a74ce68', class: "title-area" }, h("div", { key: '7bc020f3742cb3823bd730e10a65f463b879f388', class: "header-content" }, h("slot", { key: 'b28a847a6d54a14a1a49dde1a24327748d621a2f', name: "heading" }, h("ic-typography", { key: 'f4be51b8fbd7a8761809f1a5646be051841b2f15', variant: size === "small" ? "h4" : "h2", class: "heading" }, h("h2", { key: '129278fabb48a457e9a1bce2c0821556eb9cebe0' }, heading))), h("slot", { key: 'd5893b073ae3adb82b5dc02b55bd77b2a91ed836', name: "heading-adornment" })), h("div", { key: 'cda4eaa4dd594c20e3bcf4b111a9cb2056d6a3da', class: {
+            }, role: "presentation" }, h("ic-section-container", { key: '2face790c85ada31be50963b94cb4a238f35472c', aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { key: '54976512713ea354459fc3531070db32feb92e71', class: "breadcrumb-area" }, h("slot", { key: '1ae4415737707e7d83ae0d8d20def16162584d31', name: "breadcrumbs" }))), h("div", { key: '1bb89b5a996f3f1dafcfdefd901e04e7b4e43143', class: "main-content" }, h("div", { key: '0e9da2b22ef20eba75b79727ec52f6451c165547', class: "title-area" }, h("div", { key: '80977a001794dbfbfb8388936b5c08486ab2a55a', class: "header-content" }, h("slot", { key: '011e08fffff718640e5d1fd85deab17aa13f52ec', name: "heading" }, h("ic-typography", { key: '41c906715db6466ca30c3e1826feb8e385a6ed15', variant: size === "small" ? "h4" : "h2", class: "heading" }, h("h2", { key: '17036720f03d87e51c5c35c9c36a4d3ffc44445a' }, heading))), h("slot", { key: '3002be9cc0995887ccc71379062a73380afc289d', name: "heading-adornment" })), h("div", { key: 'e8f563e8010b6167533fbc89dbb7f8c9c760d420', class: {
                 ["subheading-content"]: !!subheading || isSlotUsed(this.el, "subheading"),
                 ["small"]: size === "small",
-            } }, h("slot", { key: 'a5abeb5c108606003e927cf6aaef9c8c129fe9ad', name: "subheading" }, h("ic-typography", { key: '6a5120a1d5b8a1418b93ee8e95cf25f3db122795', variant: "body" }, subheading)))), isSlotUsed(this.el, "actions") && (h("div", { key: 'b818b7aea1bb215262cbfb13166a0c72e7c5d9a2', class: "action-area" }, h("slot", { key: 'bb02b1d90b57eee375eda287a541c1e2f9f37974', name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { key: '3bd62ecd4ee4db29b630fdcb7c8c0f6e832063f0', class: "input-area" }, h("slot", { key: '32673f28c2e77e9ad94cb98e19df930248448405', name: "input" })))), (isSlotUsed(this.el, "stepper") ||
-            isSlotUsed(this.el, "tabs")) && (h("div", { key: '7ef6826ab1ea8d305578467598489b59b1ac407e', class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
-            !isSlotUsed(this.el, "tabs") && h("slot", { key: '8e130ca5af125f3a7d467bd9401e4f5210331772', name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { key: 'fac3c42199384e83fbd28e2fefbac75120330fa3', "aria-label": navAriaLabel }, h("ic-horizontal-scroll", { key: '609faefbe4cfb3eebbacfd6af1f55e57f693b96e' }, h("ul", { key: '112155bb171589043490962f5e96ca6916ae3dbc', class: "tabs-slot" }, h("slot", { key: 'b4bb6d08d4aededce542c12f449bd509eb412432', name: "tabs" })))))))))));
+            } }, h("slot", { key: '5ade2c01dfbdb1c808486b126e081c1877a513ff', name: "subheading" }, h("ic-typography", { key: 'fb6900da321f46663774ceab59982e56741f877d', variant: "body" }, subheading)))), isSlotUsed(this.el, "actions") && (h("div", { key: 'f4f481e78ace183a6da6533b5fc9cbe5086b5c0b', class: "action-area" }, h("slot", { key: '7d7afb45226d1bcde3e3e4416f2bdf4c08ef2983', name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { key: '2d9c41769a6b4719e81923e43c58fcafc939e139', class: "input-area" }, h("slot", { key: 'b873a5210cbf2bc353a249bcac581d5132f3f36f', name: "input" })))), (isSlotUsed(this.el, "stepper") ||
+            isSlotUsed(this.el, "tabs")) && (h("div", { key: 'a9d7f5aa5982d2a0add73f08eae35346009c7509', class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
+            !isSlotUsed(this.el, "tabs") && h("slot", { key: '73959a3937f2a1b29dcabf1c6f005f4f51038cbc', name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { key: 'b50e37d8d8463483735ef40ba438cc2ede29c0bd', "aria-label": navAriaLabel }, h("ic-horizontal-scroll", { key: '4d52cf2984deed193908dbbd23e8a14fe8ac0724' }, h("ul", { key: '8cfa92fd9424ea59182b4a20ab2d968351129589', class: "tabs-slot" }, h("slot", { key: 'd59fc58ca6aaa2f266ab64a26071047c89bec440', name: "tabs" })))))))))));
     }
     static get is() { return "ic-page-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-page-header/ic-page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  private resizeObserver: ResizeObserver | null = null;\n\n  @Element() el: HTMLIcPageHeaderElement;\n\n  @State() actionContent: Node[];\n  @State() areButtonsReversed: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * The alignment of the page header.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * If `true`, a border will be displayed along the bottom of the page header.\n   */\n  @Prop() border?: boolean = true;\n\n  /**\n   * The title to render on the page header.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  /**\n   * The size of the page header component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * If `true`, the page header will be sticky at all breakpoints.\n   */\n  @Prop() sticky?: boolean = false;\n\n  /**\n   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n\n  /**\n   * The subtitle to render on the page header.\n   */\n  @Prop() subheading?: 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  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot?.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    const appendActionContent = () => {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    };\n\n    if (\n      (this.deviceSize > DEVICE_SIZES.S &&\n        actionAreaHeight <= max &&\n        !this.areButtonsReversed) ||\n      (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n        this.areButtonsReversed)\n    ) {\n      appendActionContent();\n    }\n  };\n\n  render() {\n    const {\n      size,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n      theme,\n    } = this;\n\n    const navAriaLabel = heading\n      ? `${heading} page sections`\n      : \"navigation-landmark-page-header\";\n\n    return (\n      <Host\n        class={{\n          [\"ic-page-header-sticky\"]: !!sticky,\n          [\"ic-page-header-sticky-desktop\"]: !sticky && !!stickyDesktopOnly,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        aria-label={this.el.ariaLabel || \"page header\"}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: !!border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n          role=\"presentation\"\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={size === \"small\" ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div\n                  class={{\n                    [\"subheading-content\"]:\n                      !!subheading || isSlotUsed(this.el, \"subheading\"),\n                    [\"small\"]: size === \"small\",\n                  }}\n                >\n                  <slot name=\"subheading\">\n                    <ic-typography variant=\"body\">{subheading}</ic-typography>\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav aria-label={navAriaLabel}>\n                    <ic-horizontal-scroll>\n                      <ul class=\"tabs-slot\">\n                        <slot name=\"tabs\" />\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  private resizeObserver: ResizeObserver | null = null;\n\n  @Element() el: HTMLIcPageHeaderElement;\n\n  @State() actionContent: Node[];\n  @State() areButtonsReversed: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * The alignment of the page header.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * If `true`, a border will be displayed along the bottom of the page header.\n   */\n  @Prop() border?: boolean = true;\n\n  /**\n   * The title to render on the page header.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  /**\n   * The size of the page header component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * If `true`, the page header will be sticky at all breakpoints.\n   */\n  @Prop() sticky?: boolean = false;\n\n  /**\n   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n\n  /**\n   * The subtitle to render on the page header.\n   */\n  @Prop() subheading?: 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  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot?.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    const appendActionContent = () => {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    };\n\n    if (\n      (this.deviceSize > DEVICE_SIZES.S &&\n        actionAreaHeight <= max &&\n        !this.areButtonsReversed) ||\n      (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n        this.areButtonsReversed)\n    ) {\n      appendActionContent();\n    }\n  };\n\n  render() {\n    const {\n      size,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n      theme,\n    } = this;\n\n    const navAriaLabel = `${\n      isSlotUsed(this.el, \"heading\")\n        ? this.el.querySelector('[slot=\"heading\"]')?.textContent ?? \"\"\n        : heading ?? \"\"\n    } page sections`;\n\n    return (\n      <Host\n        class={{\n          [\"ic-page-header-sticky\"]: !!sticky,\n          [\"ic-page-header-sticky-desktop\"]: !sticky && !!stickyDesktopOnly,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        aria-label={this.el.ariaLabel || \"page header\"}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: !!border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n          role=\"presentation\"\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={size === \"small\" ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div\n                  class={{\n                    [\"subheading-content\"]:\n                      !!subheading || isSlotUsed(this.el, \"subheading\"),\n                    [\"small\"]: size === \"small\",\n                  }}\n                >\n                  <slot name=\"subheading\">\n                    <ic-typography variant=\"body\">{subheading}</ic-typography>\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav aria-label={navAriaLabel}>\n                    <ic-horizontal-scroll>\n                      <ul class=\"tabs-slot\">\n                        <slot name=\"tabs\" />\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-pagination/ic-pagination.css

@@ -483,12 +483,16 @@ ic-button.next-previous::part(button) {
 }
 
 ic-button.ic-button-disabled.first-last::part(button),
-ic-button.ic-button-disabled.next-previous::part(button) {
+ic-button.ic-button-disabled.next-previous::part(button),
+:host(.ic-pagination-monochrome)
+  ic-button.ic-button-disabled.first-last::part(button),
+:host(.ic-pagination-monochrome)
+  ic-button.ic-button-disabled.next-previous::part(button) {
   color: var(--ic-pagination-chevron-disabled);
 }
 
 .disabled {
-  color: var(--ic-architectural-200);
+  color: var(--ic-color-text-disabled-mid);
   pointer-events: none;
   cursor: none;
   -webkit-user-select: none;
@@ -504,3 +508,7 @@ ic-button.ic-button-disabled.next-previous::part(button) {
   position: absolute;
   left: -9999px;
 }
+
+.sr-only:dir(rtl) {
+  right: -9999px;
+}

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

@@ -239,14 +239,14 @@ export class Pagination {
     }
     render() {
         const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
-        return (h(Host, { key: 'd2d60e613bb2c0830b8cb4e234bad974c7a5e617', class: {
+        return (h(Host, { key: '4787d5960a8d0742450c667f69fb5bec1b9fd904', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-pagination-monochrome"]: !!monochrome,
-            } }, type === "simple" && (h("nav", { key: 'bc523b8c06315458efbf1a8971fa6cf59c43ed11', class: {
+            } }, type === "simple" && (h("nav", { key: '6e048bd0824217797cac254036ed755da3438e0f', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: '6e9edfdc7bc5ab49ae37d06837dbc8b9906bd622', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { key: 'fca0b1e64a1b2eb2ae66fc0049bb514aec75a3a0', class: {
+            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: 'df77f23f3b194257466323bb5d5948afaa989fd0', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { key: '4be33ba10d0b4444e57746408b77e651007f1753', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("span", { key: '06da4ca938338c231dd7004db877bc6b8b5a278f', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
+            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("span", { key: 'ef4efbec3670434f55022b9bd15e3218b7fb1546', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
     }
     static get is() { return "ic-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-pagination-item/ic-pagination-item.css

@@ -554,7 +554,7 @@ ic-typography.page-selected.light {
   width: 100%;
   position: absolute;
   bottom: 0;
-  background-color: var(--ic-action-light);
+  background-color: var(--ic-action-monochrome);
 }
 
 /** DARK STATES **/
@@ -576,11 +576,11 @@ ic-typography.dark {
   width: 100%;
   position: absolute;
   bottom: 0;
-  background-color: var(--ic-action-dark);
+  background-color: var(--ic-action-monochrome-dark);
 }
 
 .disabled {
-  --ic-typography-color: var(--ic-architectural-200);
+  --ic-typography-color: var(--ic-pagination-text-disabled);
 
   pointer-events: none;
   cursor: none;
@@ -589,6 +589,22 @@ ic-typography.dark {
           user-select: none;
 }
 
+.disabled.page ic-typography {
+  --ic-typography-color: var(--ic-pagination-page-number-disabled);
+}
+
+.disabled.ellipsis {
+  --ic-typography-color: var(--ic-pagination-ellipsis-disabled);
+}
+
+.monochrome .disabled.page {
+  --ic-typography-color: var(--ic-pagination-page-number-monochrome-disabled);
+}
+
+.monochrome .disabled.ellipsis {
+  --ic-typography-color: var(--ic-pagination-ellipsis-monochrome-disabled);
+}
+
 @media (forced-colors: active) {
   .selected::after {
     background-color: Highlight;

package/dist/collection/components/ic-pagination-item/ic-pagination-item.js

@@ -38,7 +38,7 @@ export class PaginationItem {
     }
     render() {
         const { page, selected, type, disabled, label, capitalizedLabel, monochrome, } = this;
-        return (h("a", { key: '5e8aa2f75823a830e87d8f9badde5028284ea387', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
+        return (h("a", { key: '96b78185d8162b10bbd8d728f87ff50df44f9b79', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
                 ["item-container"]: true,
                 ["ellipsis"]: true,
                 ["disabled"]: !!disabled,

package/dist/collection/components/ic-popover-menu/ic-popover-menu.js

@@ -163,6 +163,7 @@ export class PopoverMenu {
             this.el.getAttribute(this.ARIA_LABEL) === null) {
             console.error(`No aria-label specified for popover menu component - aria-label required`);
         }
+        this.watchOpenHandler();
     }
     componentWillRender() {
         this.anchorEl = this.findAnchorEl(this.anchor);
@@ -262,17 +263,17 @@ export class PopoverMenu {
         }
     }
     render() {
-        return (h(Host, { key: '0d600ea25ae46dca927e100d1c0f321afff64b01', class: {
+        return (h(Host, { key: 'cc25af9952d51db883220b52946da6c645a87bd1', class: {
                 ["ic-popover-menu-open"]: !!this.open,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: 'c94ec7dcd89b7a9bcfed03d5def6cf1be0243d50', id: this.parentPopover === undefined
+            } }, h("div", { key: '19757297884b585b4f8fe182237757aa7c36f696', id: this.parentPopover === undefined
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            } }, h("span", { key: 'a01071126c2bbd39f26e837988efabdd07fd3da8', class: {
+            } }, h("span", { key: '8a6facb49d5c5c3d6eec3107bfcf9ae625d4dfc9', class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (h("span", { key: 'c5f225a965cb77832d77ad895e6feb070f61fc33' }, h("span", { key: '1d5e3ff2f1c52e10bc8646ba04858be20b40c8c2', role: "menu" }, h("ic-menu-item", { key: '4b3f0324f21ed33b24df68cb72ea16d5704b97b4', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: 'cb9d8fdcef344a5d8659516de8baac5856b776bf', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '1d79d4c02b06b5651878ebf11d4a6d6428a6f45e', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: '594d0374d03ec7764afe48b2e8d5959f39eb761d', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("ul", { key: '7fa43dcda50ed5740f3922955e26c08946377f2e', class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: '25da236864fe2afd3f94fe53a41b180566490e1f' }))))));
+            } }, isPropDefined(this.submenuId) && (h("span", { key: 'c64495ca5447f34b430140bf8fd9f75dbd89ed68' }, h("span", { key: 'cdbcf7e3ddf674e941534e6742c3679257f5a88e', role: "menu" }, h("ic-menu-item", { key: '9d70b7621f9173af0000591a5e8cc328c352f849', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: '7bc91d66855037df4cf642b7dc112186dff28cf8', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '72bb21d3a27e3093cdd8544574a9be3f3876bd27', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: '9a09923d96579833195956fc92951ff5ebcc1b05', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("ul", { key: '4c0490b94abbb32c9be46c05a1b72c83f3835696', class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: 'ab1e92b234c4c1e41bccb7824db02f3d022566c8' }))))));
     }
     static get is() { return "ic-popover-menu"; }
     static get encapsulation() { return "shadow"; }