@ukic/web-components 2.31.0 → 2.32.1

package/dist/esm/ic-toggle-button.entry.js.map

@@ -1 +1 @@
-{"file":"ic-toggle-button.entry.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-default)\n  );\n}\n\n:host(.dark) {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-dark)\n  );\n}\n\n:host(.light) {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-light)\n  );\n}\n\n:host(.disabled) {\n  --button-border: var(--toggle-button-border, var(--ic-border-disabled));\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n  width: 100%;\n  min-height: inherit;\n  white-space: inherit;\n  height: inherit;\n}\n\n:host ic-button {\n  --icon-width: var(--ic-space-lg);\n  --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n  min-width: 100%;\n  min-height: 100%;\n  white-space: normal;\n  height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.light) ::part(button):focus,\n:host(.expand-toggle-group-child.dark) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n    var(--ic-border-focus);\n}\n\n:host(:focus) {\n  z-index: 1;\n}\n\n:host ::part(button) {\n  border: var(--button-border);\n}\n\n:host(.checked) ::part(button) {\n  background-color: var(--ic-action-default);\n  color: var(--ic-architectural-white);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white);\n}\n\n:host(.checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n    var(--ic-border-focus);\n}\n\n:host(.checked) ::part(button):hover {\n  background-color: var(--button-default-hover);\n}\n\n:host(.checked) ::part(button):active,\n:host(.icon.checked) ::part(button):active {\n  background-color: var(--ic-action-default-active);\n}\n\n:host(.dark.checked) ::part(button) {\n  background-color: var(--ic-action-dark);\n}\n\n:host(.dark.checked) ::part(button):hover {\n  background-color: var(--ic-action-dark-hover);\n}\n\n:host(.dark.checked) ::part(button):active,\n:host(.icon.dark.checked) ::part(button):active {\n  background-color: var(--ic-action-dark-active);\n}\n\n:host(.light.checked) ::part(button) {\n  background-color: var(--ic-action-light);\n  color: var(--ic-color-primary-text);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black);\n}\n\n:host(.light.checked) ::part(button):hover {\n  background-color: var(--ic-action-light-hover);\n}\n\n:host(.light.checked) ::part(button):active,\n:host(.icon.light.checked) ::part(button):active {\n  background-color: var(--ic-action-light-active);\n}\n\n:host(.light.checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),\n    var(--ic-border-focus);\n}\n\n:host(.disabled) ::part(button),\n:host(.icon.disabled) ::part(button) {\n  border: var(--button-border);\n}\n\n:host(.disabled.checked) ::part(button),\n:host(.icon.disabled.checked) ::part(button) {\n  background-color: transparent;\n}\n\n:host(.disabled.checked) ::part(button),\n:host(.icon.disabled.checked) ::part(button)::before {\n  background-image: radial-gradient(var(--ic-architectural-400) 95%, white 20%);\n  background-repeat: no-repeat;\n}\n\n:host(.icon) ::part(button) {\n  border: var(--button-border);\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.icon) ::part(button):active {\n  background-color: var(--ic-action-default-bg-active);\n}\n\n:host(.icon.dark) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.icon.light) ::part(button):active {\n  background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.icon.small) ::part(button) {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n:host(.icon.large) ::part(button) {\n  height: var(--ic-space-xxl);\n  width: var(--ic-space-xxl);\n}\n\n:host(.checked.loading) ::part(button) {\n  background-color: var(--button-default-active);\n}\n\n:host(.loading) ::part(ic-loading-container) {\n  --inner-color: var(--ic-architectural-white);\n}\n\n:host(.checked.loading.light) ::part(button) {\n  background-color: var(--ic-action-light-active);\n}\n\n:host(.checked.loading.dark) ::part(button) {\n  background-color: var(--ic-action-dark-active);\n}\n\n@media (forced-colors: active) {\n  :host(.checked) ::part(button),\n  :host(.checked) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.checked.light) ::part(button),\n  :host(.checked.light) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.checked.dark) ::part(button),\n  :host(.checked.dark) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.checked.disabled) ::part(button) {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement;\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.toggleChecked = !this.toggleChecked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.toggleChecked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n          [\"checked\"]: this.toggleChecked,\n          [`${this.appearance}`]: true,\n          [\"icon\"]: this.variant === \"icon\",\n          [`${this.size}`]: true,\n          [\"loading\"]: this.loading,\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.toggleChecked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.toggleChecked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot\n              name=\"icon\"\n              slot={`${\n                this.iconPosition ? `${this.iconPosition}-icon` : \"icon\"\n              }`}\n            ></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-toggle-button.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,8sNAA8sN;;MC8B3tN,YAAY;;;;QAEf,yBAAoB,GAAqB,IAAI,CAAC;QAmG9C,yBAAoB,GAAG;YAC7B,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC;QAWM,gBAAW,GAAG,CAAC,EAAc;YACnC,EAAE,CAAC,wBAAwB,EAAE,CAAC;SAC/B,CAAC;QAEM,gBAAW,GAAG;YACpB,CAAC,IAAI,CAAC,OAAO;gBACX,CAAC,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACxB,OAAO,EAAE,IAAI,CAAC,aAAa;iBAC5B,CAAC,CAAC;SACN,CAAC;;0BA9GuC,SAAS;wBAKrB,KAAK;yBAKJ,KAAK;;;uBAeP,KAAK;oBAKR,SAAS;6BAK+B,KAAK;uBAKf,SAAS;;IAShE,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,MAAM,mBAAmB,GACvB,IAAI,CAAC,EAAE,CAAC,aACT,CAAC,aAAa,CAAC;QAChB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,IAAI,mBAAmB,CAAC;KAC/D;IAED,gBAAgB;QACd,gCAAgC,CAC9B;YACE;gBACE,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK;gBACjE,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,kBAAkB,GAAG,OAAO;aACjE;SACF,EACD,eAAe,CAChB,CAAC;QACF,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;YAC3C,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAC9C,IAAI,CAAC,oBAAoB,CAC1B,CAAC;YACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;gBACzC,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;SACJ;KACF;IAED,oBAAoB;QAClB,IACE,IAAI,CAAC,oBAAoB,KAAK,IAAI;YAClC,IAAI,CAAC,oBAAoB,KAAK,SAAS,EACvC;YACA,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAC;SACxC;KACF;IAOD,eAAe,CAAC,CAAQ;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,wBAAwB,EAAE,CAAC;SAC9B;aAAM,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;SAC1C;KACF;IAcD,MAAM;QACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ;gBAC3B,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa;gBAC/B,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;gBAC5B,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM;gBACjC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBACtB,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO;aAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,iCACgB,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,MAAM,GAAG,WAAW,EACvD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,IAAI,CAAC,eAAe,gBACf,GACV,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KACrD,KAAK,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,UAAU,EAAE,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,GAAG,IAAI,CAAC,QAAQ,EAAE,IAEhC,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,EACtC,eAAQ,EACP,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,YACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,GACJ,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,OAAO,GAAG,MACpD,EAAE,GACI,CACT,EACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,KAC3B,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CACxC,CACS,CACP,EACP;KACH;;;;;;;;","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-default)\n  );\n}\n\n:host(.dark) {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-dark)\n  );\n}\n\n:host(.light) {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-light)\n  );\n}\n\n:host(.disabled) {\n  --button-border: var(--toggle-button-border, var(--ic-border-disabled));\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n  width: 100%;\n  min-height: inherit;\n  white-space: inherit;\n  height: inherit;\n}\n\n:host ic-button {\n  --icon-width: var(--ic-space-lg);\n  --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n  min-width: 100%;\n  min-height: 100%;\n  white-space: normal;\n  height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.light) ::part(button):focus,\n:host(.expand-toggle-group-child.dark) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n    var(--ic-border-focus);\n}\n\n:host(:focus) {\n  z-index: 1;\n}\n\n:host ::part(button) {\n  border: var(--button-border);\n}\n\n:host(.checked) ::part(button) {\n  background-color: var(--ic-action-default);\n  color: var(--ic-architectural-white);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white);\n}\n\n:host(.checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n    var(--ic-border-focus);\n}\n\n:host(.checked) ::part(button):hover {\n  background-color: var(--button-default-hover);\n}\n\n:host(.checked) ::part(button):active,\n:host(.icon.checked) ::part(button):active {\n  background-color: var(--ic-action-default-active);\n}\n\n:host(.dark.checked) ::part(button) {\n  background-color: var(--ic-action-dark);\n}\n\n:host(.dark.checked) ::part(button):hover {\n  background-color: var(--ic-action-dark-hover);\n}\n\n:host(.dark.checked) ::part(button):active,\n:host(.icon.dark.checked) ::part(button):active {\n  background-color: var(--ic-action-dark-active);\n}\n\n:host(.light.checked) ::part(button) {\n  background-color: var(--ic-action-light);\n  color: var(--ic-color-primary-text);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black);\n}\n\n:host(.light.checked) ::part(button):hover {\n  background-color: var(--ic-action-light-hover);\n}\n\n:host(.light.checked) ::part(button):active,\n:host(.icon.light.checked) ::part(button):active {\n  background-color: var(--ic-action-light-active);\n}\n\n:host(.light.checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),\n    var(--ic-border-focus);\n}\n\n:host(.disabled) ::part(button),\n:host(.icon.disabled) ::part(button) {\n  border: var(--button-border);\n}\n\n:host(.disabled.checked) ::part(button),\n:host(.icon.disabled.checked) ::part(button) {\n  background-color: transparent;\n}\n\n:host(.disabled.checked) ::part(button),\n:host(.icon.disabled.checked) ::part(button)::before {\n  background-image: radial-gradient(var(--ic-architectural-400) 95%, white 20%);\n  background-repeat: no-repeat;\n}\n\n:host(.icon) ::part(button) {\n  border: var(--button-border);\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.icon) ::part(button):active {\n  background-color: var(--ic-action-default-bg-active);\n}\n\n:host(.icon.dark) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.icon.light) ::part(button):active {\n  background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.icon.small) ::part(button) {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n:host(.icon.large) ::part(button) {\n  height: var(--ic-space-xxl);\n  width: var(--ic-space-xxl);\n}\n\n:host(.checked.loading) ::part(button) {\n  background-color: var(--button-default-active);\n}\n\n:host(.loading) ::part(ic-loading-container) {\n  --inner-color: var(--ic-architectural-white);\n}\n\n:host(.checked.loading.light) ::part(button) {\n  background-color: var(--ic-action-light-active);\n}\n\n:host(.checked.loading.dark) ::part(button) {\n  background-color: var(--ic-action-dark-active);\n}\n\n@media (forced-colors: active) {\n  :host(.checked) ::part(button),\n  :host(.checked) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.checked.light) ::part(button),\n  :host(.checked.light) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.checked.dark) ::part(button),\n  :host(.checked.dark) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.checked.disabled) ::part(button) {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n  forceUpdate,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement;\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n    if (typeof MutationObserver !== \"undefined\") {\n      this.hostMutationObserver = new MutationObserver(\n        this.hostMutationCallback\n      );\n      this.hostMutationObserver.observe(this.el, {\n        childList: true,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (\n      this.hostMutationObserver !== null &&\n      this.hostMutationObserver !== undefined\n    ) {\n      this.hostMutationObserver.disconnect();\n    }\n  }\n\n  private hostMutationCallback = (): void => {\n    forceUpdate(this);\n  };\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.toggleChecked = !this.toggleChecked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.toggleChecked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n          [\"checked\"]: this.toggleChecked,\n          [`${this.appearance}`]: true,\n          [\"icon\"]: this.variant === \"icon\",\n          [`${this.size}`]: true,\n          [\"loading\"]: this.loading,\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.toggleChecked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.toggleChecked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot\n              name=\"icon\"\n              slot={`${\n                this.iconPosition ? `${this.iconPosition}-icon` : \"icon\"\n              }`}\n            ></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/types/components/ic-menu-item/ic-menu-item.d.ts

@@ -60,10 +60,7 @@ export declare class MenuItem {
     /**
      * @internal Emitted when the user clicks a menu item.
      */
-    handleMenuItemClick: EventEmitter<{
-        label: string;
-        hasSubMenu: boolean;
-    }>;
+    handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;
     /**
      * Emitted when the user clicks a menu item that is set to the toggle variant.
      */

package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts

@@ -10,6 +10,7 @@ export declare class NavigationItem {
     private isInitialRender;
     private itemEl;
     private hostMutationObserver;
+    private ANIMATION_DURATION;
     private ARIA_LABEL_STRING;
     el: HTMLIcNavigationItemElement;
     deviceSize: number;
@@ -90,5 +91,6 @@ export declare class NavigationItem {
     private hostMutationCallback;
     private generateTooltipLabel;
     private renderNavigationItemContent;
+    private sideNavToggleTooltip;
     render(): any;
 }

package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts

@@ -37,15 +37,12 @@ export declare class PopoverMenu {
     /**
      * Emitted when the popover menu is closed.
      */
-    icPopoverClosed: EventEmitter<void>;
+    icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;
     disconnectedCallback(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
     componentDidRender(): void;
-    handleMenuItemClick(ev: CustomEvent<{
-        label: string;
-        hasSubMenu: boolean;
-    }>): void;
+    handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void;
     handleSubmenuChange(ev: Event): void;
     handleClick(ev: Event): void;
     handleKeyDown(ev: KeyboardEvent): void;
@@ -64,7 +61,7 @@ export declare class PopoverMenu {
      * @internal Close the menu, emit icPopoverClosed of the root popover
      * @param setFocusToAnchor when true return focus to anchor element when menu is closed
      */
-    closeMenu(setFocusToAnchor?: boolean): Promise<void>;
+    closeMenu(setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement): Promise<void>;
     private getNextItemToSelect;
     private addMenuItems;
     private getMenuAriaLabel;

package/dist/types/components/ic-text-field/ic-text-field.d.ts

@@ -231,5 +231,6 @@ export declare class TextField {
     private hasStatus;
     private handleFormReset;
     private hostMutationCallback;
+    private showValidation;
     render(): any;
 }

package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts

@@ -6,6 +6,7 @@ import { IcSizes, IcThemeForeground } from "../../utils/types";
  */
 export declare class ToggleButton {
     private iconPosition;
+    private hostMutationObserver;
     el: HTMLIcToggleButtonElement;
     /**
      * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.
@@ -55,6 +56,8 @@ export declare class ToggleButton {
     }>;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private hostMutationCallback;
     handleHostClick(e: Event): void;
     private handleFocus;
     private handleClick;

package/dist/types/components.d.ts

@@ -1393,7 +1393,7 @@ export namespace Components {
         /**
           * @param setFocusToAnchor when true return focus to anchor element when menu is closed
          */
-        "closeMenu": (setFocusToAnchor?: boolean) => Promise<void>;
+        "closeMenu": (setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement) => Promise<void>;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -2850,10 +2850,7 @@ declare global {
     };
     interface HTMLIcMenuItemElementEventMap {
         "childBlur": void;
-        "handleMenuItemClick": {
-    label: string;
-    hasSubMenu: boolean;
-  };
+        "handleMenuItemClick": HTMLIcMenuItemElement;
         "icToggleChecked": {
     checked: boolean;
   };
@@ -2961,7 +2958,7 @@ declare global {
         new (): HTMLIcPaginationItemElement;
     };
     interface HTMLIcPopoverMenuElementEventMap {
-        "icPopoverClosed": void;
+        "icPopoverClosed": HTMLIcMenuItemElement;
     }
     interface HTMLIcPopoverMenuElement extends Components.IcPopoverMenu, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcPopoverMenuElementEventMap>(type: K, listener: (this: HTMLIcPopoverMenuElement, ev: IcPopoverMenuCustomEvent<HTMLIcPopoverMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4707,7 +4704,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the popover menu is closed.
          */
-        "onIcPopoverClosed"?: (event: IcPopoverMenuCustomEvent<void>) => void;
+        "onIcPopoverClosed"?: (event: IcPopoverMenuCustomEvent<HTMLIcMenuItemElement>) => void;
         /**
           * If `true`, the popover menu will be displayed.
          */

package/hydrate/index.js

@@ -9144,7 +9144,7 @@ class Button {
         };
         // triggered when attributes of host element change
         this.hostMutationCallback = (mutationList) => {
-            mutationList.forEach(({ attributeName }) => {
+            mutationList.forEach(({ attributeName, type }) => {
                 const attribute = this.el.getAttribute(attributeName);
                 if (attributeName === "title")
                     this.title = attribute;
@@ -9250,6 +9250,7 @@ class Button {
             this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
             this.hostMutationObserver.observe(this.el, {
                 attributes: true,
+                childList: true,
             });
         }
     }
@@ -10837,7 +10838,7 @@ class FooterLink {
     }; }
 }
 
-const icFooterLinkGroupCss = "/*!@html*/html.sc-ic-footer-link-group{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-footer-link-group{margin:0}/*!@main*/main.sc-ic-footer-link-group{display:block}/*!@h1*/h1.sc-ic-footer-link-group{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-footer-link-group{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-footer-link-group{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-footer-link-group{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-footer-link-group{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-footer-link-group,strong.sc-ic-footer-link-group{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-footer-link-group,kbd.sc-ic-footer-link-group,samp.sc-ic-footer-link-group{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-footer-link-group{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-footer-link-group,sup.sc-ic-footer-link-group{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-footer-link-group{bottom:-0.25em}/*!@sup*/sup.sc-ic-footer-link-group{top:-0.5em}/*!@img*/img.sc-ic-footer-link-group{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-footer-link-group,input.sc-ic-footer-link-group,optgroup.sc-ic-footer-link-group,select.sc-ic-footer-link-group,textarea.sc-ic-footer-link-group{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-footer-link-group,input.sc-ic-footer-link-group{overflow:visible}/*!@button,\nselect*/button.sc-ic-footer-link-group,select.sc-ic-footer-link-group{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-footer-link-group,[type=\"button\"].sc-ic-footer-link-group,[type=\"reset\"].sc-ic-footer-link-group,[type=\"submit\"].sc-ic-footer-link-group{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-footer-link-group::-moz-focus-inner,[type=\"button\"].sc-ic-footer-link-group::-moz-focus-inner,[type=\"reset\"].sc-ic-footer-link-group::-moz-focus-inner,[type=\"submit\"].sc-ic-footer-link-group::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-footer-link-group:-moz-focusring,[type=\"button\"].sc-ic-footer-link-group:-moz-focusring,[type=\"reset\"].sc-ic-footer-link-group:-moz-focusring,[type=\"submit\"].sc-ic-footer-link-group:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-footer-link-group{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-footer-link-group{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-footer-link-group{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-footer-link-group{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-footer-link-group,[type=\"radio\"].sc-ic-footer-link-group{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-footer-link-group::-webkit-inner-spin-button,[type=\"number\"].sc-ic-footer-link-group::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-footer-link-group{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-footer-link-group::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-footer-link-group::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-footer-link-group{display:block}/*!@summary*/summary.sc-ic-footer-link-group{display:list-item}/*!@template*/template.sc-ic-footer-link-group{display:none}/*!@[hidden]*/[hidden].sc-ic-footer-link-group{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-footer-link-group,body.sc-ic-footer-link-group,div.sc-ic-footer-link-group,span.sc-ic-footer-link-group,applet.sc-ic-footer-link-group,object.sc-ic-footer-link-group,iframe.sc-ic-footer-link-group,h1.sc-ic-footer-link-group,h2.sc-ic-footer-link-group,h3.sc-ic-footer-link-group,h4.sc-ic-footer-link-group,h5.sc-ic-footer-link-group,h6.sc-ic-footer-link-group,p.sc-ic-footer-link-group,blockquote.sc-ic-footer-link-group,pre.sc-ic-footer-link-group,a.sc-ic-footer-link-group,abbr.sc-ic-footer-link-group,acronym.sc-ic-footer-link-group,address.sc-ic-footer-link-group,big.sc-ic-footer-link-group,cite.sc-ic-footer-link-group,code.sc-ic-footer-link-group,del.sc-ic-footer-link-group,dfn.sc-ic-footer-link-group,em.sc-ic-footer-link-group,img.sc-ic-footer-link-group,ins.sc-ic-footer-link-group,kbd.sc-ic-footer-link-group,q.sc-ic-footer-link-group,s.sc-ic-footer-link-group,samp.sc-ic-footer-link-group,small.sc-ic-footer-link-group,strike.sc-ic-footer-link-group,strong.sc-ic-footer-link-group,sub.sc-ic-footer-link-group,sup.sc-ic-footer-link-group,tt.sc-ic-footer-link-group,var.sc-ic-footer-link-group,b.sc-ic-footer-link-group,u.sc-ic-footer-link-group,i.sc-ic-footer-link-group,center.sc-ic-footer-link-group,dl.sc-ic-footer-link-group,dt.sc-ic-footer-link-group,dd.sc-ic-footer-link-group,ol.sc-ic-footer-link-group,ul.sc-ic-footer-link-group,li.sc-ic-footer-link-group,fieldset.sc-ic-footer-link-group,form.sc-ic-footer-link-group,label.sc-ic-footer-link-group,legend.sc-ic-footer-link-group,table.sc-ic-footer-link-group,caption.sc-ic-footer-link-group,tbody.sc-ic-footer-link-group,tfoot.sc-ic-footer-link-group,thead.sc-ic-footer-link-group,tr.sc-ic-footer-link-group,th.sc-ic-footer-link-group,td.sc-ic-footer-link-group,article.sc-ic-footer-link-group,aside.sc-ic-footer-link-group,canvas.sc-ic-footer-link-group,details.sc-ic-footer-link-group,embed.sc-ic-footer-link-group,figure.sc-ic-footer-link-group,figcaption.sc-ic-footer-link-group,footer.sc-ic-footer-link-group,header.sc-ic-footer-link-group,hgroup.sc-ic-footer-link-group,menu.sc-ic-footer-link-group,nav.sc-ic-footer-link-group,output.sc-ic-footer-link-group,ruby.sc-ic-footer-link-group,section.sc-ic-footer-link-group,summary.sc-ic-footer-link-group,time.sc-ic-footer-link-group,mark.sc-ic-footer-link-group,audio.sc-ic-footer-link-group,video.sc-ic-footer-link-group{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.footer-link-group-sparse)*/.footer-link-group-sparse.sc-ic-footer-link-group-h{--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-group-title-margin-top:0;--footer-link-group-title-margin-bottom:var(--ic-space-md)}/*!@:host(.footer-link-group-small)*/.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-margin-right:0;--footer-link-group-title-margin-top:var(--ic-space-md);--footer-link-group-title-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}/*!@:host(.footer-link-group-light.footer-link-group-small)*/.footer-link-group-light.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-border-bottom:var(--ic-keyline-lighten)}/*!@:host(.footer-link-group-dark.footer-link-group-small)*/.footer-link-group-dark.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-border-bottom:var(--ic-keyline-darken)}/*!@:host(.footer-link-group)*/.footer-link-group.sc-ic-footer-link-group-h{margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}/*!@:host(.footer-link-group-small.footer-link-group-light:hover)*/.footer-link-group-small.footer-link-group-light.sc-ic-footer-link-group-h:hover{background-color:var(--ic-action-light-bg-hover);cursor:pointer}/*!@:host(.footer-link-group-small.footer-link-group-dark:hover)*/.footer-link-group-small.footer-link-group-dark.sc-ic-footer-link-group-h:hover{background-color:var(--ic-action-dark-bg-hover);cursor:pointer}/*!@:host(.footer-link-group-sparse:focus)*/.footer-link-group-sparse.sc-ic-footer-link-group-h:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}/*!@:host(.footer-link-group-small:focus)*/.footer-link-group-small.sc-ic-footer-link-group-h:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}/*!@:host(.footer-link-group-small.footer-link-group-light:active)*/.footer-link-group-small.footer-link-group-light.sc-ic-footer-link-group-h:active{background-color:var(--ic-action-light-bg-active)}/*!@:host(.footer-link-group-small.footer-link-group-dark:active)*/.footer-link-group-small.footer-link-group-dark.sc-ic-footer-link-group-h:active{background-color:var(--ic-action-dark-bg-active)}/*!@.footer-link-group-title*/.footer-link-group-title.sc-ic-footer-link-group{margin-top:var(--footer-link-group-title-margin-top);margin-bottom:var(--footer-link-group-title-margin-bottom);flex-grow:1}/*!@.footer-link-group-toggle*/.footer-link-group-toggle.sc-ic-footer-link-group{fill:white !important}/*!@.footer-link-group-links*/.footer-link-group-links.sc-ic-footer-link-group{display:flex;flex-direction:column}/*!@.footer-link-group-header*/.footer-link-group-header.sc-ic-footer-link-group{display:flex;align-items:center}";
+const icFooterLinkGroupCss = "/*!@html*/html.sc-ic-footer-link-group{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-footer-link-group{margin:0}/*!@main*/main.sc-ic-footer-link-group{display:block}/*!@h1*/h1.sc-ic-footer-link-group{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-footer-link-group{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-footer-link-group{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-footer-link-group{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-footer-link-group{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-footer-link-group,strong.sc-ic-footer-link-group{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-footer-link-group,kbd.sc-ic-footer-link-group,samp.sc-ic-footer-link-group{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-footer-link-group{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-footer-link-group,sup.sc-ic-footer-link-group{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-footer-link-group{bottom:-0.25em}/*!@sup*/sup.sc-ic-footer-link-group{top:-0.5em}/*!@img*/img.sc-ic-footer-link-group{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-footer-link-group,input.sc-ic-footer-link-group,optgroup.sc-ic-footer-link-group,select.sc-ic-footer-link-group,textarea.sc-ic-footer-link-group{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-footer-link-group,input.sc-ic-footer-link-group{overflow:visible}/*!@button,\nselect*/button.sc-ic-footer-link-group,select.sc-ic-footer-link-group{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-footer-link-group,[type=\"button\"].sc-ic-footer-link-group,[type=\"reset\"].sc-ic-footer-link-group,[type=\"submit\"].sc-ic-footer-link-group{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-footer-link-group::-moz-focus-inner,[type=\"button\"].sc-ic-footer-link-group::-moz-focus-inner,[type=\"reset\"].sc-ic-footer-link-group::-moz-focus-inner,[type=\"submit\"].sc-ic-footer-link-group::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-footer-link-group:-moz-focusring,[type=\"button\"].sc-ic-footer-link-group:-moz-focusring,[type=\"reset\"].sc-ic-footer-link-group:-moz-focusring,[type=\"submit\"].sc-ic-footer-link-group:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-footer-link-group{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-footer-link-group{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-footer-link-group{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-footer-link-group{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-footer-link-group,[type=\"radio\"].sc-ic-footer-link-group{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-footer-link-group::-webkit-inner-spin-button,[type=\"number\"].sc-ic-footer-link-group::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-footer-link-group{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-footer-link-group::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-footer-link-group::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-footer-link-group{display:block}/*!@summary*/summary.sc-ic-footer-link-group{display:list-item}/*!@template*/template.sc-ic-footer-link-group{display:none}/*!@[hidden]*/[hidden].sc-ic-footer-link-group{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-footer-link-group,body.sc-ic-footer-link-group,div.sc-ic-footer-link-group,span.sc-ic-footer-link-group,applet.sc-ic-footer-link-group,object.sc-ic-footer-link-group,iframe.sc-ic-footer-link-group,h1.sc-ic-footer-link-group,h2.sc-ic-footer-link-group,h3.sc-ic-footer-link-group,h4.sc-ic-footer-link-group,h5.sc-ic-footer-link-group,h6.sc-ic-footer-link-group,p.sc-ic-footer-link-group,blockquote.sc-ic-footer-link-group,pre.sc-ic-footer-link-group,a.sc-ic-footer-link-group,abbr.sc-ic-footer-link-group,acronym.sc-ic-footer-link-group,address.sc-ic-footer-link-group,big.sc-ic-footer-link-group,cite.sc-ic-footer-link-group,code.sc-ic-footer-link-group,del.sc-ic-footer-link-group,dfn.sc-ic-footer-link-group,em.sc-ic-footer-link-group,img.sc-ic-footer-link-group,ins.sc-ic-footer-link-group,kbd.sc-ic-footer-link-group,q.sc-ic-footer-link-group,s.sc-ic-footer-link-group,samp.sc-ic-footer-link-group,small.sc-ic-footer-link-group,strike.sc-ic-footer-link-group,strong.sc-ic-footer-link-group,sub.sc-ic-footer-link-group,sup.sc-ic-footer-link-group,tt.sc-ic-footer-link-group,var.sc-ic-footer-link-group,b.sc-ic-footer-link-group,u.sc-ic-footer-link-group,i.sc-ic-footer-link-group,center.sc-ic-footer-link-group,dl.sc-ic-footer-link-group,dt.sc-ic-footer-link-group,dd.sc-ic-footer-link-group,ol.sc-ic-footer-link-group,ul.sc-ic-footer-link-group,li.sc-ic-footer-link-group,fieldset.sc-ic-footer-link-group,form.sc-ic-footer-link-group,label.sc-ic-footer-link-group,legend.sc-ic-footer-link-group,table.sc-ic-footer-link-group,caption.sc-ic-footer-link-group,tbody.sc-ic-footer-link-group,tfoot.sc-ic-footer-link-group,thead.sc-ic-footer-link-group,tr.sc-ic-footer-link-group,th.sc-ic-footer-link-group,td.sc-ic-footer-link-group,article.sc-ic-footer-link-group,aside.sc-ic-footer-link-group,canvas.sc-ic-footer-link-group,details.sc-ic-footer-link-group,embed.sc-ic-footer-link-group,figure.sc-ic-footer-link-group,figcaption.sc-ic-footer-link-group,footer.sc-ic-footer-link-group,header.sc-ic-footer-link-group,hgroup.sc-ic-footer-link-group,menu.sc-ic-footer-link-group,nav.sc-ic-footer-link-group,output.sc-ic-footer-link-group,ruby.sc-ic-footer-link-group,section.sc-ic-footer-link-group,summary.sc-ic-footer-link-group,time.sc-ic-footer-link-group,mark.sc-ic-footer-link-group,audio.sc-ic-footer-link-group,video.sc-ic-footer-link-group{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.footer-link-group-sparse)*/.footer-link-group-sparse.sc-ic-footer-link-group-h{--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-group-title-margin-top:0;--footer-link-group-title-margin-bottom:var(--ic-space-md)}/*!@:host(.footer-link-group-small)*/.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-margin-right:0;--footer-link-group-title-margin-top:var(--ic-space-md);--footer-link-group-title-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}/*!@:host(.footer-link-group-light.footer-link-group-small)*/.footer-link-group-light.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-border-bottom:var(--ic-keyline-lighten)}/*!@:host(.footer-link-group-dark.footer-link-group-small)*/.footer-link-group-dark.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-border-bottom:var(--ic-keyline-darken)}/*!@:host(.footer-link-group)*/.footer-link-group.sc-ic-footer-link-group-h{margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}/*!@:host(.footer-link-group-small.footer-link-group-light:hover)*/.footer-link-group-small.footer-link-group-light.sc-ic-footer-link-group-h:hover{background-color:var(--ic-action-light-bg-hover);cursor:pointer}/*!@:host(.footer-link-group-small.footer-link-group-dark:hover)*/.footer-link-group-small.footer-link-group-dark.sc-ic-footer-link-group-h:hover{background-color:var(--ic-action-dark-bg-hover);cursor:pointer}/*!@:host(.footer-link-group-sparse:focus)*/.footer-link-group-sparse.sc-ic-footer-link-group-h:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}/*!@:host(.footer-link-group-small:focus)*/.footer-link-group-small.sc-ic-footer-link-group-h:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}/*!@:host(.footer-link-group-small.footer-link-group-light:active)*/.footer-link-group-small.footer-link-group-light.sc-ic-footer-link-group-h:active{background-color:var(--ic-action-light-bg-active)}/*!@:host(.footer-link-group-small.footer-link-group-dark:active)*/.footer-link-group-small.footer-link-group-dark.sc-ic-footer-link-group-h:active{background-color:var(--ic-action-dark-bg-active)}/*!@:host ic-section-container*/.sc-ic-footer-link-group-h ic-section-container.sc-ic-footer-link-group{outline:none}/*!@.footer-link-group-title*/.footer-link-group-title.sc-ic-footer-link-group{margin-top:var(--footer-link-group-title-margin-top);margin-bottom:var(--footer-link-group-title-margin-bottom);flex-grow:1}/*!@.footer-link-group-toggle*/.footer-link-group-toggle.sc-ic-footer-link-group{fill:white !important}/*!@.footer-link-group-links*/.footer-link-group-links.sc-ic-footer-link-group{display:flex;flex-direction:column}/*!@.footer-link-group-header*/.footer-link-group-header.sc-ic-footer-link-group{display:flex;align-items:center}";
 
 class FooterLinkGroup {
     constructor(hostRef) {
@@ -10890,7 +10891,7 @@ class FooterLinkGroup {
             }, role: "listitem" }, hAsync("div", { class: "footer-link-group-title" }, hAsync("ic-typography", { variant: "subtitle-small" }, groupTitle)), hAsync("div", { class: "footer-link-group-links", role: "list" }, hAsync("slot", null)))) : (hAsync(Host, { class: {
                 ["footer-link-group footer-link-group-small"]: true,
                 [`footer-link-group-${this.dropdownIconStyle}`]: true,
-            }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded }, hAsync("ic-section-container", { fullHeight: true }, hAsync("div", { class: "footer-link-group-header" }, hAsync("div", { class: "footer-link-group-title" }, hAsync("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (hAsync("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, hAsync("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (hAsync("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, hAsync("g", { transform: "translate(0 1200) scale(1 -1)" }, hAsync("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (hAsync("div", { class: "footer-link-group-links", role: "list" }, hAsync("slot", null))))));
+            }, onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded, role: "listitem" }, hAsync("ic-section-container", { tabindex: "0", fullHeight: true }, hAsync("div", { class: "footer-link-group-header" }, hAsync("div", { class: "footer-link-group-title" }, hAsync("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (hAsync("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, hAsync("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (hAsync("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, hAsync("g", { transform: "translate(0 1200) scale(1 -1)" }, hAsync("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (hAsync("div", { class: "footer-link-group-links", role: "list" }, hAsync("slot", null))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -14251,10 +14252,7 @@ class MenuItem {
                     checked: this.toggleChecked,
                 });
             }
-            this.handleMenuItemClick.emit({
-                label: this.label,
-                hasSubMenu: !!this.el.submenuTriggerFor,
-            });
+            this.handleMenuItemClick.emit(this.el);
         };
         this.getMenuItemAriaLabel = () => {
             let ariaLabel = this.label;
@@ -14813,6 +14811,7 @@ class NavigationItem {
         this.navItemClicked = createEvent(this, "navItemClicked", 7);
         this.isInitialRender = true;
         this.hostMutationObserver = null;
+        this.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
         this.ARIA_LABEL_STRING = "aria-label";
         this.displayDefaultNavigationItem = (href, hreflang, target, rel, referrerpolicy, download, label) => {
             const variant = this.isTopNavChild || this.inTopNavSideMenu ? "body" : "label";
@@ -14837,6 +14836,7 @@ class NavigationItem {
             const { sideNavExpanded, sideNavMobile } = detail;
             this.sideNavExpanded = sideNavExpanded;
             this.isSideNavMobile = sideNavMobile;
+            this.sideNavToggleTooltip(!(sideNavExpanded || sideNavMobile));
         };
         this.handleBlur = ({ relatedTarget }) => {
             if (relatedTarget === null ||
@@ -14876,6 +14876,24 @@ class NavigationItem {
             }
             return hAsync("slot", null);
         };
+        // Displays tooltip only once the collapsing animation is finished
+        this.sideNavToggleTooltip = (showTooltip) => {
+            const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
+            const collapsedClass = "tooltip-navigation-item-side-nav-collapsed";
+            let timer;
+            if (tooltip) {
+                if (showTooltip) {
+                    tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon
+                    timer = setTimeout(() => {
+                        tooltip.classList.add(collapsedClass);
+                    }, this.ANIMATION_DURATION);
+                }
+                else {
+                    clearTimeout(timer);
+                    tooltip.classList.remove(collapsedClass);
+                }
+            }
+        };
         this.deviceSize = DEVICE_SIZES.XL;
         this.focusStyle = getThemeForegroundColor();
         this.inTopNavSideMenu = false;
@@ -14908,10 +14926,14 @@ class NavigationItem {
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a, _b;
         const { navType, parent } = getNavItemParentDetails(this.el);
         this.navigationType = navType;
         this.parentEl = parent;
         this.deviceSize = getCurrentDeviceSize();
+        this.sideNavExpanded =
+            ((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.classList.contains("sm-expanded")) ||
+                ((_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.classList.contains("xs-menu-open"));
         if (this.navigationType === "side") {
             this.parentEl.addEventListener("sideNavExpanded", this.sideNavExpandHandler);
         }
@@ -14974,8 +14996,7 @@ class NavigationItem {
                 ["expandable"]: this.expandable,
             }, onBlur: isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null, onClick: this.handleClick, "aria-current": selected ? "page" : null, role: "listitem" }, hAsync("ic-tooltip", { label: this.generateTooltipLabel(), target: "navigation-item", placement: "right", class: {
                 ["tooltip-navigation-item"]: true,
-                ["tooltip-navigation-item-side-nav-collapsed"]: (!this.sideNavExpanded || this.displayNavigationTooltip) &&
-                    this.navigationType === "side",
+                ["tooltip-navigation-item-side-nav-collapsed"]: this.displayNavigationTooltip && this.navigationType === "side",
                 ["tooltip-long-label-navigation-item-side-nav-expanded"]: this.el.hasAttribute("[display-navigation-tooltip = 'true']"),
             } }, this.renderNavigationItemContent())));
     }
@@ -15747,8 +15768,8 @@ class PopoverMenu {
         }
     }
     handleMenuItemClick(ev) {
-        if (!ev.detail.hasSubMenu && ev.detail.label !== "Back") {
-            this.closeMenu();
+        if (!ev.detail.submenuTriggerFor && ev.detail.label !== "Back") {
+            this.closeMenu(false, ev.detail);
         }
     }
     // This is listening for the event emitted when a menu item is acting as a trigger button
@@ -15822,17 +15843,17 @@ class PopoverMenu {
      * @internal Close the menu, emit icPopoverClosed of the root popover
      * @param setFocusToAnchor when true return focus to anchor element when menu is closed
      */
-    async closeMenu(setFocusToAnchor = false) {
+    async closeMenu(setFocusToAnchor = false, menuElement) {
         var _a;
         this.open = false;
         if (this.parentPopover) {
-            this.parentPopover.closeMenu(setFocusToAnchor);
+            this.parentPopover.closeMenu(setFocusToAnchor, menuElement);
         }
         else {
             if (setFocusToAnchor) {
                 (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
             }
-            this.icPopoverClosed.emit();
+            this.icPopoverClosed.emit(menuElement);
         }
     }
     render() {
@@ -17683,8 +17704,10 @@ class SideNavigation {
                 appTitle.classList.remove("ic-typography-no-wrap");
             }, this.ANIMATION_DURATION);
         };
-        this.toggleMenuExpanded = () => {
-            this.menuExpanded = !this.menuExpanded;
+        this.toggleMenuExpanded = (expanded) => {
+            if (this.deviceSize > DEVICE_SIZES.S) {
+                this.menuExpanded = expanded;
+            }
             if (this.menuExpanded) {
                 this.setAndRemoveNoWrapAfterMenuExpanded();
                 this.el.shadowRoot
@@ -17817,9 +17840,11 @@ class SideNavigation {
                 navItems[0].querySelector("div");
             const navItemSVG = navItems[0].querySelector("svg");
             const navStyles = {
-                gap: window.getComputedStyle(navItemLink).gap,
-                iconWidth: window.getComputedStyle(navItemSVG).width,
-                paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,
+                gap: navItemLink ? window.getComputedStyle(navItemLink).gap : "0",
+                iconWidth: navItemSVG ? window.getComputedStyle(navItemSVG).width : "0",
+                paddingLeft: navItemLink
+                    ? window.getComputedStyle(navItemLink).paddingLeft
+                    : "0",
             };
             return Object.values(navStyles).reduce((prev, curr) => {
                 return (prev += parseInt(curr));
@@ -17862,10 +17887,12 @@ class SideNavigation {
          * @param value - padding-top css value
          */
         this.setParentPaddingTop = (value) => {
-            this.el.parentElement.style.setProperty("padding-top", value);
+            var _a;
+            (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("padding-top", value);
         };
         this.setParentPaddingLeft = (value) => {
-            this.el.parentElement.style.setProperty("padding-left", value);
+            var _a;
+            (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("padding-left", value);
         };
         this.renderAppTitle = (isAppNameSubtitleVariant) => {
             const displayShortAppTitle = this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);
@@ -17876,7 +17903,7 @@ class SideNavigation {
                     : undefined }, hAsync("h1", null, displayShortAppTitle ? this.shortAppTitle : this.appTitle)));
         };
         this.resizeObserverCallback = (currSize) => {
-            var _a;
+            var _a, _b, _c;
             this.deviceSize = currSize;
             const isSmallAndDisableTopBar = currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;
             if (!this.disableAutoParentStyling) {
@@ -17885,10 +17912,10 @@ class SideNavigation {
                 if (isSmallAndDisableTopBar)
                     this.setParentPaddingLeft("0");
                 if (isSmallAndDisableTopBar && this.inline) {
-                    this.el.parentElement.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
+                    (_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
                 }
                 else if (!isSmallAndDisableTopBar) {
-                    this.el.parentElement.style.setProperty("height", "100%");
+                    (_c = this.el.parentElement) === null || _c === void 0 ? void 0 : _c.style.setProperty("height", "100%");
                 }
             }
             if (!this.disableAutoParentStyling) {
@@ -17966,7 +17993,7 @@ class SideNavigation {
         this.version = undefined;
     }
     watchExpandedHandler() {
-        this.setMenuExpanded(this.expanded);
+        this.toggleMenuExpanded(this.expanded);
     }
     componentWillLoad() {
         this.setMenuExpanded(this.expanded);
@@ -18025,7 +18052,7 @@ class SideNavigation {
             } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (hAsync("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "primary-navigation" }))))), hAsync("div", { class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (hAsync("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "secondary-navigation" })))), hAsync("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && hAsync("ic-divider", null), displayExpandBtn && (hAsync("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), hAsync("div", { class: "app-status-wrapper" }, status !== "" && (hAsync("div", { class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (hAsync("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "secondary-navigation" })))), hAsync("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && hAsync("ic-divider", null), displayExpandBtn && (hAsync("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), hAsync("div", { class: "app-status-wrapper" }, status !== "" && (hAsync("div", { class: {
                 ["app-status"]: true,
             } }, hAsync("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (hAsync("ic-typography", { variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
@@ -19150,6 +19177,17 @@ class TextField {
                 }
             });
         };
+        this.showValidation = () => {
+            const maxNumChars = this.readonly ? 0 : this.maxLength;
+            const emptyString = isEmptyString(this.validationStatus) ||
+                isEmptyString(this.validationText);
+            const valueOutsideRange = this.minValueUnattained || this.maxValueExceeded;
+            const charOutsideRange = maxNumChars > 0 ||
+                this.maxCharactersError ||
+                this.minCharactersUnattained;
+            return ((!emptyString || valueOutsideRange || charOutsideRange) &&
+                !this.validationInlineInternal);
+        };
         this.numChars = 0;
         this.maxCharactersReached = false;
         this.maxCharactersError = false;
@@ -19256,7 +19294,7 @@ class TextField {
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { inputId, name, label, required, size, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, maxCharacters, maxCharactersError, maxCharactersReached, minCharacters, minCharactersUnattained, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
+        const { inputId, name, label, required, size, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, maxCharacters, maxCharactersError, maxCharactersReached, minCharacters, minCharactersUnattained, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, showValidation, } = this;
         const disabledMode = readonly || disabled;
         const currentStatus = maxLengthExceeded ||
             maxValueExceeded ||
@@ -19309,14 +19347,7 @@ class TextField {
                 ["no-resize"]: resize === false || readonly,
                 ["no-left-pad"]: !showLeftIcon && readonly,
                 ["readonly"]: readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (hAsync("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (hAsync("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && hAsync("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
-            !isEmptyString(validationText) ||
-            maxNumChars > 0 ||
-            maxValueExceeded ||
-            maxCharactersError ||
-            minCharactersUnattained ||
-            minValueUnattained) &&
-            !validationInlineInternal && (hAsync("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (hAsync("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (hAsync("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && hAsync("slot", { name: "menu" }), showValidation() && (hAsync("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
@@ -19708,6 +19739,9 @@ class ToggleButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.icToggleChecked = createEvent(this, "icToggleChecked", 7);
+        this.hostMutationObserver = null;
+        this.hostMutationCallback = () => {
+        };
         this.handleFocus = (ev) => {
             ev.stopImmediatePropagation();
         };
@@ -19741,6 +19775,18 @@ class ToggleButton {
                 propName: this.variant === "icon" ? "accessible-label" : "label",
             },
         ], "Toggle button");
+        if (typeof MutationObserver !== "undefined") {
+            this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+            this.hostMutationObserver.observe(this.el, {
+                childList: true,
+            });
+        }
+    }
+    disconnectedCallback() {
+        if (this.hostMutationObserver !== null &&
+            this.hostMutationObserver !== undefined) {
+            this.hostMutationObserver.disconnect();
+        }
     }
     handleHostClick(e) {
         if (this.disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "2.31.0",
+  "version": "2.32.1",
   "description": "A web component UI library compiled with StencilJS",
   "author": "mi6",
   "bugs": {
@@ -96,5 +96,5 @@
     "webpack": "^5.76.0"
   },
   "license": "MIT",
-  "gitHead": "8f1cf8223eb9c9d871cca4af42fc7c39db4f1b6a"
+  "gitHead": "f980df4943f525b9ff377a859284bec90a5725da"
 }