@ukic/web-components 2.23.0 → 2.25.0

package/dist/collection/components/ic-accordion/ic-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl: HTMLDivElement;\n  private accordionBtnHeading: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visiblity\";\n\n  @Element() el: HTMLIcAccordionElement;\n  /**\n   * @internal Determines whether the light or dark variant of the accordion should be displayed.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.accordionBtnHeading) {\n      this.accordionBtnHeading.focus();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.expandedContentEl) {\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n        true\n      );\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, this.expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    el.style.transitionDuration = `${duration}ms`;\n    el.style.transitionProperty = property;\n    el.style.transitionDelay = delay;\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(\"expanded-content-opened\");\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    const elementHeight = this.expandedContentEl.scrollHeight;\n    if (elementHeight > 0 && this.expanded) {\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.style.height = `${elementHeight}px`;\n      this.setAccordionAnimation(\n        this.expandedContentEl,\n        \"300\",\n        \"height\",\n        \"ease-out\"\n      );\n\n      this.expandedContentEl.addEventListener(\n        \"transitionend\",\n        (e: TransitionEvent) => {\n          this.setExpandedContentStyle(e, this.expandedContentEl);\n        }\n      );\n    } else if (!this.expanded) {\n      this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n      if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n        this.expandedContentEl.style.height = \"0\";\n        this.setAccordionAnimation(\n          this.expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-in\"\n        );\n        this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n      }\n      this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n        this.hideExpandedContent(e, this.expandedContentEl);\n      });\n    }\n  };\n\n  render() {\n    const { appearance, size, disabled, expanded } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [`${appearance}`]: true,\n          [\"disabled\"]: disabled,\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl: HTMLDivElement;\n  private accordionBtnHeading: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n  @Element() el: HTMLIcAccordionElement;\n  /**\n   * @internal Determines whether the light or dark variant of the accordion should be displayed.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.accordionBtnHeading) {\n      this.accordionBtnHeading.focus();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.expandedContentEl) {\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n        true\n      );\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, this.expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    el.style.transitionDuration = `${duration}ms`;\n    el.style.transitionProperty = property;\n    el.style.transitionDelay = delay;\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(\"expanded-content-opened\");\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    const elementHeight = this.expandedContentEl.scrollHeight;\n    if (elementHeight > 0 && this.expanded) {\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.style.height = `${elementHeight}px`;\n      this.setAccordionAnimation(\n        this.expandedContentEl,\n        \"300\",\n        \"height\",\n        \"ease-out\"\n      );\n\n      this.expandedContentEl.addEventListener(\n        \"transitionend\",\n        (e: TransitionEvent) => {\n          this.setExpandedContentStyle(e, this.expandedContentEl);\n        }\n      );\n    } else if (!this.expanded) {\n      this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n      if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n        this.expandedContentEl.style.height = \"0\";\n        this.setAccordionAnimation(\n          this.expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-in\"\n        );\n        this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n      }\n      this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n        this.hideExpandedContent(e, this.expandedContentEl);\n      });\n    }\n  };\n\n  render() {\n    const { appearance, size, disabled, expanded } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [`${appearance}`]: true,\n          [\"disabled\"]: disabled,\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            {this.message ? (\n              <ic-typography variant=\"body\">{this.message}</ic-typography>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js

@@ -267,7 +267,7 @@ describe("ic-accordion snapshots", () => {
             page.rootInstance.expandedContentEl = accordionExpanded;
             page.rootInstance.expandedContentEl.clientHeight = 0;
             await page.rootInstance.hideExpandedContent(transitionEvent, page.rootInstance.expandedContentEl);
-            expect(page.rootInstance.expandedContentEl.style.getPropertyValue("--ic-expanded-content-visiblity")).toBe("hidden");
+            expect(page.rootInstance.expandedContentEl.style.getPropertyValue("--ic-expanded-content-visibility")).toBe("hidden");
         });
         it("should set visibility to undefined if client height is greater than 0", async () => {
             const transitionEvent = {
@@ -286,7 +286,7 @@ describe("ic-accordion snapshots", () => {
             page.rootInstance.expandedContentEl = accordionExpanded;
             page.rootInstance.expandedContentEl.clientHeight = 50;
             await page.rootInstance.hideExpandedContent(transitionEvent, page.rootInstance.expandedContentEl);
-            expect(page.rootInstance.expandedContentEl.style.getPropertyValue("--ic-expanded-content-visiblity")).toBe("");
+            expect(page.rootInstance.expandedContentEl.style.getPropertyValue("--ic-expanded-content-visibility")).toBe("");
         });
         it("should call 'setFocus' when accordion can be focused", async () => {
             const page = await newSpecPage({

package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-accordion.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion/test/basic/ic-accordion.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Accordion } from \"../../ic-accordion\";\n\ndescribe(\"ic-accordion snapshots\", () => {\n  it(\"should match default snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>\n      `,\n    });\n    expect(page.root).toMatchSnapshot(\"renders as default\");\n  });\n\n  it(\"should match light snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders as light\");\n  });\n\n  it(\"should match with icon snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <svg\n          slot=\"icon\"\n          width=\"20\"\n          height=\"1em\"\n          viewBox=\"0 0 512 512\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\"\n          />\n        </svg>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders with icon\");\n  });\n\n  it(\"should render with slot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\" size=\"small\">\n        <slot>This is an example of the main body text.</slot>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders small accordion\");\n  });\n\n  it(\"should match small snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\" size=\"small\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders small accordion\");\n  });\n\n  it(\"should match large snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion size=\"large\" heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders large accordion\");\n  });\n\n  it(\"should render with a heading slot when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `  \n      <ic-accordion>\n        <slot name=\"heading\"/></slot>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders with heading slot\");\n  });\n\n  it(\"should render in a disabled state\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\" disabled>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"disabled\");\n  });\n\n  describe(\"ic-accordion component\", () => {\n    it(\"it should test the toggleExpanded function\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n\n      expect(page.root.expanded).toBe(false);\n      await page.rootInstance.toggleExpanded();\n      await page.waitForChanges();\n      expect(page.root.expanded).toBe(true);\n    });\n\n    it(\"should test id number is added to accordion\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n      const eventSpy = jest.fn();\n\n      const accordionId = page.root.id;\n      page.root.addEventListener(\"accordionClicked\", eventSpy);\n      await page.waitForChanges();\n      await page.rootInstance.toggleExpanded();\n      await page.waitForChanges();\n\n      expect(eventSpy).toHaveBeenCalledWith(\n        expect.objectContaining({\n          detail: expect.objectContaining({\n            id: accordionId,\n          }),\n        })\n      );\n    });\n\n    it(\"it should test the disabled function\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" disabled>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n      expect(page.root.disabled).toBe(true);\n    });\n\n    it(\"it should add transition styling to the element\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" disabled>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n      const div = document.createElement(\"div\");\n      page.rootInstance.setAccordionAnimation(div, \"300\", \"height\", \"ease-out\");\n      expect(div.style.transitionDuration).toBe(\"300ms\");\n      expect(div.style.transitionProperty).toBe(\"height\");\n      expect(div.style.transitionDelay).toBe(\"ease-out\");\n    });\n\n    it(\"it should call setAccordionAnimation if scroll height > 0 and expanded = true\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" expanded>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n\n      const spySetAccordionAnimation = jest.spyOn(\n        page.rootInstance,\n        \"setAccordionAnimation\"\n      );\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      Object.defineProperty(\n        page.rootInstance.expandedContentEl,\n        \"scrollHeight\",\n        { configurable: true, value: 500 }\n      );\n      page.rootInstance.animateExpandedContent();\n\n      expect(spySetAccordionAnimation).toHaveBeenCalled();\n    });\n\n    it(\"it should call setAccordionAnimation if scroll height = '500' and expanded = 'false'\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" >\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n      const spySetAccordionAnimation = jest.spyOn(\n        page.rootInstance,\n        \"setAccordionAnimation\"\n      );\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n\n      Object.defineProperty(\n        page.rootInstance.expandedContentEl,\n        \"scrollHeight\",\n        { configurable: true, value: 500 }\n      );\n      page.rootInstance.animateExpandedContent();\n      expect(spySetAccordionAnimation).toHaveBeenCalled();\n    });\n\n    it(\"should set height and .expanded-content-opened on expanded content\", async () => {\n      const transitionEvent = {\n        propertyName: \"height\",\n      } as TransitionEvent;\n\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" >\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.clientHeight = 50;\n\n      await page.rootInstance.setExpandedContentStyle(\n        transitionEvent,\n        page.rootInstance.expandedContentEl\n      );\n\n      expect(\n        page.rootInstance.expandedContentEl.className.split(\" \")\n      ).toContain(\"expanded-content-opened\");\n      expect(page.rootInstance.expandedContentEl.style.height).toBe(\"auto\");\n    });\n\n    it(\"should not set height and .expanded-content-opened on expanded content\", async () => {\n      const transitionEvent = {\n        propertyName: \"height\",\n      } as TransitionEvent;\n\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" >\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.clientHeight = 0;\n\n      await page.rootInstance.setExpandedContentStyle(\n        transitionEvent,\n        page.rootInstance.expandedContentEl\n      );\n\n      expect(\n        page.rootInstance.expandedContentEl.className.split(\" \")\n      ).not.toContain(\"expanded-content-opened\");\n      expect(page.rootInstance.expandedContentEl.style.height).toBe(\"\");\n\n      await page.rootInstance.disconnectedCallback();\n    });\n\n    it(\"should set visibility on expanded content to hidden\", async () => {\n      const transitionEvent = {\n        propertyName: \"height\",\n      } as TransitionEvent;\n\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.clientHeight = 0;\n\n      await page.rootInstance.hideExpandedContent(\n        transitionEvent,\n        page.rootInstance.expandedContentEl\n      );\n\n      expect(\n        (\n          page.rootInstance.expandedContentEl as HTMLDivElement\n        ).style.getPropertyValue(\"--ic-expanded-content-visiblity\")\n      ).toBe(\"hidden\");\n    });\n\n    it(\"should set visibility to undefined if client height is greater than 0\", async () => {\n      const transitionEvent = {\n        propertyName: \"height\",\n      } as TransitionEvent;\n\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.clientHeight = 50;\n\n      await page.rootInstance.hideExpandedContent(\n        transitionEvent,\n        page.rootInstance.expandedContentEl\n      );\n\n      expect(\n        (\n          page.rootInstance.expandedContentEl as HTMLDivElement\n        ).style.getPropertyValue(\"--ic-expanded-content-visiblity\")\n      ).toBe(\"\");\n    });\n\n    it(\"should call 'setFocus' when accordion can be focused\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      //Can't expect anything in this test - this is to increase code coverage only\n      await page.rootInstance.setFocus().toHaveBeenCalled;\n    });\n\n    it(\"should call setExpandedContentStyle when transitionend in animateExpandedContent and expanded is true\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      const setExpandedContentStyleSpy = jest.spyOn(\n        page.rootInstance,\n        \"setExpandedContentStyle\"\n      );\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.scrollHeight = 50;\n      page.rootInstance.expanded = true;\n\n      await page.rootInstance.animateExpandedContent();\n\n      const event = new Event(\"transitionend\");\n      page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n      expect(setExpandedContentStyleSpy).toHaveBeenCalled();\n    });\n\n    it(\"should call hideExpandedContent when transitionend in animateExpandedContent and expanded is false\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      const hideExpandedContentSpy = jest.spyOn(\n        page.rootInstance,\n        \"hideExpandedContent\"\n      );\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.scrollHeight = 50;\n      page.rootInstance.expanded = false;\n\n      await page.rootInstance.animateExpandedContent();\n\n      const event = new Event(\"transitionend\");\n      page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n      expect(hideExpandedContentSpy).toHaveBeenCalled();\n    });\n  });\n});\n"]}
+{"version":3,"file":"ic-accordion.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion/test/basic/ic-accordion.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Accordion } from \"../../ic-accordion\";\n\ndescribe(\"ic-accordion snapshots\", () => {\n  it(\"should match default snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>\n      `,\n    });\n    expect(page.root).toMatchSnapshot(\"renders as default\");\n  });\n\n  it(\"should match light snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders as light\");\n  });\n\n  it(\"should match with icon snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <svg\n          slot=\"icon\"\n          width=\"20\"\n          height=\"1em\"\n          viewBox=\"0 0 512 512\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\"\n          />\n        </svg>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders with icon\");\n  });\n\n  it(\"should render with slot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\" size=\"small\">\n        <slot>This is an example of the main body text.</slot>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders small accordion\");\n  });\n\n  it(\"should match small snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\" size=\"small\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders small accordion\");\n  });\n\n  it(\"should match large snapshot\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion size=\"large\" heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders large accordion\");\n  });\n\n  it(\"should render with a heading slot when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `  \n      <ic-accordion>\n        <slot name=\"heading\"/></slot>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders with heading slot\");\n  });\n\n  it(\"should render in a disabled state\", async () => {\n    const page = await newSpecPage({\n      components: [Accordion],\n      html: `\n      <ic-accordion heading=\"Accordion 1\" disabled>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n    });\n    expect(page.root).toMatchSnapshot(\"disabled\");\n  });\n\n  describe(\"ic-accordion component\", () => {\n    it(\"it should test the toggleExpanded function\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n\n      expect(page.root.expanded).toBe(false);\n      await page.rootInstance.toggleExpanded();\n      await page.waitForChanges();\n      expect(page.root.expanded).toBe(true);\n    });\n\n    it(\"should test id number is added to accordion\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n      const eventSpy = jest.fn();\n\n      const accordionId = page.root.id;\n      page.root.addEventListener(\"accordionClicked\", eventSpy);\n      await page.waitForChanges();\n      await page.rootInstance.toggleExpanded();\n      await page.waitForChanges();\n\n      expect(eventSpy).toHaveBeenCalledWith(\n        expect.objectContaining({\n          detail: expect.objectContaining({\n            id: accordionId,\n          }),\n        })\n      );\n    });\n\n    it(\"it should test the disabled function\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" disabled>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n      expect(page.root.disabled).toBe(true);\n    });\n\n    it(\"it should add transition styling to the element\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" disabled>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n      const div = document.createElement(\"div\");\n      page.rootInstance.setAccordionAnimation(div, \"300\", \"height\", \"ease-out\");\n      expect(div.style.transitionDuration).toBe(\"300ms\");\n      expect(div.style.transitionProperty).toBe(\"height\");\n      expect(div.style.transitionDelay).toBe(\"ease-out\");\n    });\n\n    it(\"it should call setAccordionAnimation if scroll height > 0 and expanded = true\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" expanded>\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n\n      const spySetAccordionAnimation = jest.spyOn(\n        page.rootInstance,\n        \"setAccordionAnimation\"\n      );\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      Object.defineProperty(\n        page.rootInstance.expandedContentEl,\n        \"scrollHeight\",\n        { configurable: true, value: 500 }\n      );\n      page.rootInstance.animateExpandedContent();\n\n      expect(spySetAccordionAnimation).toHaveBeenCalled();\n    });\n\n    it(\"it should call setAccordionAnimation if scroll height = '500' and expanded = 'false'\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" >\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n      const spySetAccordionAnimation = jest.spyOn(\n        page.rootInstance,\n        \"setAccordionAnimation\"\n      );\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n\n      Object.defineProperty(\n        page.rootInstance.expandedContentEl,\n        \"scrollHeight\",\n        { configurable: true, value: 500 }\n      );\n      page.rootInstance.animateExpandedContent();\n      expect(spySetAccordionAnimation).toHaveBeenCalled();\n    });\n\n    it(\"should set height and .expanded-content-opened on expanded content\", async () => {\n      const transitionEvent = {\n        propertyName: \"height\",\n      } as TransitionEvent;\n\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" >\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.clientHeight = 50;\n\n      await page.rootInstance.setExpandedContentStyle(\n        transitionEvent,\n        page.rootInstance.expandedContentEl\n      );\n\n      expect(\n        page.rootInstance.expandedContentEl.className.split(\" \")\n      ).toContain(\"expanded-content-opened\");\n      expect(page.rootInstance.expandedContentEl.style.height).toBe(\"auto\");\n    });\n\n    it(\"should not set height and .expanded-content-opened on expanded content\", async () => {\n      const transitionEvent = {\n        propertyName: \"height\",\n      } as TransitionEvent;\n\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n      <ic-accordion heading=\"Accordion 1\" >\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>`,\n      });\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.clientHeight = 0;\n\n      await page.rootInstance.setExpandedContentStyle(\n        transitionEvent,\n        page.rootInstance.expandedContentEl\n      );\n\n      expect(\n        page.rootInstance.expandedContentEl.className.split(\" \")\n      ).not.toContain(\"expanded-content-opened\");\n      expect(page.rootInstance.expandedContentEl.style.height).toBe(\"\");\n\n      await page.rootInstance.disconnectedCallback();\n    });\n\n    it(\"should set visibility on expanded content to hidden\", async () => {\n      const transitionEvent = {\n        propertyName: \"height\",\n      } as TransitionEvent;\n\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.clientHeight = 0;\n\n      await page.rootInstance.hideExpandedContent(\n        transitionEvent,\n        page.rootInstance.expandedContentEl\n      );\n\n      expect(\n        (\n          page.rootInstance.expandedContentEl as HTMLDivElement\n        ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n      ).toBe(\"hidden\");\n    });\n\n    it(\"should set visibility to undefined if client height is greater than 0\", async () => {\n      const transitionEvent = {\n        propertyName: \"height\",\n      } as TransitionEvent;\n\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.clientHeight = 50;\n\n      await page.rootInstance.hideExpandedContent(\n        transitionEvent,\n        page.rootInstance.expandedContentEl\n      );\n\n      expect(\n        (\n          page.rootInstance.expandedContentEl as HTMLDivElement\n        ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n      ).toBe(\"\");\n    });\n\n    it(\"should call 'setFocus' when accordion can be focused\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      //Can't expect anything in this test - this is to increase code coverage only\n      await page.rootInstance.setFocus().toHaveBeenCalled;\n    });\n\n    it(\"should call setExpandedContentStyle when transitionend in animateExpandedContent and expanded is true\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      const setExpandedContentStyleSpy = jest.spyOn(\n        page.rootInstance,\n        \"setExpandedContentStyle\"\n      );\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.scrollHeight = 50;\n      page.rootInstance.expanded = true;\n\n      await page.rootInstance.animateExpandedContent();\n\n      const event = new Event(\"transitionend\");\n      page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n      expect(setExpandedContentStyleSpy).toHaveBeenCalled();\n    });\n\n    it(\"should call hideExpandedContent when transitionend in animateExpandedContent and expanded is false\", async () => {\n      const page = await newSpecPage({\n        components: [Accordion],\n        html: `\n        <ic-accordion heading=\"Accordion 1\" >\n          <ic-typography variant=\"body\">\n            This is an example of the main body text.\n          </ic-typography>\n        </ic-accordion>`,\n      });\n\n      const hideExpandedContentSpy = jest.spyOn(\n        page.rootInstance,\n        \"hideExpandedContent\"\n      );\n\n      const accordionExpanded =\n        page.root.shadowRoot.querySelector(\".expanded-content\");\n      page.rootInstance.expandedContentEl = accordionExpanded;\n      page.rootInstance.expandedContentEl.scrollHeight = 50;\n      page.rootInstance.expanded = false;\n\n      await page.rootInstance.animateExpandedContent();\n\n      const event = new Event(\"transitionend\");\n      page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n      expect(hideExpandedContentSpy).toHaveBeenCalled();\n    });\n  });\n});\n"]}

package/dist/collection/components/ic-accordion-group/ic-accordion-group.css

@@ -457,9 +457,9 @@ video {
 }
 
 :host(.light) {
-  color: var(--ic-architectural-white);
+  color: var(--ic-color-white-text);
 }
 
 :host(.accordion-group.dark) ::slotted(ic-accordion) {
-  color: var(--ic-architectural-white);
+  color: var(--ic-color-white-text);
 }

package/dist/collection/components/ic-accordion-group/ic-accordion-group.js

@@ -42,6 +42,14 @@ export class AccordionGroup {
         this.singleExpansion = false;
         this.size = "default";
     }
+    watchAppearanceHandler() {
+        this.accordions.forEach((acc) => {
+            acc.appearance = this.appearance;
+        });
+    }
+    watchExpandedHandler() {
+        this.handleExpanded();
+    }
     componentDidLoad() {
         const accordionDirectChildren = this.el.children;
         this.accordions = Array.from(accordionDirectChildren).filter((child) => child.tagName === "IC-ACCORDION");
@@ -258,6 +266,15 @@ export class AccordionGroup {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "appearance",
+                "methodName": "watchAppearanceHandler"
+            }, {
+                "propName": "expanded",
+                "methodName": "watchExpandedHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "accordionClicked",

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

@@ -1 +1 @@
-{"version":3,"file":"ic-accordion-group.js","sourceRoot":"","sources":["../../../src/components/ic-accordion-group/ic-accordion-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/**\n * @slot group-title - Content is placed as the accordion group title.\n */\n@Component({\n  tag: \"ic-accordion-group\",\n  styleUrl: \"ic-accordion-group.css\",\n  shadow: true,\n})\nexport class AccordionGroup {\n  private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n  private allButtonEl: HTMLIcButtonElement;\n\n  @Element() el: HTMLIcAccordionGroupElement;\n\n  @State() accordions: HTMLIcAccordionElement[];\n\n  @State() areAllAccordionsOpen: boolean;\n\n  /**\n   * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n   */\n  @Prop() accessibleButtonLabel: string = \"accordions\";\n\n  /**\n   * The appearance of the accordion group, e.g dark, or light.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will load in an expanded state.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The header for the accordion group.\n   */\n  @Prop() groupTitle: string = \"\";\n\n  /**\n   * If `true`, only one accordion will open at a time.\n   */\n  @Prop() singleExpansion: boolean = false;\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  componentDidLoad(): void {\n    const accordionDirectChildren = (this.el as HTMLElement).children;\n    this.accordions = Array.from(accordionDirectChildren).filter(\n      (child) => child.tagName === \"IC-ACCORDION\"\n    ) as HTMLIcAccordionElement[];\n    this.linkAccordions();\n    this.accordions.forEach((acc) => {\n      acc.appearance = this.appearance;\n    });\n    this.accordions.forEach((acc) => {\n      acc.size = this.size;\n    });\n    if (this.expanded) {\n      this.accordions.forEach((acc) => {\n        acc.expanded = true;\n      });\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.setExpandedToAreAllAccordionsOpen();\n      this.expanded = this.areAllAccordionsOpen;\n    }\n  }\n\n  @Listen(\"accordionClicked\")\n  handleAccordionClicked(event: CustomEvent): void {\n    if (!this.singleExpansion) {\n      // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.accordions.forEach((acc) => {\n        if (acc.expanded && event.detail.id !== acc.id) {\n          acc.expanded = false;\n        }\n      });\n    }\n  }\n\n  /**\n   * Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n   * Otherwise, the first accordion will be focused.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const focusEl = this.singleExpansion\n      ? this.accordions[0]\n      : this.allButtonEl;\n    focusEl.setFocus();\n  }\n\n  private handleExpanded = () => {\n    if (this.areAllAccordionsOpen) {\n      this.expanded = false;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    } else {\n      this.expanded = true;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    }\n    this.setExpandedToAreAllAccordionsOpen();\n  };\n\n  private linkAccordions = () => {\n    this.accordions.forEach((accordion) => {\n      accordion.setAttribute(\"context-id\", this.accordionGroupId);\n    });\n  };\n\n  private setExpandedToAreAllAccordionsOpen = () => {\n    this.areAllAccordionsOpen = this.accordions.every(\n      (accordion) => !!accordion.expanded\n    );\n  };\n\n  private accordionOpenBtnText = () => {\n    return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n  };\n\n  render() {\n    const {\n      appearance,\n      size,\n      groupTitle,\n      singleExpansion,\n      accessibleButtonLabel,\n    } = this;\n    return (\n      <Host\n        context-id={this.accordionGroupId}\n        class={{\n          [`${appearance}`]: true,\n          [`${size}`]: true,\n          [\"accordion-group\"]: true,\n        }}\n      >\n        <div class=\"group-title-container\">\n          <ic-typography variant=\"h4\">\n            <h3>\n              {isSlotUsed(this.el, \"group-title\") ? (\n                <slot name=\"group-title\" />\n              ) : (\n                groupTitle\n              )}\n            </h3>\n          </ic-typography>\n          {!singleExpansion && (\n            <ic-button\n              ref={(el) => (this.allButtonEl = el)}\n              appearance={appearance === \"light\" ? \"light\" : \"default\"}\n              onClick={this.handleExpanded}\n              variant=\"tertiary\"\n              aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n            >\n              {this.accordionOpenBtnText()}\n            </ic-button>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-accordion-group.js","sourceRoot":"","sources":["../../../src/components/ic-accordion-group/ic-accordion-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/**\n * @slot group-title - Content is placed as the accordion group title.\n */\n@Component({\n  tag: \"ic-accordion-group\",\n  styleUrl: \"ic-accordion-group.css\",\n  shadow: true,\n})\nexport class AccordionGroup {\n  private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n  private allButtonEl: HTMLIcButtonElement;\n\n  @Element() el: HTMLIcAccordionGroupElement;\n\n  @State() accordions: HTMLIcAccordionElement[];\n\n  @State() areAllAccordionsOpen: boolean;\n\n  /**\n   * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n   */\n  @Prop() accessibleButtonLabel: string = \"accordions\";\n\n  /**\n   * The appearance of the accordion group, e.g dark, or light.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n  @Watch(\"appearance\")\n  watchAppearanceHandler() {\n    this.accordions.forEach((acc) => {\n      acc.appearance = this.appearance;\n    });\n  }\n\n  /**\n   * If `true`, the accordion will load in an expanded state.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  @Watch(\"expanded\")\n  watchExpandedHandler() {\n    this.handleExpanded();\n  }\n\n  /**\n   * The header for the accordion group.\n   */\n  @Prop() groupTitle: string = \"\";\n\n  /**\n   * If `true`, only one accordion will open at a time.\n   */\n  @Prop() singleExpansion: boolean = false;\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  componentDidLoad(): void {\n    const accordionDirectChildren = (this.el as HTMLElement).children;\n    this.accordions = Array.from(accordionDirectChildren).filter(\n      (child) => child.tagName === \"IC-ACCORDION\"\n    ) as HTMLIcAccordionElement[];\n    this.linkAccordions();\n    this.accordions.forEach((acc) => {\n      acc.appearance = this.appearance;\n    });\n    this.accordions.forEach((acc) => {\n      acc.size = this.size;\n    });\n    if (this.expanded) {\n      this.accordions.forEach((acc) => {\n        acc.expanded = true;\n      });\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.setExpandedToAreAllAccordionsOpen();\n      this.expanded = this.areAllAccordionsOpen;\n    }\n  }\n\n  @Listen(\"accordionClicked\")\n  handleAccordionClicked(event: CustomEvent): void {\n    if (!this.singleExpansion) {\n      // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.accordions.forEach((acc) => {\n        if (acc.expanded && event.detail.id !== acc.id) {\n          acc.expanded = false;\n        }\n      });\n    }\n  }\n\n  /**\n   * Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n   * Otherwise, the first accordion will be focused.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const focusEl = this.singleExpansion\n      ? this.accordions[0]\n      : this.allButtonEl;\n    focusEl.setFocus();\n  }\n\n  private handleExpanded = () => {\n    if (this.areAllAccordionsOpen) {\n      this.expanded = false;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    } else {\n      this.expanded = true;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    }\n    this.setExpandedToAreAllAccordionsOpen();\n  };\n\n  private linkAccordions = () => {\n    this.accordions.forEach((accordion) => {\n      accordion.setAttribute(\"context-id\", this.accordionGroupId);\n    });\n  };\n\n  private setExpandedToAreAllAccordionsOpen = () => {\n    this.areAllAccordionsOpen = this.accordions.every(\n      (accordion) => !!accordion.expanded\n    );\n  };\n\n  private accordionOpenBtnText = () => {\n    return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n  };\n\n  render() {\n    const {\n      appearance,\n      size,\n      groupTitle,\n      singleExpansion,\n      accessibleButtonLabel,\n    } = this;\n    return (\n      <Host\n        context-id={this.accordionGroupId}\n        class={{\n          [`${appearance}`]: true,\n          [`${size}`]: true,\n          [\"accordion-group\"]: true,\n        }}\n      >\n        <div class=\"group-title-container\">\n          <ic-typography variant=\"h4\">\n            <h3>\n              {isSlotUsed(this.el, \"group-title\") ? (\n                <slot name=\"group-title\" />\n              ) : (\n                groupTitle\n              )}\n            </h3>\n          </ic-typography>\n          {!singleExpansion && (\n            <ic-button\n              ref={(el) => (this.allButtonEl = el)}\n              appearance={appearance === \"light\" ? \"light\" : \"default\"}\n              onClick={this.handleExpanded}\n              variant=\"tertiary\"\n              aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n            >\n              {this.accordionOpenBtnText()}\n            </ic-button>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js

@@ -5,6 +5,9 @@ const backToTopLabel = "Back to top";
 export class BackToTop {
     constructor() {
         this.topObserver = null;
+        this.getObservedEl = () => {
+            return document.querySelector("#ic-back-to-top-target");
+        };
         this.setTargetElVisible = (visible) => {
             this.targetElVisible = visible;
         };
@@ -37,7 +40,7 @@ export class BackToTop {
             let objParent;
             //remove old element & observer
             if (this.topObserver !== null) {
-                const observedEl = document.querySelector("#ic-back-to-top-target");
+                const observedEl = this.getObservedEl();
                 if (observedEl !== null) {
                     this.topObserver.unobserve(observedEl);
                     observedEl.remove();
@@ -55,6 +58,7 @@ export class BackToTop {
             //insert a new 0px height element before specified target that can be used to determine when page is scrolled
             const objBackToTopTargetEl = document.createElement("div");
             objBackToTopTargetEl.setAttribute("id", "ic-back-to-top-target");
+            objBackToTopTargetEl.setAttribute("tabindex", "-1"); // Needed for virtual cursor behaviour to work
             objParent.insertBefore(objBackToTopTargetEl, this.targetEl);
             // resize observer needs to factor in any top margin on the target el
             const marginTop = getComputedStyle(this.targetEl).marginTop;
@@ -71,6 +75,8 @@ export class BackToTop {
             else {
                 this.targetEl.scrollIntoView();
             }
+            // Get virtual cursor to move
+            this.getObservedEl().focus();
         };
         this.checkForClassificationBanner = () => {
             //adjust position for classification banner at bottom

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  private isTargetElNull: boolean;\n  private targetEl: Element;\n  private topObserver: IntersectionObserver = null;\n\n  @Element() el: HTMLIcBackToTopElement;\n\n  @State() bannerOffset: boolean = false;\n  @State() footerVisible: boolean = false;\n  @State() targetElVisible: boolean = true;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  /**\n   * The variant of the button to render\n   */\n  @Prop() variant: IcBackToTopVariants = \"default\";\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    this.footerVisible =\n      typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  private buildButton = () => {\n    const { bannerOffset, targetElVisible, footerVisible, variant } = this;\n\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n          [\"positioning\"]: variant !== \"icon\",\n          [\"icon-only\"]: variant === \"icon\",\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        {this.variant !== \"icon\" && (\n          <ic-typography variant=\"subtitle-small\">\n            <span>{backToTopLabel}</span>\n          </ic-typography>\n        )}\n      </button>\n    );\n  };\n\n  render() {\n    const { variant, buildButton } = this;\n\n    return variant === \"icon\" ? (\n      <ic-tooltip label={backToTopLabel} placement=\"top\" class=\"positioning\">\n        {buildButton()}\n      </ic-tooltip>\n    ) : (\n      buildButton()\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  private isTargetElNull: boolean;\n  private targetEl: Element;\n  private topObserver: IntersectionObserver = null;\n\n  @Element() el: HTMLIcBackToTopElement;\n\n  @State() bannerOffset: boolean = false;\n  @State() footerVisible: boolean = false;\n  @State() targetElVisible: boolean = true;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  /**\n   * The variant of the button to render\n   */\n  @Prop() variant: IcBackToTopVariants = \"default\";\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  private getObservedEl = () => {\n    return document.querySelector(\"#ic-back-to-top-target\");\n  };\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    this.footerVisible =\n      typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = this.getObservedEl();\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n    // Get virtual cursor to move\n    (this.getObservedEl() as HTMLElement).focus();\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  private buildButton = () => {\n    const { bannerOffset, targetElVisible, footerVisible, variant } = this;\n\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n          [\"positioning\"]: variant !== \"icon\",\n          [\"icon-only\"]: variant === \"icon\",\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        {this.variant !== \"icon\" && (\n          <ic-typography variant=\"subtitle-small\">\n            <span>{backToTopLabel}</span>\n          </ic-typography>\n        )}\n      </button>\n    );\n  };\n\n  render() {\n    const { variant, buildButton } = this;\n\n    return variant === \"icon\" ? (\n      <ic-tooltip label={backToTopLabel} placement=\"top\" class=\"positioning\">\n        {buildButton()}\n      </ic-tooltip>\n    ) : (\n      buildButton()\n    );\n  }\n}\n"]}

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

@@ -92,7 +92,7 @@ ic-link {
   }
 }
 
-@supports (text-decoration-thickness: 25%) {
+@supports (text-underline-offset: 25%) {
   ic-link {
     --breadcrumb-link-display: flex;
   }

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js

@@ -7,6 +7,12 @@ export class BreadcrumbGroup {
         this.IC_BREADCRUMB = "ic-breadcrumb";
         this.resizeObserver = null;
         this.SHOW_BACK_ICON = "show-back-icon";
+        this.setAppearance = () => {
+            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+            allBreadcrumbs.forEach((breadcrumb) => {
+                breadcrumb.setAttribute("appearance", this.appearance);
+            });
+        };
         this.setBackBreadcrumb = () => {
             if (this.backBreadcrumbOnly) {
                 this.setBackBreadcrumbAttr();
@@ -144,13 +150,15 @@ export class BreadcrumbGroup {
         this.backBreadcrumbOnly = false;
         this.collapsed = false;
     }
+    watchAppearanceHandler() {
+        this.setAppearance();
+    }
+    watchBackBreadcrumbHandler() {
+        this.setBackBreadcrumb();
+    }
     componentWillLoad() {
         const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
-        if (this.appearance !== "default") {
-            allBreadcrumbs.forEach((breadcrumb) => {
-                breadcrumb.setAttribute("appearance", this.appearance);
-            });
-        }
+        this.setAppearance();
         if (this.backBreadcrumbOnly) {
             this.setBackBreadcrumb();
         }
@@ -264,5 +272,14 @@ export class BreadcrumbGroup {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "appearance",
+                "methodName": "watchAppearanceHandler"
+            }, {
+                "propName": "backBreadcrumbOnly",
+                "methodName": "watchBackBreadcrumbHandler"
+            }];
+    }
 }
 //# sourceMappingURL=ic-breadcrumb-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeForeground } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbEl: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n  private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n  private resizeObserver: ResizeObserver = null;\n  private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  /**\n   * The appearance of the breadcrumb group.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop() collapsed: boolean = false;\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    if (this.appearance !== \"default\") {\n      allBreadcrumbs.forEach((breadcrumb) => {\n        breadcrumb.setAttribute(\"appearance\", this.appearance);\n      });\n    }\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed) {\n      this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n      if (allBreadcrumbs.length > 2) {\n        if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setCollapsed();\n        }\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.breadcrumb &&\n      this.breadcrumb.removeEventListener(\n        \"transitionend\",\n        this.transitionendHandler\n      );\n\n    this.collapsedBreadcrumbEl &&\n      this.collapsedBreadcrumbEl.removeEventListener(\n        \"click\",\n        this.clickHandler\n      );\n  }\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumbAttr();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs.filter(\n      (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n    );\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n    return this.breadcrumb;\n  };\n\n  private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    if (this.collapsed) {\n      const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_BREADCRUMB)\n      );\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n\n      this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n        breadcrumb.classList.add(\"hide\")\n      );\n\n      const firstBreadcrumb = allBreadcrumbs[0];\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    }\n  };\n\n  private clickHandler = () => {\n    this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    this.collapsedBreadcrumbEl.innerText = \"...\";\n    this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = (\n    collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n  ) => {\n    collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.setBackBreadcrumbAttr();\n    this.lastParentBreadcrumb.classList.remove(\"hide\");\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          back: this.backBreadcrumbOnly,\n          collapsed: this.collapsed,\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeForeground } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbEl: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n  private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n  private resizeObserver: ResizeObserver = null;\n  private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  /**\n   * The appearance of the breadcrumb group.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n  @Watch(\"appearance\")\n  watchAppearanceHandler(): void {\n    this.setAppearance();\n  }\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  @Watch(\"backBreadcrumbOnly\")\n  watchBackBreadcrumbHandler(): void {\n    this.setBackBreadcrumb();\n  }\n\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop() collapsed: boolean = false;\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    this.setAppearance();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed) {\n      this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n      if (allBreadcrumbs.length > 2) {\n        if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setCollapsed();\n        }\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.breadcrumb &&\n      this.breadcrumb.removeEventListener(\n        \"transitionend\",\n        this.transitionendHandler\n      );\n\n    this.collapsedBreadcrumbEl &&\n      this.collapsedBreadcrumbEl.removeEventListener(\n        \"click\",\n        this.clickHandler\n      );\n  }\n\n  private setAppearance = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(\"appearance\", this.appearance);\n    });\n  };\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumbAttr();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs.filter(\n      (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n    );\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n    return this.breadcrumb;\n  };\n\n  private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    if (this.collapsed) {\n      const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_BREADCRUMB)\n      );\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n\n      this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n        breadcrumb.classList.add(\"hide\")\n      );\n\n      const firstBreadcrumb = allBreadcrumbs[0];\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    }\n  };\n\n  private clickHandler = () => {\n    this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    this.collapsedBreadcrumbEl.innerText = \"...\";\n    this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = (\n    collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n  ) => {\n    collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.setBackBreadcrumbAttr();\n    this.lastParentBreadcrumb.classList.remove(\"hide\");\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          back: this.backBreadcrumbOnly,\n          collapsed: this.collapsed,\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -45,6 +45,11 @@ export class Button {
                 hiddenFormButton.remove();
             }
         };
+        this.handleKeyDown = (ev) => {
+            if (ev.key === "Escape" && this.hasTooltip) {
+                this.closeButtonTooltip(ev);
+            }
+        };
         this.onFocus = () => {
             this.icFocus.emit();
         };
@@ -199,6 +204,14 @@ export class Button {
         var _a;
         (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    async closeButtonTooltip(ev) {
+        const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
+        if (await tooltip.isTooltipVisible()) {
+            tooltip.displayTooltip(false);
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+        }
+    }
     hasIconSlot(position) {
         const selectorPrefix = position ? `${position}-` : "";
         return this.el.querySelector(`[slot="${selectorPrefix}icon"]`) !== null;
@@ -286,7 +299,7 @@ export class Button {
                 ["white-background"]: this.variant === "secondary" &&
                     !this.transparentBackground &&
                     this.appearance !== "light",
-            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
             (this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null))), this.describedByContent && (h("span", { id: describedby, class: "ic-button-describedby" }, this.describedByContent))));
     }
     static get is() { return "ic-button"; }