@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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

@@ -0,0 +1,396 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  autoDismissTimeout: 5000,
+  dismissButtonAriaLabel: "dismiss",
+  dismissMode: "manual",
+  heading: "This is the heading",
+  message: "This is the message",
+  neutralIconAriaLabel: "",
+  variant: "neutral",
+  actionSlot: "action",
+  neutralIconSlot: "neutral-icon",
+};
+
+export default {
+  title: "Web Components/Toast",
+  component: "ic-toast",
+};
+
+export const Default = {
+  render: (args) =>
+    html`<button onclick="func()">Display toast</button>
+      <script>
+        var toastRegion = document.querySelector("ic-toast-region");
+        function func() {
+          var x = document.getElementById("toast1");
+          toastRegion.openToast = x;
+        }
+      </script>
+      <ic-toast-region>
+        <ic-toast id="toast1" heading="Your coffee is ready"></ic-toast>
+      </ic-toast-region>`,
+
+  name: "Default",
+};
+
+export const WithVariant = {
+  render: (args) =>
+    html`<button onclick="func()">Display toast</button>
+      <script>
+        var toastRegion = document.querySelector("ic-toast-region");
+        function func() {
+          var x = document.getElementById("toast1");
+          toastRegion.openToast = x;
+        }
+      </script>
+      <ic-toast-region>
+        <ic-toast
+          id="toast1"
+          heading="Your coffee is ready"
+          message="Please dismiss and collect"
+          variant="success"
+        ></ic-toast>
+      </ic-toast-region>`,
+
+  name: "With variant",
+};
+
+export const MultilineMessage = {
+  render: (args) =>
+    html`<button onclick="func()">Display toast</button>
+      <script>
+        var toastRegion = document.querySelector("ic-toast-region");
+        function func() {
+          var x = document.getElementById("toast1");
+          toastRegion.openToast = x;
+        }
+      </script>
+      <ic-toast-region>
+        <ic-toast
+          id="toast1"
+          heading="Your coffee is ready"
+          message="Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold. Don't delay! We wouldn't want you to lose out on your fantastic coffee now would we?"
+        ></ic-toast>
+      </ic-toast-region>`,
+
+  name: "Multiline message",
+};
+
+export const SlottedActionElements = {
+  render: (args) =>
+    html`<button onclick="func()">Display toast 1</button>
+      <button onclick="func2()">Display toast 2</button>
+      <script>
+        var toastRegion = document.querySelector("ic-toast-region");
+        function func() {
+          var x = document.getElementById("toast1");
+          toastRegion.openToast = x;
+        }
+        function func2() {
+          var x = document.getElementById("toast2");
+          toastRegion.openToast = x;
+        }
+      </script>
+      <ic-toast-region>
+        <ic-toast
+          id="toast1"
+          heading="Your coffee had issues"
+          message="Please dismiss and try again"
+          variant="warning"
+        >
+          <ic-button slot="action" appearance="light">Click me</ic-button>
+        </ic-toast>
+        <ic-toast
+          id="toast2"
+          heading="Your coffee was lost"
+          message="Please dismiss and try again"
+          variant="error"
+        >
+          <ic-link href="/" slot="action" theme="dark">Click me</ic-link>
+        </ic-toast>
+      </ic-toast-region>`,
+
+  name: "Slotted action elements",
+};
+
+export const AutoDismiss = {
+  render: (args) =>
+    html`<button onclick="func()">Display toast 1</button>
+      <button onclick="func2()">Display toast 2</button>
+      <script>
+        var toastRegion = document.querySelector("ic-toast-region");
+        function func() {
+          var x = document.getElementById("toast1");
+          toastRegion.openToast = x;
+        }
+        function func2() {
+          var x = document.getElementById("toast2");
+          toastRegion.openToast = x;
+        }
+      </script>
+      <ic-toast-region>
+        <ic-toast
+          id="toast1"
+          variant="info"
+          heading="Your coffee is ready"
+          message="This alert will dismiss itself, please collect your java"
+          dismiss-mode="automatic"
+          auto-dismiss-timeout="10000"
+        ></ic-toast>
+        <ic-toast
+          id="toast2"
+          heading="Your coffee was lost"
+          message="This alert will dismiss itself, sorry about the coffee"
+          variant="error"
+          dismiss-mode="automatic"
+          auto-dismiss-timeout="10000"
+        ></ic-toast>
+      </ic-toast-region>`,
+
+  name: "Auto dismiss",
+};
+
+export const CustomNeutralIconAndDismissAriaLabel = {
+  render: (args) =>
+    html`<button onclick="func()">Display toast</button>
+      <script>
+        var toastRegion = document.querySelector("ic-toast-region");
+        function func() {
+          var x = document.getElementById("toast1");
+          toastRegion.openToast = x;
+        }
+      </script>
+      <ic-toast-region>
+        <ic-toast
+          id="toast1"
+          heading="Your coffee is ready"
+          variant="neutral"
+          neutral-icon-aria-label="Hello world"
+          dismiss-button-aria-label="dismiss me"
+        >
+          <svg
+            slot="neutral-icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.79502 15.875L4.62502 11.705L3.20502 13.115L8.79502 18.705L20.795 6.70501L19.385 5.29501L8.79502 15.875Z"
+            />
+          </svg>
+        </ic-toast>
+      </ic-toast-region>`,
+
+  name: "Custom neutral icon and dismiss aria-label",
+};
+
+export const ExampleOnPage = {
+  render: (args) =>
+    html` <script>
+        var toastRegion = document.querySelector("ic-toast-region");
+        function func() {
+          var x = document.getElementById("toast1");
+          toastRegion.openToast = x;
+        }
+      </script>
+      <ic-toast-region>
+        <ic-toast id="toast1" heading="Your coffee is ready"></ic-toast>
+      </ic-toast-region>
+      <div
+        id="header"
+        style="width:100%;height:80px;background-color:#23508e;color:var(--ic-architectural-white)"
+      >
+        <ic-typography variant="h1">Header</ic-typography>
+      </div>
+      <div id="topPageEl">
+        <ic-typography variant="h2">Top of the page</ic-typography>
+      </div>
+      <ic-typography variant="h3">Some content</ic-typography>
+      <button onclick="func()">Display toast</button>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit
+        turpis. Cras ac ligula et lectus mollis molestie in a enim. In ac turpis
+        in leo rutrum eleifend. Fusce consectetur posuere ligula, vitae semper
+        lorem mollis vitae. Fusce vel blandit turpis. Nulla justo ligula,
+        egestas quis rutrum id, vulputate eget diam. Integer mattis quis nisi id
+        blandit. Duis nisi lectus, suscipit elementum iaculis sed, porta et
+        risus.
+      </p>
+      <br />
+      <br />
+      <br />
+      <ic-typography variant="h3">More content</ic-typography>
+      <p>
+        Phasellus accumsan ligula enim, a iaculis sapien rhoncus vitae.
+        Curabitur pulvinar posuere diam in luctus. Sed blandit diam id odio
+        aliquam aliquet. Pellentesque eros enim, tristique vel mattis eu,
+        blandit at enim. Pellentesque sollicitudin pellentesque tellus vel
+        eleifend. Nulla mauris lorem, porttitor vel orci eu, iaculis maximus
+        nunc. Ut rhoncus ex ipsum. Mauris ultricies, augue sed eleifend
+        pellentesque, leo purus efficitur orci, sit amet volutpat tortor diam
+        non lorem. Morbi venenatis neque vel accumsan sagittis. Nunc rutrum
+        augue non urna tincidunt auctor in at libero. Sed in risus sit amet nisl
+        tempor viverra. Phasellus maximus sapien eu erat maximus iaculis.
+        Praesent ultricies id orci eu euismod. Fusce eu urna turpis. Praesent ut
+        neque tincidunt, porta sem id, accumsan massa.
+      </p>
+      <br />
+      <br />
+      <br />
+      <ic-typography variant="h3">Some other content</ic-typography>
+      <p>
+        Curabitur eu tempor justo. Nunc congue viverra tristique. Maecenas massa
+        enim, tincidunt consequat maximus at, fermentum vel lectus. Curabitur at
+        ligula tellus. Ut a elit sit amet augue sagittis feugiat. Mauris mi
+        enim, viverra id turpis ac, auctor vulputate ipsum. Nunc efficitur
+        volutpat augue eget sollicitudin. Pellentesque eget pharetra ligula.
+        Integer finibus feugiat sapien a pulvinar. Phasellus fermentum est
+        lacus, quis volutpat justo pellentesque vitae. Sed vitae diam porta,
+        facilisis metus ut, dictum lorem. Proin sed bibendum libero. Maecenas
+        justo neque, ultricies sed magna ac, mattis vehicula elit. Donec ac
+        lacus eget sapien luctus ultricies in in nibh.
+      </p>
+      <p>
+        Curabitur in nulla urna. Donec ligula est, suscipit eget malesuada
+        vitae, elementum et quam. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit. Nulla eu dui a quam mollis porta. Nulla ante nunc,
+        ultrices luctus dolor at, ullamcorper convallis erat. Aenean viverra
+        semper arcu nec semper. Sed non magna purus. Integer accumsan dui et
+        volutpat auctor. Phasellus nec risus ultricies, maximus nunc eu,
+        placerat diam. Etiam pulvinar lacinia urna eget molestie. Suspendisse
+        semper hendrerit ipsum, vel porttitor lacus venenatis sit amet. Nullam
+        non elit in sem vestibulum molestie tempor eget augue. Sed neque ligula,
+        tempus ac mollis bibendum, ultrices suscipit risus. Duis suscipit
+        pulvinar varius.
+      </p>
+      <br />
+      <br />
+      <br />
+      <ic-typography variant="h3">Some more</ic-typography>
+      <p>
+        Etiam accumsan nibh erat, condimentum tempus metus suscipit nec. Duis
+        placerat varius dolor eget ornare. Vestibulum egestas tellus non tellus
+        ornare, eu scelerisque erat pulvinar. Nam tempus lacus eu libero
+        consequat, in elementum magna ultricies. Etiam at suscipit odio. Duis
+        quis quam vitae quam varius luctus. Aliquam erat volutpat. Fusce laoreet
+        consectetur tortor, ac suscipit sem feugiat non. Etiam tempus tellus
+        aliquet orci pretium, nec pretium nulla faucibus
+      </p>
+      <br />
+      <br />
+      <br />
+      <ic-typography variant="h3">Nearly there</ic-typography>
+      <p>
+        Curabitur eu tempor justo. Nunc congue viverra tristique. Maecenas massa
+        enim, tincidunt consequat maximus at, fermentum vel lectus. Curabitur at
+        ligula tellus. Ut a elit sit amet augue sagittis feugiat. Mauris mi
+        enim, viverra id turpis ac, auctor vulputate ipsum. Nunc efficitur
+        volutpat augue eget sollicitudin. Pellentesque eget pharetra ligula.
+        Integer finibus feugiat sapien a pulvinar. Phasellus fermentum est
+        lacus, quis volutpat justo pellentesque vitae. Sed vitae diam porta,
+        facilisis metus ut, dictum lorem. Proin sed bibendum libero. Maecenas
+        justo neque, ultricies sed magna ac, mattis vehicula elit. Donec ac
+        lacus eget sapien luctus ultricies in in nibh.
+      </p>
+      <p>
+        Curabitur in nulla urna. Donec ligula est, suscipit eget malesuada
+        vitae, elementum et quam. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit. Nulla eu dui a quam mollis porta. Nulla ante nunc,
+        ultrices luctus dolor at, ullamcorper convallis erat. Aenean viverra
+        semper arcu nec semper. Sed non magna purus. Integer accumsan dui et
+        volutpat auctor. Phasellus nec risus ultricies, maximus nunc eu,
+        placerat diam. Etiam pulvinar lacinia urna eget molestie. Suspendisse
+        semper hendrerit ipsum, vel porttitor lacus venenatis sit amet. Nullam
+        non elit in sem vestibulum molestie tempor eget augue. Sed neque ligula,
+        tempus ac mollis bibendum, ultrices suscipit risus. Duis suscipit
+        pulvinar varius.
+      </p>
+      <br />
+      <br />
+      <br />
+      <ic-typography variant="h3">The end</ic-typography>
+      <br />`,
+
+  name: "Example on page",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<button onclick="func()">Display toast</button>
+      <script>
+        var toastRegion = document.querySelector("ic-toast-region");
+        function func() {
+          var x = document.getElementById("toast1");
+          toastRegion.openToast = x;
+        }
+      </script>
+      <ic-toast-region>
+        <ic-toast
+          id="toast1"
+          heading=${args.heading}
+          message=${args.message}
+          variant=${args.variant}
+          dismiss-mode=${args.dismissMode}
+          auto-dismiss-timeout=${args.autoDismissTimeout}
+          neutral-icon-aria-label=${args.neutralIconAriaLabel}
+          dismiss-button-aria-label=${args.dismissButtonAriaLabel}
+        >
+          <ic-button slot=${args.actionSlot} appearance="light"
+            >Click me</ic-button
+          >
+          <svg
+            slot=${args.neutralIconSlot}
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.79502 15.875L4.62502 11.705L3.20502 13.115L8.79502 18.705L20.795 6.70501L19.385 5.29501L8.79502 15.875Z"
+            />
+          </svg>
+        </ic-toast>
+      </ic-toast-region>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    dismissMode: {
+      options: ["manual", "automatic"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    variant: {
+      options: ["neutral", "info", "warning", "error", "success", ""],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    actionSlot: {
+      options: ["action", ""],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    neutralIconSlot: {
+      options: ["neutral-icon", ""],
+
+      control: {
+        type: "select",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -10,7 +10,6 @@ export class ToastRegion {
             if (visibleToasts.length > 0)
                 this.pendingVisibility.push(toast);
         };
-        this.openToast = undefined;
     }
     watchOpenToastHandler(newValue) {
         if (this.openToast !== undefined) {
@@ -41,7 +40,7 @@ export class ToastRegion {
         }
     }
     render() {
-        return h("slot", null);
+        return h("slot", { key: '6dbc76c96060dfd2265e50d622e10ee5c2202b67' });
     }
     static get is() { return "ic-toast-region"; }
     static get properties() {
@@ -51,7 +50,7 @@ export class ToastRegion {
                 "mutable": true,
                 "complexType": {
                     "original": "HTMLIcToastElement",
-                    "resolved": "HTMLIcToastElement",
+                    "resolved": "HTMLIcToastElement | undefined",
                     "references": {
                         "HTMLIcToastElement": {
                             "location": "global",
@@ -60,11 +59,13 @@ export class ToastRegion {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The toast element to be displayed."
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

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,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"]}
+{"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;IADxB;QAEU,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;KAKH;IAzCC,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,8DAAa,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 | null;\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-toggle-button/ic-toggle-button.css

@@ -523,9 +523,7 @@ video {
   --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);
 }
 
-:host(
-    .ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome
-  ) {
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {
   --toggle-button-border: var(
     --ic-toggle-button-selected-border-disabled-monochrome
   );
@@ -562,7 +560,7 @@ video {
 
 :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),
+  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),
     var(--ic-border-focus);
 }
 
@@ -597,7 +595,8 @@ video {
 }
 
 :host(.ic-toggle-button-checked) ::part(button):focus {
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),
+  box-shadow: inset 0 0 0 var(--ic-space-xxxs)
+      var(--ic-toggle-button-selected-border-focus),
     var(--ic-border-focus);
 }
 
@@ -643,9 +642,7 @@ video {
 
 :host(.ic-toggle-button-monochrome.ic-toggle-button-checked)
   ::part(button):active,
-:host(
-    .ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked
-  )
+:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)
   ::part(button):active {
   background-color: var(
     --ic-toggle-button-selected-background-pressed-monochrome
@@ -675,13 +672,9 @@ video {
   background-repeat: no-repeat;
 }
 
-:host(
-    .ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome
-  )
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)
   ::part(button),
-:host(
-    .ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome
-  )
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)
   ::part(button)::before {
   background-image: radial-gradient(
     var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,
@@ -740,9 +733,7 @@ video {
   --inner-color: var(--ic-toggle-button-selected-loading-bar);
 }
 
-:host(
-    .ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome
-  )
+:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)
   ::part(button) {
   --loading-button-background: var(
     --ic-toggle-button-selected-background-pressed-monochrome