@ukic/web-components 2.8.0 → 2.10.0

package/dist/cjs/ic-theme.cjs.entry.js

@@ -2,59 +2,59 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f8c900f.js');
-const helpers = require('./helpers-0d63359f.js');
-require('./types-7d67439f.js');
+const index = require('./index-152d1fe5.js');
+const helpers = require('./helpers-3f91f63a.js');
+require('./types-dc22e301.js');
 
 const Theme = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.themeChange = index.createEvent(this, "themeChange", 7);
-    this.checkThemeColorContrast = () => {
-      if (helpers.getThemeColorBrightness() < helpers.BLACK_MIN_COLOR_BRIGHTNESS &&
-        helpers.getThemeColorBrightness() > helpers.WHITE_MAX_COLOR_BRIGHTNESS) {
-        console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);
-      }
-    };
-    this.setThemeColor = () => {
-      if (this.color !== null) {
-        let colorRGBA = null;
-        const firstChar = this.color.slice(0, 1);
-        if (firstChar === "#") {
-          colorRGBA = helpers.hexToRgba(this.color);
-        }
-        else if (firstChar.toLowerCase() === "r") {
-          colorRGBA = helpers.rgbaStrToObj(this.color);
-        }
-        this.setThemeRGBA(colorRGBA);
-      }
-    };
-    this.setThemeRGBA = (colorRGBA) => {
-      if (colorRGBA !== null) {
-        const root = document.documentElement;
-        root.style.setProperty("--ic-theme-primary-r", colorRGBA.r.toString());
-        root.style.setProperty("--ic-theme-primary-g", colorRGBA.g.toString());
-        root.style.setProperty("--ic-theme-primary-b", colorRGBA.b.toString());
-        root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
-        this.checkThemeColorContrast();
-        const foregroundColor = helpers.getThemeForegroundColor();
-        this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
-      }
-    };
-    this.color = null;
-  }
-  watchColorPropHandler() {
-    this.setThemeColor();
-  }
-  componentWillLoad() {
-    this.setThemeColor();
-  }
-  render() {
-    return index.h(index.Host, null);
-  }
-  static get watchers() { return {
-    "color": ["watchColorPropHandler"]
-  }; }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.themeChange = index.createEvent(this, "themeChange", 7);
+        this.checkThemeColorContrast = () => {
+            if (helpers.getThemeColorBrightness() < helpers.BLACK_MIN_COLOR_BRIGHTNESS &&
+                helpers.getThemeColorBrightness() > helpers.WHITE_MAX_COLOR_BRIGHTNESS) {
+                console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);
+            }
+        };
+        this.setThemeColor = () => {
+            if (this.color !== null) {
+                let colorRGBA = null;
+                const firstChar = this.color.slice(0, 1);
+                if (firstChar === "#") {
+                    colorRGBA = helpers.hexToRgba(this.color);
+                }
+                else if (firstChar.toLowerCase() === "r") {
+                    colorRGBA = helpers.rgbaStrToObj(this.color);
+                }
+                this.setThemeRGBA(colorRGBA);
+            }
+        };
+        this.setThemeRGBA = (colorRGBA) => {
+            if (colorRGBA !== null) {
+                const root = document.documentElement;
+                root.style.setProperty("--ic-theme-primary-r", colorRGBA.r.toString());
+                root.style.setProperty("--ic-theme-primary-g", colorRGBA.g.toString());
+                root.style.setProperty("--ic-theme-primary-b", colorRGBA.b.toString());
+                root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
+                this.checkThemeColorContrast();
+                const foregroundColor = helpers.getThemeForegroundColor();
+                this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
+            }
+        };
+        this.color = null;
+    }
+    watchColorPropHandler() {
+        this.setThemeColor();
+    }
+    componentWillLoad() {
+        this.setThemeColor();
+    }
+    render() {
+        return index.h(index.Host, null);
+    }
+    static get watchers() { return {
+        "color": ["watchColorPropHandler"]
+    }; }
 };
 
 exports.ic_theme = Theme;

package/dist/cjs/ic-theme.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-theme.entry.cjs.js","mappings":";;;;;;;;MA0Ba,KAAK;;;;IAoBR,4BAAuB,GAAG;MAChC,IACEA,+BAAuB,EAAE,GAAGC,kCAA0B;QACtDD,+BAAuB,EAAE,GAAGE,kCAA0B,EACtD;QACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;OACH;KACF,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAGC,iBAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAGC,oBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;OAC9B;KACF,CAAC;IAEM,iBAAY,GAAG,CAAC,SAAsB;MAC5C,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,eAAe,GAAGC,+BAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;OACpE;KACF,CAAC;iBArDuB,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAOD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAyCD,MAAM;IACJ,OAAOC,QAACC,UAAI,OAAQ,CAAC;GACtB;;;;;;;;","names":["getThemeColorBrightness","BLACK_MIN_COLOR_BRIGHTNESS","WHITE_MAX_COLOR_BRIGHTNESS","hexToRgba","rgbaStrToObj","getThemeForegroundColor","h","Host"],"sources":["src/components/ic-theme/ic-theme.tsx"],"sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}
+{"file":"ic-theme.entry.cjs.js","mappings":";;;;;;;;MA0Ba,KAAK;;;;QAoBR,4BAAuB,GAAG;YAChC,IACEA,+BAAuB,EAAE,GAAGC,kCAA0B;gBACtDD,+BAAuB,EAAE,GAAGE,kCAA0B,EACtD;gBACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;aACH;SACF,CAAC;QAEM,kBAAa,GAAG;YACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;gBACvB,IAAI,SAAS,GAAG,IAAI,CAAC;gBACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACzC,IAAI,SAAS,KAAK,GAAG,EAAE;oBACrB,SAAS,GAAGC,iBAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACnC;qBAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;oBAC1C,SAAS,GAAGC,oBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACtC;gBACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;aAC9B;SACF,CAAC;QAEM,iBAAY,GAAG,CAAC,SAAsB;YAC5C,IAAI,SAAS,KAAK,IAAI,EAAE;gBACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;gBACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAE/B,MAAM,eAAe,GAAGC,+BAAuB,EAAE,CAAC;gBAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;aACpE;SACF,CAAC;qBArDuB,IAAI;;IAG7B,qBAAqB;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAOD,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAyCD,MAAM;QACJ,OAAOC,QAACC,UAAI,OAAQ,CAAC;KACtB;;;;;;;;","names":["getThemeColorBrightness","BLACK_MIN_COLOR_BRIGHTNESS","WHITE_MAX_COLOR_BRIGHTNESS","hexToRgba","rgbaStrToObj","getThemeForegroundColor","h","Host"],"sources":["src/components/ic-theme/ic-theme.tsx"],"sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/cjs/ic-toast-region.cjs.entry.js

@@ -2,57 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f8c900f.js');
+const index = require('./index-152d1fe5.js');
 
 const ToastRegion = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pendingVisibility = [];
-    this.showToast = (toast) => {
-      const visibleToasts = Array.from(document.querySelectorAll("ic-toast")).filter((el) => window.getComputedStyle(el).display !== "none");
-      if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {
-        toast.setVisible().then((res) => (this.previouslyFocused = res));
-      }
-      if (visibleToasts.length > 0)
-        this.pendingVisibility.push(toast);
-    };
-    this.openToast = undefined;
-  }
-  watchOpenToastHandler(newValue) {
-    if (this.openToast !== undefined) {
-      this.showToast(newValue);
-      this.openToast = undefined;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pendingVisibility = [];
+        this.showToast = (toast) => {
+            const visibleToasts = Array.from(document.querySelectorAll("ic-toast")).filter((el) => window.getComputedStyle(el).display !== "none");
+            if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {
+                toast.setVisible().then((res) => (this.previouslyFocused = res));
+            }
+            if (visibleToasts.length > 0)
+                this.pendingVisibility.push(toast);
+        };
+        this.openToast = undefined;
     }
-  }
-  handleDismissedToast() {
-    var _a;
-    if (this.pendingVisibility.length > 0) {
-      this.pendingVisibility[0]
-        .setVisible()
-        .then((res) => (this.previouslyFocused = res));
-      this.pendingVisibility.shift();
+    watchOpenToastHandler(newValue) {
+        if (this.openToast !== undefined) {
+            this.showToast(newValue);
+            this.openToast = undefined;
+        }
     }
-    else {
-      if (this.previouslyFocused && "setFocus" in this.previouslyFocused) {
-        this.previouslyFocused.setFocus();
-      }
-      else
-        (_a = this.previouslyFocused) === null || _a === void 0 ? void 0 : _a.focus();
+    handleDismissedToast() {
+        var _a;
+        if (this.pendingVisibility.length > 0) {
+            this.pendingVisibility[0]
+                .setVisible()
+                .then((res) => (this.previouslyFocused = res));
+            this.pendingVisibility.shift();
+        }
+        else {
+            if (this.previouslyFocused && "setFocus" in this.previouslyFocused) {
+                this.previouslyFocused.setFocus();
+            }
+            else
+                (_a = this.previouslyFocused) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }
-  }
-  /**
-   * @deprecated Use openToast prop to display toast instead.
-   */
-  async setVisible(toast) {
-    this.showToast(toast);
-  }
-  render() {
-    return index.h("slot", null);
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "openToast": ["watchOpenToastHandler"]
-  }; }
+    /**
+     * @deprecated Use openToast prop to display toast instead.
+     * @param {HTMLIcToastElement} toast The toast component to display
+     */
+    async setVisible(toast) {
+        this.showToast(toast);
+    }
+    render() {
+        return index.h("slot", null);
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "openToast": ["watchOpenToastHandler"]
+    }; }
 };
 
 exports.ic_toast_region = ToastRegion;

package/dist/cjs/ic-toast-region.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-toast-region.entry.cjs.js","mappings":";;;;;;MAYa,WAAW;;;IACd,sBAAiB,GAAyB,EAAE,CAAC;IA+B7C,cAAS,GAAG,CAAC,KAAyB;MAC5C,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACtC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;MACjE,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;QACpE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;OAClE;MACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;QAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClE,CAAC;;;EA7BF,qBAAqB,CAAC,QAA4B;IAChD,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;MAChC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;MACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC5B;GACF;EAGD,oBAAoB;;IAClB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;MACrC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;SACtB,UAAU,EAAE;SACZ,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;MACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;KAChC;SAAM;MACL,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE;QACjE,IAAI,CAAC,iBAA2C,CAAC,QAAQ,EAAE,CAAC;OAC9D;;QAAM,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACxC;GACF;;;;EAgBD,MAAM,UAAU,CAAC,KAAyB;IACxC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;GACvB;EAED,MAAM;IACJ,OAAOA,qBAAa,CAAC;GACtB;;;;;;;;;","names":["h"],"sources":["src/components/ic-toast-region/ic-toast-region.tsx"],"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   */\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.entry.cjs.js","mappings":";;;;;;MAYa,WAAW;;;QACd,sBAAiB,GAAyB,EAAE,CAAC;QA+B7C,cAAS,GAAG,CAAC,KAAyB;YAC5C,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACtC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,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;gBACpE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;aAClE;YACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;gBAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClE,CAAC;;;IA7BF,qBAAqB,CAAC,QAA4B;QAChD,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;YAChC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;SAC5B;KACF;IAGD,oBAAoB;;QAClB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;iBACtB,UAAU,EAAE;iBACZ,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;YACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;SAChC;aAAM;YACL,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBACjE,IAAI,CAAC,iBAA2C,CAAC,QAAQ,EAAE,CAAC;aAC9D;;gBAAM,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;SACxC;KACF;;;;;IAiBD,MAAM,UAAU,CAAC,KAAyB;QACxC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KACvB;IAED,MAAM;QACJ,OAAOA,qBAAa,CAAC;KACtB;;;;;;;;;","names":["h"],"sources":["src/components/ic-toast-region/ic-toast-region.tsx"],"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}

package/dist/cjs/ic-toast.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f8c900f.js');
+const index = require('./index-152d1fe5.js');
 const closeIcon = require('./close-icon-7f6ef8e4.js');
-const helpers = require('./helpers-0d63359f.js');
-const types = require('./types-7d67439f.js');
+const helpers = require('./helpers-3f91f63a.js');
+const types = require('./types-dc22e301.js');
 
 const icToastCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--bottom-position:var(--ic-space-xl);position:fixed;bottom:var(--bottom-position);left:50%;transform:translate(-50%);animation:fadein var(--ic-transition-duration-slow) ease-in-out;z-index:var(--ic-z-index-toast)}:host(.hidden){display:none;animation:fadeout var(--ic-transition-duration-slow) ease-in-out}.container{max-width:32.5rem;min-width:18rem;box-shadow:var(--ic-elevation-overlay);min-height:3.5rem;background-color:var(--ic-architectural-800);color:var(--ic-color-white-text);display:flex;align-items:center;position:relative;border-radius:var(--ic-border-radius)}.toast-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);position:absolute;border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs)}.divider-neutral{background-color:var(--ic-status-unknown)}.divider-info{background-color:var(--ic-status-info-contrast)}.divider-warning{background-color:var(--ic-status-warning-contrast)}.divider-error{background-color:var(--ic-status-error-contrast)}.divider-success{background-color:var(--ic-status-success-contrast)}.toast-icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}:host([variant=\"neutral\"]) .toast-icon svg,::slotted(svg){fill:var(--ic-status-unknown)}:host([variant=\"info\"]) .toast-icon svg{fill:var(--ic-status-info-contrast)}:host([variant=\"warning\"]) .toast-icon svg{fill:var(--ic-status-warning-contrast)}:host([variant=\"error\"]) .toast-icon svg{fill:var(--ic-status-error-contrast)}:host([variant=\"success\"]) .toast-icon svg{fill:var(--ic-status-success-contrast)}.toast-content{margin-left:var(--ic-space-xs);width:100%}.no-icon{margin-left:var(--ic-space-md)}.toast-message{padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}.toast-action-container{padding-bottom:var(--ic-space-md)}ic-button,.toast-dismiss-timer{padding:var(--ic-space-xs)}@media (max-width: 576px){:host{--bottom-position:var(--ic-space-lg);width:calc(100% - 2 * var(--ic-space-md))}}@media (min-width: 993px){:host{--bottom-position:calc(var(--ic-space-xl) + var(--ic-space-xs))}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:var(--bottom-position);opacity:1}}@keyframes fadeout{from{bottom:var(--bottom-position);opacity:1}to{bottom:0;opacity:0}}";
 
@@ -13,155 +13,155 @@ const AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;
 const TOAST_HEADING_CHAR_LIMIT = 70;
 const TOAST_MESSAGE_CHAR_LIMIT = 140;
 const Toast = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.icDismiss = index.createEvent(this, "icDismiss", 7);
-    this.interactiveElements = [];
-    this.dismissAction = () => {
-      this.icDismiss.emit();
-    };
-    this.handleProgressChange = () => {
-      this.timerProgress -=
-        (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;
-    };
-    this.timerProgress = 100;
-    this.visible = false;
-    this.autoDismissTimeout = 5000;
-    this.dismissButtonAriaLabel = "dismiss";
-    this.dismissMode = "manual";
-    this.heading = undefined;
-    this.message = undefined;
-    this.neutralIconAriaLabel = undefined;
-    this.variant = undefined;
-  }
-  disconnectedCallback() {
-    window.clearTimeout(this.dismissTimeout);
-    window.clearInterval(this.timerRefreshInterval);
-  }
-  componentWillLoad() {
-    var _a, _b;
-    this.handleLongText(this.heading.length > TOAST_HEADING_CHAR_LIMIT, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) > TOAST_MESSAGE_CHAR_LIMIT);
-    if (this.autoDismissTimeout < 5000)
-      this.autoDismissTimeout = 5000;
-    if (helpers.isSlotUsed(this.el, "action"))
-      this.dismissMode = "manual";
-    this.isManual = this.dismissMode === "manual";
-    if (helpers.isSlotUsed(this.el, "neutral-icon"))
-      this.variant = "neutral";
-    if (this.variant === "neutral") {
-      this.neutralVariantLabel =
-        (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : helpers.VARIANT_ICONS[this.variant].ariaLabel;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.icDismiss = index.createEvent(this, "icDismiss", 7);
+        this.interactiveElements = [];
+        this.dismissAction = () => {
+            this.icDismiss.emit();
+        };
+        this.handleProgressChange = () => {
+            this.timerProgress -=
+                (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;
+        };
+        this.timerProgress = 100;
+        this.visible = false;
+        this.autoDismissTimeout = 5000;
+        this.dismissButtonAriaLabel = "dismiss";
+        this.dismissMode = "manual";
+        this.heading = undefined;
+        this.message = undefined;
+        this.neutralIconAriaLabel = undefined;
+        this.variant = undefined;
     }
-    if (this.isManual) {
-      const toastMessage = helpers.isPropDefined(this.message)
-        ? `. ${this.message}`
-        : "";
-      this.el.setAttribute("aria-label", this.variant
-        ? this.neutralVariantLabel || helpers.VARIANT_ICONS[this.variant].ariaLabel
-        : this.heading);
-      (this.variant || this.message) &&
-        this.el.setAttribute("aria-description", this.variant ? `${this.heading}${toastMessage}` : this.message);
+    disconnectedCallback() {
+        window.clearTimeout(this.dismissTimeout);
+        window.clearInterval(this.timerRefreshInterval);
     }
-  }
-  componentDidLoad() {
-    helpers.onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Toast");
-    const actionContent = helpers.getSlot(this.el, "action");
-    const dismissButton = this.el.shadowRoot.querySelector("ic-button");
-    if (actionContent)
-      this.interactiveElements.push(actionContent);
-    if (dismissButton)
-      this.interactiveElements.push(dismissButton);
-  }
-  handleDismiss() {
-    this.visible = false;
-    clearInterval(this.timerRefreshInterval);
-    this.timerProgress = 100;
-  }
-  handleKeyboard(ev) {
-    if (this.isManual && this.visible) {
-      switch (ev.key) {
-        case "Tab":
-          ev.preventDefault();
-          this.findNextInteractiveElement(ev.shiftKey).setFocus();
-          break;
-        case "Escape":
-          !ev.repeat && this.dismissAction();
-          ev.stopImmediatePropagation();
-          break;
-      }
+    componentWillLoad() {
+        var _a, _b;
+        this.handleLongText(this.heading.length > TOAST_HEADING_CHAR_LIMIT, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) > TOAST_MESSAGE_CHAR_LIMIT);
+        if (this.autoDismissTimeout < 5000)
+            this.autoDismissTimeout = 5000;
+        if (helpers.isSlotUsed(this.el, "action"))
+            this.dismissMode = "manual";
+        this.isManual = this.dismissMode === "manual";
+        if (helpers.isSlotUsed(this.el, "neutral-icon"))
+            this.variant = "neutral";
+        if (this.variant === "neutral") {
+            this.neutralVariantLabel =
+                (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : helpers.VARIANT_ICONS[this.variant].ariaLabel;
+        }
+        if (this.isManual) {
+            const toastMessage = helpers.isPropDefined(this.message)
+                ? `. ${this.message}`
+                : "";
+            this.el.setAttribute("aria-label", this.variant
+                ? this.neutralVariantLabel || helpers.VARIANT_ICONS[this.variant].ariaLabel
+                : this.heading);
+            (this.variant || this.message) &&
+                this.el.setAttribute("aria-description", this.variant ? `${this.heading}${toastMessage}` : this.message);
+        }
     }
-  }
-  handleTimer(ev) {
-    if (!this.isManual) {
-      switch (ev.type) {
-        case "mouseenter":
-          window.clearTimeout(this.dismissTimeout);
-          window.clearInterval(this.timerRefreshInterval);
-          this.timerProgress = 100;
-          break;
-        case "mouseleave":
-          this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
-          this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
-          break;
-      }
+    componentDidLoad() {
+        helpers.onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Toast");
+        const actionContent = helpers.getSlot(this.el, "action");
+        const dismissButton = this.el.shadowRoot.querySelector("ic-button");
+        if (actionContent)
+            this.interactiveElements.push(actionContent);
+        if (dismissButton)
+            this.interactiveElements.push(dismissButton);
     }
-  }
-  /**
-   * @internal Used to display the individual toast.
-   * @returns The element that previously had focus before the toast appeared
-   */
-  async setVisible() {
-    if (!this.visible)
-      this.visible = true;
-    if (!this.isManual) {
-      this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
-      this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
-      return null;
+    handleDismiss() {
+        this.visible = false;
+        clearInterval(this.timerRefreshInterval);
+        this.timerProgress = 100;
     }
-    else {
-      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);
-      return document.activeElement;
+    handleKeyboard(ev) {
+        if (this.isManual && this.visible) {
+            switch (ev.key) {
+                case "Tab":
+                    ev.preventDefault();
+                    this.findNextInteractiveElement(ev.shiftKey).setFocus();
+                    break;
+                case "Escape":
+                    !ev.repeat && this.dismissAction();
+                    ev.stopImmediatePropagation();
+                    break;
+            }
+        }
     }
-  }
-  handleLongText(headingTooLong, messageTooLong) {
-    if (messageTooLong || headingTooLong) {
-      console.error(`Too many characters in toast ${headingTooLong ? "heading" : ""}${headingTooLong && messageTooLong ? " and " : ""}${messageTooLong ? "message" : ""}. Refer to character limits specified in the prop description`);
+    handleTimer(ev) {
+        if (!this.isManual) {
+            switch (ev.type) {
+                case "mouseenter":
+                    window.clearTimeout(this.dismissTimeout);
+                    window.clearInterval(this.timerRefreshInterval);
+                    this.timerProgress = 100;
+                    break;
+                case "mouseleave":
+                    this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
+                    this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
+                    break;
+            }
+        }
     }
-  }
-  findNextInteractiveElement(isBackwards) {
-    const first = this.interactiveElements[0];
-    const last = this.interactiveElements[this.interactiveElements.length - 1];
-    const source = isBackwards ? first : last;
-    const target = isBackwards ? last : first;
-    if (this.isActive(source))
-      return target;
-    let currentIndex;
-    const found = this.interactiveElements.some((el, index) => {
-      if (!this.isActive(el))
-        return false;
-      currentIndex = index;
-      return true;
-    });
-    if (!found)
-      return first;
-    return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];
-  }
-  isActive(targetEl) {
-    if (targetEl === this.el)
-      return !!this.el.shadowRoot.activeElement;
-    return document.activeElement === targetEl;
-  }
-  render() {
-    const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
-    return (index.h(index.Host, { class: { ["hidden"]: !visible }, role: isManual ? "dialog" : "status" }, index.h("div", { class: "container" }, variant && visible && (index.h("div", { class: "toast-icon-container" }, index.h("div", { class: {
-        ["divider"]: true,
-        [`divider-${variant}`]: true,
-      } }), variant === "neutral" ? (index.h("slot", { name: "neutral-icon" })) : (index.h("span", { class: "toast-icon", innerHTML: helpers.VARIANT_ICONS[variant].icon })))), index.h("div", { class: {
-        ["toast-content"]: true,
-        ["no-icon"]: variant === "neutral" && !helpers.isSlotUsed(this.el, "neutral-icon"),
-      } }, index.h("div", { class: "toast-message" }, index.h("ic-typography", { variant: "subtitle-large" }, visible && index.h("h5", null, heading)), message && (index.h("ic-typography", { variant: "body" }, visible && index.h("p", null, message)))), helpers.isSlotUsed(this.el, "action") && (index.h("div", { class: "toast-action-container" }, index.h("slot", { name: "action" })))), !isManual ? (index.h("ic-loading-indicator", { class: "toast-dismiss-timer", appearance: "light", size: "icon", progress: this.timerProgress })) : (index.h("ic-button", { id: "dismiss-button", innerHTML: closeIcon.closeIcon, onClick: this.dismissAction, variant: "icon", appearance: types.IcThemeForegroundEnum.Light, "aria-label": dismissButtonAriaLabel })))));
-  }
-  get el() { return index.getElement(this); }
+    /**
+     * @internal Used to display the individual toast.
+     * @returns The element that previously had focus before the toast appeared
+     */
+    async setVisible() {
+        if (!this.visible)
+            this.visible = true;
+        if (!this.isManual) {
+            this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
+            this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
+            return null;
+        }
+        else {
+            window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);
+            return document.activeElement;
+        }
+    }
+    handleLongText(headingTooLong, messageTooLong) {
+        if (messageTooLong || headingTooLong) {
+            console.error(`Too many characters in toast ${headingTooLong ? "heading" : ""}${headingTooLong && messageTooLong ? " and " : ""}${messageTooLong ? "message" : ""}. Refer to character limits specified in the prop description`);
+        }
+    }
+    findNextInteractiveElement(isBackwards) {
+        const first = this.interactiveElements[0];
+        const last = this.interactiveElements[this.interactiveElements.length - 1];
+        const source = isBackwards ? first : last;
+        const target = isBackwards ? last : first;
+        if (this.isActive(source))
+            return target;
+        let currentIndex;
+        const found = this.interactiveElements.some((el, index) => {
+            if (!this.isActive(el))
+                return false;
+            currentIndex = index;
+            return true;
+        });
+        if (!found)
+            return first;
+        return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];
+    }
+    isActive(targetEl) {
+        if (targetEl === this.el)
+            return !!this.el.shadowRoot.activeElement;
+        return document.activeElement === targetEl;
+    }
+    render() {
+        const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
+        return (index.h(index.Host, { class: { ["hidden"]: !visible }, role: isManual ? "dialog" : "status" }, index.h("div", { class: "container" }, variant && visible && (index.h("div", { class: "toast-icon-container" }, index.h("div", { class: {
+                ["divider"]: true,
+                [`divider-${variant}`]: true,
+            } }), variant === "neutral" ? (index.h("slot", { name: "neutral-icon" })) : (index.h("span", { class: "toast-icon", innerHTML: helpers.VARIANT_ICONS[variant].icon })))), index.h("div", { class: {
+                ["toast-content"]: true,
+                ["no-icon"]: variant === "neutral" && !helpers.isSlotUsed(this.el, "neutral-icon"),
+            } }, index.h("div", { class: "toast-message" }, index.h("ic-typography", { variant: "subtitle-large" }, visible && index.h("h5", null, heading)), message && (index.h("ic-typography", { variant: "body" }, visible && index.h("p", null, message)))), helpers.isSlotUsed(this.el, "action") && (index.h("div", { class: "toast-action-container" }, index.h("slot", { name: "action" })))), !isManual ? (index.h("ic-loading-indicator", { class: "toast-dismiss-timer", appearance: "light", size: "icon", progress: this.timerProgress })) : (index.h("ic-button", { id: "dismiss-button", innerHTML: closeIcon.closeIcon, onClick: this.dismissAction, variant: "icon", appearance: types.IcThemeForegroundEnum.Light, "aria-label": dismissButtonAriaLabel })))));
+    }
+    get el() { return index.getElement(this); }
 };
 Toast.style = icToastCss;