@ukic/web-components 2.28.0 → 3.0.0-alpha.1

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

@@ -1 +1 @@
-{"version":3,"file":"ic-toast.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toast/test/basic/ic-toast.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Link } from \"../../../ic-link/ic-link\";\nimport { Toast } from \"../../ic-toast\";\n\ndescribe(\"ic-toast component\", () => {\n  it(\"should render when heading is supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toast aria-label=\"Heading\" heading=\"Heading\" role=\"dialog\">\n      <mock:shadow-root>\n        <div class=\"container\">\n          <div class=\"toast-content\">\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                <h5>\n                  Heading\n                </h5>\n              </ic-typography>\n            </div>\n          </div>\n          <ic-button appearance=\"light\" id=\"dismiss-button\" aria-label=\"dismiss\" variant=\"icon\">\n            svg\n          </ic-button>\n        </div>\n      </mock:shadow-root>\n    </ic-toast>`);\n  });\n\n  it(\"should render when a heading and message is supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" message=\"toast message\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toast aria-label=\"Heading\" aria-description=\"toast message\" message=\"toast message\" heading=\"Heading\" role=\"dialog\">\n      <mock:shadow-root>\n        <div class=\"container\">\n          <div class=\"toast-content\">\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                <h5>\n                  Heading\n                </h5>\n              </ic-typography>\n              <ic-typography variant=\"body\">\n                <p>\n                  toast message\n                </p>\n              </ic-typography>\n            </div>\n          </div>\n          <ic-button appearance=\"light\" id=\"dismiss-button\" aria-label=\"dismiss\" variant=\"icon\">\n            svg\n          </ic-button>\n        </div>\n      </mock:shadow-root>\n    </ic-toast>`);\n  });\n\n  it(\"should render a variant icon and banner when a variant is supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" variant=\"success\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toast aria-label=\"Success\" aria-description=\"Heading\" heading=\"Heading\" role=\"dialog\" variant=\"success\">\n      <mock:shadow-root>\n        <div class=\"container\">\n          <div class=\"toast-icon-container\">\n            <div class=\"divider divider-success\"></div>\n            <span class=\"toast-icon\">\n              svg\n            </span>\n          </div>\n          <div class=\"toast-content\">\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                <h5>\n                  Heading\n                </h5>\n              </ic-typography>\n            </div>\n          </div>\n          <ic-button appearance=\"light\" id=\"dismiss-button\" aria-label=\"dismiss\" variant=\"icon\">\n            svg\n          </ic-button>\n        </div>\n      </mock:shadow-root>\n    </ic-toast>`);\n  });\n\n  it(\"should render a loading indicator instead of a dismiss button when dismissMode is automatic\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" dismiss-mode=\"automatic\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toast heading=\"Heading\" role=\"status\" dismiss-mode=\"automatic\">\n      <mock:shadow-root>\n        <div class=\"container\">\n          <div class=\"toast-content\">\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                <h5>\n                  Heading\n                </h5>\n              </ic-typography>\n            </div>\n          </div>\n          <ic-loading-indicator appearance=\"light\" class=\"toast-dismiss-timer\" progress=\"100\" size=\"icon\"></ic-loading-indicator>\n        </div>\n      </mock:shadow-root>\n    </ic-toast>`);\n  });\n\n  it(\"should display the toast when setVisible is ran\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\"></ic-toast>`,\n    });\n\n    expect(page.root.classList.contains(\"hidden\")).toBeTruthy();\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n    expect(page.root.classList.contains(\"hidden\")).toBeFalsy();\n  });\n\n  it(\"should emit the icDismiss event when dismissed with by clicking the button\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\"></ic-toast>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icDismiss\", callbackFn);\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"ic-button\");\n    dismissButton.click();\n    await page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should emit the icDismiss event when dismissed with by pressing Escape\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\"></ic-toast>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icDismiss\", callbackFn);\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    const event = new KeyboardEvent(\"keydown\", { key: \"Escape\" });\n    page.rootInstance.handleKeyboard(event);\n    await page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should emit icDismiss after the timer expires when an auto dismiss toast is made visible\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" dismiss-mode=\"automatic\"></ic-toast>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icDismiss\", callbackFn);\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n    expect(callbackFn).not.toHaveBeenCalled();\n\n    await waitForTimeout(6000);\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should pause timer when mouse is hovered over, and resume when mouse leaves\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>`,\n    });\n\n    const intervalCb = jest.spyOn(window, \"setInterval\");\n    const clearCb = jest.spyOn(window, \"clearInterval\");\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    await waitForTimeout(3000);\n    expect(intervalCb).toHaveBeenCalledTimes(1);\n\n    page.rootInstance.handleTimer({ type: \"mouseenter\" });\n    await page.waitForChanges();\n    expect(clearCb).toHaveBeenCalled();\n\n    page.rootInstance.handleTimer({ type: \"mouseleave\" });\n    await page.waitForChanges();\n    await waitForTimeout(1000);\n    expect(intervalCb).toHaveBeenCalledTimes(2);\n    page.setContent(\"\");\n  });\n\n  it(\"should post a console error message if the message or header is too long\", async () => {\n    const longText =\n      \"lorem donec massa sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu augue ut lectus arcu bibendum at varius vel pharetra vel turpis nunc eget lorem dolor\";\n    const consoleCb = jest\n      .spyOn(console, \"error\")\n      .mockImplementation(jest.fn());\n    await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"${longText}\" message=\"${longText}\"></ic-toast>`,\n    });\n    expect(consoleCb).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should only focus the two interactive elements in the manual toast when using tab\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\"><ic-button id=\"slottedButton\" slot=\"action\">Click me</ic-button></ic-toast>`,\n    });\n    const focusCallback = jest.spyOn(Button.prototype, \"setFocus\");\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n    await waitForTimeout(300);\n    expect(focusCallback).toHaveBeenCalledTimes(1);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: false,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(2);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: false,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(3);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: false,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(4);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(5);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(6);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(7);\n  });\n\n  it(\"should focus a link element that has been slotted into the action slot\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Link],\n      html: `<ic-toast heading=\"Heading\"><ic-link href=\"/\" slot=\"action\">Text</ic-link></ic-toast>`,\n    });\n    const focusCallback = jest.spyOn(Link.prototype, \"setFocus\");\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n    await waitForTimeout(300);\n    expect(focusCallback).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should update the dialog's label if the prop neutralIconAriaLabel prop is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast variant=\"neutral\" neutral-icon-aria-label=\"Hello World\" heading=\"Heading\"></ic-toast>`,\n    });\n\n    expect(page.root.getAttribute(\"aria-label\")).toBe(\"Hello World\");\n  });\n});\n"]}
+{"version":3,"file":"ic-toast.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toast/test/basic/ic-toast.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Link } from \"../../../ic-link/ic-link\";\nimport { Toast } from \"../../ic-toast\";\n\ndescribe(\"ic-toast component\", () => {\n  it(\"should render when heading is supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toast aria-label=\"Heading\" heading=\"Heading\" role=\"dialog\" tabindex=\"0\">\n      <mock:shadow-root>\n        <div class=\"container\">\n          <div class=\"toast-content\">\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                <h5>\n                  Heading\n                </h5>\n              </ic-typography>\n            </div>\n          </div>\n          <ic-button appearance=\"light\" id=\"dismiss-button\" aria-label=\"dismiss\" variant=\"icon\">\n            svg\n          </ic-button>\n        </div>\n      </mock:shadow-root>\n    </ic-toast>`);\n  });\n\n  it(\"should render when a heading and message is supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" message=\"toast message\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toast aria-label=\"Heading\" aria-description=\"toast message\" message=\"toast message\" heading=\"Heading\" role=\"dialog\" tabindex=\"0\">\n      <mock:shadow-root>\n        <div class=\"container\">\n          <div class=\"toast-content\">\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                <h5>\n                  Heading\n                </h5>\n              </ic-typography>\n              <ic-typography variant=\"body\">\n                <p>\n                  toast message\n                </p>\n              </ic-typography>\n            </div>\n          </div>\n          <ic-button appearance=\"light\" id=\"dismiss-button\" aria-label=\"dismiss\" variant=\"icon\">\n            svg\n          </ic-button>\n        </div>\n      </mock:shadow-root>\n    </ic-toast>`);\n  });\n\n  it(\"should render a variant icon and banner when a variant is supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" variant=\"success\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toast aria-label=\"Success\" aria-description=\"Heading\" heading=\"Heading\" role=\"dialog\" variant=\"success\" tabindex=\"0\">\n      <mock:shadow-root>\n        <div class=\"container\">\n          <div class=\"toast-icon-container\">\n            <div class=\"divider divider-success\"></div>\n            <span class=\"toast-icon\">\n              svg\n            </span>\n          </div>\n          <div class=\"toast-content\">\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                <h5>\n                  Heading\n                </h5>\n              </ic-typography>\n            </div>\n          </div>\n          <ic-button appearance=\"light\" id=\"dismiss-button\" aria-label=\"dismiss\" variant=\"icon\">\n            svg\n          </ic-button>\n        </div>\n      </mock:shadow-root>\n    </ic-toast>`);\n  });\n\n  it(\"should render a loading indicator instead of a dismiss button when dismissMode is automatic\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" dismiss-mode=\"automatic\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toast heading=\"Heading\" role=\"status\" dismiss-mode=\"automatic\" tabindex=\"0\">\n      <mock:shadow-root>\n        <div class=\"container\">\n          <div class=\"toast-content\">\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                <h5>\n                  Heading\n                </h5>\n              </ic-typography>\n            </div>\n          </div>\n          <ic-loading-indicator appearance=\"light\" class=\"toast-dismiss-timer\" description=\"\" progress=\"100\" size=\"icon\"></ic-loading-indicator>\n        </div>\n      </mock:shadow-root>\n    </ic-toast>`);\n  });\n\n  it(\"should display the toast when setVisible is ran\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\"></ic-toast>`,\n    });\n\n    expect(page.root.classList.contains(\"ic-toast-hidden\")).toBeTruthy();\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n    expect(page.root.classList.contains(\"ic-toast-hidden\")).toBeFalsy();\n  });\n\n  it(\"should emit the icDismiss event when dismissed with by clicking the button\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\"></ic-toast>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icDismiss\", callbackFn);\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"ic-button\");\n    dismissButton.click();\n    await page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should emit the icDismiss event when dismissed with by pressing Escape\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\"></ic-toast>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icDismiss\", callbackFn);\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    const event = new KeyboardEvent(\"keydown\", { key: \"Escape\" });\n    page.rootInstance.handleKeyboard(event);\n    await page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should emit icDismiss after the timer expires when an auto dismiss toast is made visible\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" dismiss-mode=\"automatic\"></ic-toast>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icDismiss\", callbackFn);\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n    expect(callbackFn).not.toHaveBeenCalled();\n\n    await waitForTimeout(6000);\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should pause timer when mouse is hovered over, and resume when mouse leaves\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>`,\n    });\n\n    const intervalCb = jest.spyOn(window, \"setInterval\");\n    const clearCb = jest.spyOn(window, \"clearInterval\");\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    await waitForTimeout(3000);\n    expect(intervalCb).toHaveBeenCalledTimes(1);\n\n    page.rootInstance.handleTimer({ type: \"mouseenter\" });\n    await page.waitForChanges();\n    expect(clearCb).toHaveBeenCalled();\n\n    page.rootInstance.handleTimer({ type: \"mouseleave\" });\n    await page.waitForChanges();\n    await waitForTimeout(1000);\n    expect(intervalCb).toHaveBeenCalledTimes(2);\n    page.setContent(\"\");\n  });\n\n  it(\"should set isManual to true when toast is hovered over, and back to false when mouse leaves\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"Heading\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    page.rootInstance.handleTimer({ type: \"mouseenter\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.isManual).toBeTruthy();\n\n    page.rootInstance.handleTimer({ type: \"mouseleave\" });\n    await page.waitForChanges();\n    await waitForTimeout(1000);\n    expect(page.rootInstance.isManual).toBeFalsy();\n    page.setContent(\"\");\n  });\n\n  it(\"should post a console error message if the message or header is too long\", async () => {\n    const longText =\n      \"lorem donec massa sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu augue ut lectus arcu bibendum at varius vel pharetra vel turpis nunc eget lorem dolor\";\n    const consoleCb = jest\n      .spyOn(console, \"error\")\n      .mockImplementation(jest.fn());\n    await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast heading=\"${longText}\" message=\"${longText}\"></ic-toast>`,\n    });\n    expect(consoleCb).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should only focus the two interactive elements in the manual toast when using tab\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\"><ic-button id=\"slottedButton\" slot=\"action\">Click me</ic-button></ic-toast>`,\n    });\n    const focusCallback = jest.spyOn(Button.prototype, \"setFocus\");\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n    await waitForTimeout(300);\n    expect(focusCallback).toHaveBeenCalledTimes(1);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: false,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(2);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: false,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(3);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: false,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(4);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(5);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(6);\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(focusCallback).toHaveBeenCalledTimes(7);\n  });\n\n  it(\"should focus a link element that has been slotted into the action slot\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Link],\n      html: `<ic-toast heading=\"Heading\"><ic-link href=\"/\" slot=\"action\">Text</ic-link></ic-toast>`,\n    });\n    const focusCallback = jest.spyOn(Link.prototype, \"setFocus\");\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n    await waitForTimeout(300);\n    expect(focusCallback).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should update the dialog's label if the prop neutralIconAriaLabel prop is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Toast],\n      html: `<ic-toast variant=\"neutral\" neutral-icon-aria-label=\"Hello World\" heading=\"Heading\"></ic-toast>`,\n    });\n\n    expect(page.root.getAttribute(\"aria-label\")).toBe(\"Hello World\");\n  });\n\n  it(\"should focus the new dismiss button when an auto dismiss toast is tabbed to\", async () => {\n    const page = await newSpecPage({\n      components: [Toast, Button],\n      html: `<ic-toast heading=\"Heading\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>`,\n    });\n\n    page.rootInstance.setVisible();\n    await page.waitForChanges();\n\n    const dismissFocus = jest.spyOn(Button.prototype, \"setFocus\");\n\n    page.rootInstance.handleKeyboard({\n      key: \"Tab\",\n      shiftKey: false,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    expect(page.rootInstance.focusInteractiveElement).toBeTruthy();\n\n    page.root.focus();\n    await page.waitForChanges();\n    expect(page.rootInstance.isManual).toBeTruthy();\n    expect(dismissFocus).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/ic-toast-region/ic-toast-region.js

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 export class ToastRegion {
     constructor() {
         this.pendingVisibility = [];
@@ -18,6 +18,12 @@ export class ToastRegion {
             this.openToast = undefined;
         }
     }
+    componentDidLoad() {
+        if (this.openToast) {
+            this.showToast(this.openToast);
+            this.openToast = undefined;
+        }
+    }
     handleDismissedToast() {
         var _a;
         if (this.pendingVisibility.length > 0) {
@@ -34,13 +40,6 @@ export class ToastRegion {
                 (_a = this.previouslyFocused) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
-    /**
-     * @deprecated Use openToast prop to display toast instead.
-     * @param {HTMLIcToastElement} toast The toast component to display
-     */
-    async setVisible(toast) {
-        this.showToast(toast);
-    }
     render() {
         return h("slot", null);
     }
@@ -69,41 +68,6 @@ export class ToastRegion {
             }
         };
     }
-    static get methods() {
-        return {
-            "setVisible": {
-                "complexType": {
-                    "signature": "(toast: HTMLIcToastElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "toast",
-                            "type": "HTMLIcToastElement",
-                            "docs": "The toast component to display"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLIcToastElement": {
-                            "location": "global",
-                            "id": "global::HTMLIcToastElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use openToast prop to display toast instead."
-                        }, {
-                            "name": "param",
-                            "text": "toast The toast component to display"
-                        }]
-                }
-            }
-        };
-    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

package/dist/collection/components/ic-toast-region/ic-toast-region.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-toast-region.js","sourceRoot":"","sources":["../../../src/components/ic-toast-region/ic-toast-region.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,CAAC,EACD,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAIvB,MAAM,OAAO,WAAW;;QACd,sBAAiB,GAAyB,EAAE,CAAC;QA+B7C,cAAS,GAAG,CAAC,KAAyB,EAAE,EAAE;YAChD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACtC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;YACjE,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBACrE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;YACnE,CAAC;YACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;gBAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnE,CAAC,CAAC;;;IA7BF,qBAAqB,CAAC,QAA4B;QAChD,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,CAAC;IACH,CAAC;IAGD,oBAAoB;;QAClB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;iBACtB,UAAU,EAAE;iBACZ,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;YACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAClE,IAAI,CAAC,iBAA2C,CAAC,QAAQ,EAAE,CAAC;YAC/D,CAAC;;gBAAM,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QACzC,CAAC;IACH,CAAC;IAYD;;;OAGG;IAEH,KAAK,CAAC,UAAU,CAAC,KAAyB;QACxC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,eAAa,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport { IcFocusableComponents } from \"../../utils/types\";\n\n@Component({ tag: \"ic-toast-region\" })\nexport class ToastRegion {\n  private pendingVisibility: HTMLIcToastElement[] = [];\n  private previouslyFocused: HTMLElement;\n\n  @Element() el: HTMLIcToastRegionElement;\n\n  /**\n   * The toast element to be displayed.\n   */\n  @Prop({ mutable: true }) openToast: HTMLIcToastElement;\n  @Watch(\"openToast\")\n  watchOpenToastHandler(newValue: HTMLIcToastElement): void {\n    if (this.openToast !== undefined) {\n      this.showToast(newValue);\n      this.openToast = undefined;\n    }\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismissedToast(): void {\n    if (this.pendingVisibility.length > 0) {\n      this.pendingVisibility[0]\n        .setVisible()\n        .then((res) => (this.previouslyFocused = res));\n      this.pendingVisibility.shift();\n    } else {\n      if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n        (this.previouslyFocused as IcFocusableComponents).setFocus();\n      } else this.previouslyFocused?.focus();\n    }\n  }\n\n  private showToast = (toast: HTMLIcToastElement) => {\n    const visibleToasts = Array.from(\n      document.querySelectorAll(\"ic-toast\")\n    ).filter((el) => window.getComputedStyle(el).display !== \"none\");\n    if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n      toast.setVisible().then((res) => (this.previouslyFocused = res));\n    }\n    if (visibleToasts.length > 0) this.pendingVisibility.push(toast);\n  };\n\n  /**\n   * @deprecated Use openToast prop to display toast instead.\n   * @param {HTMLIcToastElement} toast The toast component to display\n   */\n  @Method()\n  async setVisible(toast: HTMLIcToastElement): Promise<void> {\n    this.showToast(toast);\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}
+{"version":3,"file":"ic-toast-region.js","sourceRoot":"","sources":["../../../src/components/ic-toast-region/ic-toast-region.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAI3E,MAAM,OAAO,WAAW;;QACd,sBAAiB,GAAyB,EAAE,CAAC;QAsC7C,cAAS,GAAG,CAAC,KAAyB,EAAE,EAAE;YAChD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACtC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;YACjE,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBACrE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;YACnE,CAAC;YACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;gBAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnE,CAAC,CAAC;;;IApCF,qBAAqB,CAAC,QAA4B;QAChD,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC/B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,CAAC;IACH,CAAC;IAGD,oBAAoB;;QAClB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;iBACtB,UAAU,EAAE;iBACZ,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;YACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAClE,IAAI,CAAC,iBAA2C,CAAC,QAAQ,EAAE,CAAC;YAC/D,CAAC;;gBAAM,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QACzC,CAAC;IACH,CAAC;IAYD,MAAM;QACJ,OAAO,eAAa,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Listen, Prop, Watch } from \"@stencil/core\";\nimport { IcFocusableComponents } from \"../../utils/types\";\n\n@Component({ tag: \"ic-toast-region\" })\nexport class ToastRegion {\n  private pendingVisibility: HTMLIcToastElement[] = [];\n  private previouslyFocused: HTMLElement;\n\n  @Element() el: HTMLIcToastRegionElement;\n\n  /**\n   * The toast element to be displayed.\n   */\n  @Prop({ mutable: true }) openToast: HTMLIcToastElement;\n  @Watch(\"openToast\")\n  watchOpenToastHandler(newValue: HTMLIcToastElement): void {\n    if (this.openToast !== undefined) {\n      this.showToast(newValue);\n      this.openToast = undefined;\n    }\n  }\n\n  componentDidLoad(): void {\n    if (this.openToast) {\n      this.showToast(this.openToast);\n      this.openToast = undefined;\n    }\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismissedToast(): void {\n    if (this.pendingVisibility.length > 0) {\n      this.pendingVisibility[0]\n        .setVisible()\n        .then((res) => (this.previouslyFocused = res));\n      this.pendingVisibility.shift();\n    } else {\n      if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n        (this.previouslyFocused as IcFocusableComponents).setFocus();\n      } else this.previouslyFocused?.focus();\n    }\n  }\n\n  private showToast = (toast: HTMLIcToastElement) => {\n    const visibleToasts = Array.from(\n      document.querySelectorAll(\"ic-toast\")\n    ).filter((el) => window.getComputedStyle(el).display !== \"none\");\n    if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n      toast.setVisible().then((res) => (this.previouslyFocused = res));\n    }\n    if (visibleToasts.length > 0) this.pendingVisibility.push(toast);\n  };\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}

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

@@ -12,26 +12,6 @@ describe("ic-toast-region component", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("should test showing and hiding toasts with deprecated showVisible method", async () => {
-        const page = await newSpecPage({
-            components: [ToastRegion, Toast],
-            html: `<ic-toast-region>
-      <ic-toast heading="Heading"></ic-toast>
-      <ic-toast heading="Heading"></ic-toast>
-      </ic-toast-region>`,
-        });
-        const toasts = page.root.querySelectorAll("ic-toast");
-        await page.root.setVisible(toasts[0]);
-        expect(page.rootInstance.pendingVisibility.length).toBe(1);
-        await page.root.setVisible(toasts[1]);
-        expect(page.rootInstance.pendingVisibility.length).toBe(2);
-        await page.rootInstance.handleDismissedToast();
-        expect(page.rootInstance.pendingVisibility.length).toBe(1);
-        await page.rootInstance.handleDismissedToast();
-        expect(page.rootInstance.pendingVisibility.length).toBe(0);
-        await page.rootInstance.handleDismissedToast();
-        expect(page.rootInstance.pendingVisibility.length).toBe(0);
-    });
     it("should test showing and hiding toasts with openToast prop", async () => {
         const page = await newSpecPage({
             components: [ToastRegion, Toast],

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

@@ -1 +1 @@
-{"version":3,"file":"ic-toast-region.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toast-region/test/basic/ic-toast-region.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Toast } from \"../../../ic-toast/ic-toast\";\nimport { ToastRegion } from \"../../ic-toast-region\";\n\ndescribe(\"ic-toast-region component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test showing and hiding toasts with deprecated showVisible method\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n    await page.root.setVisible(toasts[0]);\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    await page.root.setVisible(toasts[1]);\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test showing and hiding toasts with openToast prop\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n    page.root.openToast = toasts[0];\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    page.root.openToast = toasts[1];\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test previouslyFocused\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast, Button],\n      html: `<ic-toast-region>\n      <ic-button>Click Me</ic-button>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const button = page.root.querySelector(\"ic-button\");\n    page.rootInstance.previouslyFocused = button;\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test previously focused - standard element\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <button>Click Me</button>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const button = page.root.querySelector(\"button\");\n    page.rootInstance.previouslyFocused = button;\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n});\n"]}
+{"version":3,"file":"ic-toast-region.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toast-region/test/basic/ic-toast-region.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Toast } from \"../../../ic-toast/ic-toast\";\nimport { ToastRegion } from \"../../ic-toast-region\";\n\ndescribe(\"ic-toast-region component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test showing and hiding toasts with openToast prop\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n    page.root.openToast = toasts[0];\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    page.root.openToast = toasts[1];\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test previouslyFocused\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast, Button],\n      html: `<ic-toast-region>\n      <ic-button>Click Me</ic-button>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const button = page.root.querySelector(\"ic-button\");\n    page.rootInstance.previouslyFocused = button;\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test previously focused - standard element\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <button>Click Me</button>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const button = page.root.querySelector(\"button\");\n    page.rootInstance.previouslyFocused = button;\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n});\n"]}

package/dist/collection/components/ic-toggle-button/ic-toggle-button.css

@@ -449,21 +449,21 @@ video {
   );
 }
 
-:host(.dark) {
+:host(.ic-toggle-button-dark) {
   --button-border: var(
     --toggle-button-border,
     var(--ic-border-width) solid var(--ic-action-dark)
   );
 }
 
-:host(.light) {
+:host(.ic-toggle-button-light) {
   --button-border: var(
     --toggle-button-border,
     var(--ic-border-width) solid var(--ic-action-light)
   );
 }
 
-:host(.disabled) {
+:host(.ic-toggle-button-disabled) {
   --button-border: var(--toggle-button-border, var(--ic-border-disabled));
 }
 
@@ -487,13 +487,14 @@ video {
 }
 
 :host(.expand-toggle-group-child) ::part(button):focus,
-:host(.expand-toggle-group-child.checked) ::part(button):focus {
+:host(.expand-toggle-group-child.ic-toggle-button-checked)
+  ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),
     var(--ic-border-focus);
 }
 
-:host(.expand-toggle-group-child.light) ::part(button):focus,
-:host(.expand-toggle-group-child.dark) ::part(button):focus {
+:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,
+:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),
     var(--ic-border-focus);
 }
@@ -506,136 +507,142 @@ video {
   border: var(--button-border);
 }
 
-:host(.checked) ::part(button) {
+:host(.ic-toggle-button-checked) ::part(button) {
   background-color: var(--ic-action-default);
   color: var(--ic-architectural-white);
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white);
 }
 
-:host(.checked) ::part(button):focus {
+:host(.ic-toggle-button-checked) ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),
     var(--ic-border-focus);
 }
 
-:host(.checked) ::part(button):hover {
+:host(.ic-toggle-button-checked) ::part(button):hover {
   background-color: var(--button-default-hover);
 }
 
-:host(.checked) ::part(button):active,
-:host(.icon.checked) ::part(button):active {
+:host(.ic-toggle-button-checked) ::part(button):active,
+:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {
   background-color: var(--ic-action-default-active);
 }
 
-:host(.dark.checked) ::part(button) {
+:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button) {
   background-color: var(--ic-action-dark);
 }
 
-:host(.dark.checked) ::part(button):hover {
+:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):hover {
   background-color: var(--ic-action-dark-hover);
 }
 
-:host(.dark.checked) ::part(button):active,
-:host(.icon.dark.checked) ::part(button):active {
+:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):active,
+:host(.ic-toggle-button-icon.ic-toggle-button-dark.ic-toggle-button-checked)
+  ::part(button):active {
   background-color: var(--ic-action-dark-active);
 }
 
-:host(.light.checked) ::part(button) {
+:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button) {
   background-color: var(--ic-action-light);
   color: var(--ic-color-primary-text);
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black);
 }
 
-:host(.light.checked) ::part(button):hover {
+:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):hover {
   background-color: var(--ic-action-light-hover);
 }
 
-:host(.light.checked) ::part(button):active,
-:host(.icon.light.checked) ::part(button):active {
+:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):active,
+:host(.ic-toggle-button-icon.ic-toggle-button-light.ic-toggle-button-checked)
+  ::part(button):active {
   background-color: var(--ic-action-light-active);
 }
 
-:host(.light.checked) ::part(button):focus {
+:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),
     var(--ic-border-focus);
 }
 
-:host(.disabled) ::part(button),
-:host(.icon.disabled) ::part(button) {
+:host(.ic-toggle-button-disabled) ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled) ::part(button) {
   border: var(--button-border);
 }
 
-:host(.disabled.checked) ::part(button),
-:host(.icon.disabled.checked) ::part(button) {
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)
+  ::part(button) {
   background-color: transparent;
 }
 
-:host(.disabled.checked) ::part(button),
-:host(.icon.disabled.checked) ::part(button)::before {
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)
+  ::part(button)::before {
   background-image: radial-gradient(var(--ic-architectural-400) 95%, white 20%);
   background-repeat: no-repeat;
 }
 
-:host(.icon) ::part(button) {
+:host(.ic-toggle-button-icon) ::part(button) {
   border: var(--button-border);
   height: calc(var(--ic-space-xl) + var(--ic-space-xs));
   width: calc(var(--ic-space-xl) + var(--ic-space-xs));
 }
 
-:host(.icon) ::part(button):active {
+:host(.ic-toggle-button-icon) ::part(button):active {
   background-color: var(--ic-action-default-bg-active);
 }
 
-:host(.icon.dark) ::part(button):active {
+:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {
   background-color: var(--ic-action-dark-bg-active);
 }
 
-:host(.icon.light) ::part(button):active {
+:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {
   background-color: var(--ic-action-light-bg-active);
 }
 
-:host(.icon.small) ::part(button) {
+:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {
   height: var(--ic-space-xl);
   width: var(--ic-space-xl);
 }
 
-:host(.icon.large) ::part(button) {
+:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {
   height: var(--ic-space-xxl);
   width: var(--ic-space-xxl);
 }
 
-:host(.checked.loading) ::part(button) {
+:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {
   background-color: var(--button-default-active);
 }
 
-:host(.loading) ::part(ic-loading-container) {
+:host(.ic-toggle-button-loading) ::part(ic-loading-container) {
   --inner-color: var(--ic-architectural-white);
 }
 
-:host(.checked.loading.light) ::part(button) {
+:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-light)
+  ::part(button) {
   background-color: var(--ic-action-light-active);
 }
 
-:host(.checked.loading.dark) ::part(button) {
+:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-dark)
+  ::part(button) {
   background-color: var(--ic-action-dark-active);
 }
 
 @media (forced-colors: active) {
-  :host(.checked) ::part(button),
-  :host(.checked) ::part(button):hover {
+  :host(.ic-toggle-button-checked) ::part(button),
+  :host(.ic-toggle-button-checked) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.light) ::part(button),
-  :host(.checked.light) ::part(button):hover {
+  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),
+  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.dark) ::part(button),
-  :host(.checked.dark) ::part(button):hover {
+  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),
+  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.disabled) ::part(button) {
+  :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {
     background-color: GrayText;
   }
 }

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

@@ -13,7 +13,7 @@ export class ToggleButton {
             !this.loading &&
                 !this.disabled &&
                 this.icToggleChecked.emit({
-                    checked: this.toggleChecked,
+                    checked: this.checked,
                 });
         };
         this.accessibleLabel = undefined;
@@ -23,14 +23,14 @@ export class ToggleButton {
         this.iconPlacement = undefined;
         this.label = undefined;
         this.loading = false;
-        this.size = "default";
-        this.toggleChecked = false;
+        this.size = "medium";
+        this.checked = false;
         this.variant = "default";
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
         const parentIconPlacement = this.el.parentElement.iconPlacement;
-        this.iconPosition = this.iconPlacement || parentIconPlacement;
+        this.iconPosition = this.iconPlacement || parentIconPlacement || "left";
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([
@@ -45,18 +45,18 @@ export class ToggleButton {
             e.stopImmediatePropagation();
         }
         else if (!this.loading) {
-            this.toggleChecked = !this.toggleChecked;
+            this.checked = !this.checked;
         }
     }
     render() {
         return (h(Host, { class: {
-                ["disabled"]: this.disabled,
-                ["checked"]: this.toggleChecked,
-                [`${this.appearance}`]: true,
-                ["icon"]: this.variant === "icon",
-                [`${this.size}`]: true,
-                ["loading"]: this.loading,
-            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.toggleChecked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.toggleChecked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition ? `${this.iconPosition}-icon` : "icon"}` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
+                ["ic-toggle-button-disabled"]: this.disabled,
+                ["ic-toggle-button-checked"]: this.checked,
+                [`ic-toggle-button-${this.appearance}`]: true,
+                ["ic-toggle-button-icon"]: this.variant === "icon",
+                [`ic-toggle-button-${this.size}`]: true,
+                ["ic-toggle-button-loading"]: this.loading,
+            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.checked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.checked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
     }
     static get is() { return "ic-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -207,7 +207,7 @@ export class ToggleButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -224,9 +224,9 @@ export class ToggleButton {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "toggleChecked": {
+            "checked": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -240,7 +240,7 @@ export class ToggleButton {
                     "tags": [],
                     "text": "If `true`, the toggle button will be in a checked state."
                 },
-                "attribute": "toggle-checked",
+                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },

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

@@ -1 +1 @@
-{"version":3,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EAEL,MAAM,EACN,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAG7B;;;GAGG;AASH,MAAM,OAAO,YAAY;;QA4Ff,gBAAW,GAAG,CAAC,EAAc,EAAE,EAAE;YACvC,EAAE,CAAC,wBAAwB,EAAE,CAAC;QAChC,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAS,EAAE;YAC/B,CAAC,IAAI,CAAC,OAAO;gBACX,CAAC,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACxB,OAAO,EAAE,IAAI,CAAC,aAAa;iBAC5B,CAAC,CAAC;QACP,CAAC,CAAC;;0BAzFuC,SAAS;wBAKrB,KAAK;yBAKJ,KAAK;;;uBAeP,KAAK;oBAKR,SAAS;6BAK+B,KAAK;uBAKf,SAAS;;IAShE,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,MAAM,mBAAmB,GACvB,IAAI,CAAC,EAAE,CAAC,aACT,CAAC,aAAa,CAAC;QAChB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,IAAI,mBAAmB,CAAC;IAChE,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B;YACE;gBACE,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;gBACjE,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO;aACjE;SACF,EACD,eAAe,CAChB,CAAC;IACJ,CAAC;IAGD,eAAe,CAAC,CAAQ;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC/B,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACzB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QAC3C,CAAC;IACH,CAAC;IAcD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ;gBAC3B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,aAAa;gBAC/B,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;gBAC5B,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBACjC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBACtB,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO;aAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,iCACgB,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EACvD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,IAAI,CAAC,eAAe,gBACf,GACV,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KACrD,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,GAAG,IAAI,CAAC,QAAQ,EAAE;gBAEhC,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK;gBACtC,eAAQ;gBACP,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,YACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,GACJ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,OAAO,CAAC,CAAC,CAAC,MACpD,EAAE,GACI,CACT;gBACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,CAC/B,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CACxC,CACS,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement;\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.toggleChecked = !this.toggleChecked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.toggleChecked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n          [\"checked\"]: this.toggleChecked,\n          [`${this.appearance}`]: true,\n          [\"icon\"]: this.variant === \"icon\",\n          [`${this.size}`]: true,\n          [\"loading\"]: this.loading,\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.toggleChecked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.toggleChecked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot\n              name=\"icon\"\n              slot={`${\n                this.iconPosition ? `${this.iconPosition}-icon` : \"icon\"\n              }`}\n            ></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EAEL,MAAM,EACN,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAG7B;;;GAGG;AASH,MAAM,OAAO,YAAY;;QA4Ff,gBAAW,GAAG,CAAC,EAAc,EAAE,EAAE;YACvC,EAAE,CAAC,wBAAwB,EAAE,CAAC;QAChC,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAS,EAAE;YAC/B,CAAC,IAAI,CAAC,OAAO;gBACX,CAAC,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACxB,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB,CAAC,CAAC;QACP,CAAC,CAAC;;0BAzFuC,SAAS;wBAKrB,KAAK;yBAKJ,KAAK;;;uBAeP,KAAK;oBAKR,QAAQ;uBAK0B,KAAK;uBAKT,SAAS;;IAShE,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,MAAM,mBAAmB,GACvB,IAAI,CAAC,EAAE,CAAC,aACT,CAAC,aAAa,CAAC;QAChB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,IAAI,mBAAmB,IAAI,MAAM,CAAC;IAC1E,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B;YACE;gBACE,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;gBACjE,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO;aACjE;SACF,EACD,eAAe,CAChB,CAAC;IACJ,CAAC;IAGD,eAAe,CAAC,CAAQ;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC/B,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAcD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,2BAA2B,CAAC,EAAE,IAAI,CAAC,QAAQ;gBAC5C,CAAC,0BAA0B,CAAC,EAAE,IAAI,CAAC,OAAO;gBAC1C,CAAC,oBAAoB,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;gBAC7C,CAAC,uBAAuB,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAClD,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBACvC,CAAC,0BAA0B,CAAC,EAAE,IAAI,CAAC,OAAO;aAC3C,EACD,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,iCACgB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EACrC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EACvD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,IAAI,CAAC,eAAe,gBACf,GACV,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KACrD,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,GAAG,IAAI,CAAC,QAAQ,EAAE;gBAEhC,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK;gBACtC,eAAQ;gBACP,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,OAAO,GAAS,CAC7D;gBACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,CAC/B,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CACxC,CACS,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement || \"left\";\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.checked = !this.checked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"ic-toggle-button-disabled\"]: this.disabled,\n          [\"ic-toggle-button-checked\"]: this.checked,\n          [`ic-toggle-button-${this.appearance}`]: true,\n          [\"ic-toggle-button-icon\"]: this.variant === \"icon\",\n          [`ic-toggle-button-${this.size}`]: true,\n          [\"ic-toggle-button-loading\"]: this.loading,\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.checked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.checked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot name=\"icon\" slot={`${this.iconPosition}-icon`}></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}