@genesislcap/foundation-ui 14.329.0 → 14.330.0

package/dist/custom-elements.json

@@ -1257,158 +1257,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/accordion/accordion.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionStyles",
-          "declaration": {
-            "name": "foundationAccordionStyles",
-            "module": "src/accordion/accordion.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<Accordion>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionTemplate",
-          "declaration": {
-            "name": "foundationAccordionTemplate",
-            "module": "src/accordion/accordion.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Accordion",
-          "superclass": {
-            "name": "FASTAccordion",
-            "package": "@microsoft/fast-foundation"
-          },
-          "tagName": "%%prefix%%-accordion",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordionShadowOptions",
-          "type": {
-            "text": "ShadowRootInit"
-          },
-          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "defaultAccordionConfig",
-          "type": {
-            "text": "object"
-          },
-          "default": "{}"
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordion",
-          "description": "The Foundation Accordion",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Accordion",
-          "declaration": {
-            "name": "Accordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordionShadowOptions",
-          "declaration": {
-            "name": "foundationAccordionShadowOptions",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultAccordionConfig",
-          "declaration": {
-            "name": "defaultAccordionConfig",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordion",
-          "declaration": {
-            "name": "foundationAccordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/index.ts",
+      "path": "src/_config/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1416,7 +1265,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./accordion.template"
+            "package": "./styles"
           }
         },
         {
@@ -1424,7 +1273,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./accordion.styles"
+            "package": "./tokens"
           }
         },
         {
@@ -1432,7 +1281,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./accordion"
+            "package": "./values"
           }
         }
       ]
@@ -1831,37 +1680,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/_config/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./tokens"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./values"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/actions-menu/actions-menu.styles.ts",
@@ -2941,6 +2759,188 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionStyles",
+          "declaration": {
+            "name": "foundationAccordionStyles",
+            "module": "src/accordion/accordion.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Accordion>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionTemplate",
+          "declaration": {
+            "name": "foundationAccordionTemplate",
+            "module": "src/accordion/accordion.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Accordion",
+          "superclass": {
+            "name": "FASTAccordion",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "%%prefix%%-accordion",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordionShadowOptions",
+          "type": {
+            "text": "ShadowRootInit"
+          },
+          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultAccordionConfig",
+          "type": {
+            "text": "object"
+          },
+          "default": "{}"
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordion",
+          "description": "The Foundation Accordion",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Accordion",
+          "declaration": {
+            "name": "Accordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordionShadowOptions",
+          "declaration": {
+            "name": "foundationAccordionShadowOptions",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultAccordionConfig",
+          "declaration": {
+            "name": "defaultAccordionConfig",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordion",
+          "declaration": {
+            "name": "foundationAccordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.template"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/anchored-region/anchor-region.template.ts",
@@ -45970,7 +45970,7 @@
           "type": {
             "text": "ElementStyles"
           },
-          "default": "css`\n  @keyframes append-animate {\n    from {\n      transform: translateX(100%);\n      opacity: 0%;\n    }\n\n    to {\n      transform: translateX(0%);\n      opacity: 100%;\n    }\n  }\n\n  @keyframes delete-animate {\n    from {\n      transform: translateX(0%);\n      opacity: 100%;\n    }\n\n    to {\n      transform: translateX(100%);\n      opacity: 0%;\n    }\n  }\n\n  :host {\n    --toast-min-width: 356px;\n    --toast-min-height: 128px;\n    --toast-max-width: 356px;\n    --toast-max-height: 272px;\n  }\n\n  .toast {\n    animation: append-animate 0.3s linear;\n    max-width: var(--toast-max-width);\n    min-width: var(--toast-min-width);\n    background-color: var(--fill-color);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    border-width: thin;\n    border-color: var(--neutral-fill-rest);\n    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    padding: 8px 8px 8px 15px;\n    margin: 5px;\n  }\n\n  .toast-delete {\n    animation: delete-animate 0.3s linear;\n    opacity: 0%;\n  }\n\n  .toast::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 5px;\n    height: calc(100% - 10px);\n    width: 4px;\n    border-radius: 2px;\n    background-color: red;\n  }\n\n  .content-wrapper {\n    height: fit-content;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: stretch;\n  }\n\n  .bottom {\n    width: 70%;\n  }\n\n  .top {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .content {\n    width: 85%;\n    font-size: 12px;\n    overflow-wrap: break-word;\n  }\n\n  ::slotted(*) {\n    white-space: pre-line;\n  }\n\n  .date {\n    color: var(--neutral-foreground-hint);\n    font-size: 12px;\n    margin: 0 0 5px;\n  }\n\n  .close-icon svg {\n    cursor: pointer;\n  }\n`"
+          "default": "css`\n  @keyframes append-animate {\n    from {\n      transform: translateX(100%);\n      opacity: 0%;\n    }\n\n    to {\n      transform: translateX(0%);\n      opacity: 100%;\n    }\n  }\n\n  @keyframes delete-animate {\n    from {\n      transform: translateX(0%);\n      opacity: 100%;\n    }\n\n    to {\n      transform: translateX(100%);\n      opacity: 0%;\n    }\n  }\n\n  :host {\n    --toast-min-width: 356px;\n    --toast-min-height: 128px;\n    --toast-max-width: 356px;\n    --toast-max-height: 272px;\n  }\n\n  .toast {\n    animation: append-animate 0.3s linear;\n    max-width: var(--toast-max-width);\n    min-width: var(--toast-min-width);\n    background-color: var(--fill-color);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    border-width: thin;\n    border-color: var(--neutral-fill-rest);\n    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    padding: 8px 8px 8px 15px;\n    margin: 5px;\n  }\n\n  .toast-delete {\n    animation: delete-animate 0.3s linear;\n    opacity: 0%;\n  }\n\n  .toast::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 5px;\n    height: calc(100% - 10px);\n    width: 4px;\n    border-radius: 2px;\n    background-color: red;\n  }\n\n  .content-wrapper {\n    height: fit-content;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: stretch;\n  }\n\n  .bottom {\n    width: 70%;\n  }\n\n  .top {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .content {\n    width: 85%;\n    font-size: 12px;\n    overflow-wrap: break-word;\n  }\n\n  ::slotted(*) {\n    white-space: pre-line;\n  }\n\n  .date {\n    color: var(--neutral-foreground-hint);\n    font-size: 12px;\n    margin: 0 0 5px;\n  }\n\n  .notification-icon {\n    margin-right: 6px;\n  }\n\n  .close-icon {\n    cursor: pointer;\n    margin-left: auto;\n    color: #879ba6;\n  }\n`"
         }
       ],
       "exports": [
@@ -45988,16 +45988,36 @@
       "kind": "javascript-module",
       "path": "src/toast/toast.template.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "getPrefixedToast",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Toast>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "prefix",
+              "default": "'zero'"
+            }
+          ]
+        },
         {
           "kind": "variable",
           "name": "foundationToastTemplate",
-          "type": {
-            "text": "ViewTemplate<Toast>"
-          },
-          "default": "html`\n  <div role=\"alert\" aria-live=\"polite\" class=\"toast ${(x) => x.deleteAnimation}\" ${ref('toast')}>\n    <div class=\"content-wrapper\">\n      <div part=\"top\" class=\"top\">\n        <slot name=\"top\"></slot>\n        <div class=\"close-icon\" @click=${(x) => x.close()}>${closeIcon()}</div>\n      </div>\n      <div part=\"content\" class=\"content\">\n        <slot name=\"content\"></slot>\n      </div>\n      <div part=\"date\" class=\"date\">\n        <slot name=\"date\"></slot>\n      </div>\n      <div part=\"bottom\" class=\"bottom\">\n        <slot name=\"bottom\"></slot>\n      </div>\n    </div>\n  </div>\n`"
+          "default": "html<Icon>`\n  ${(x) => getPrefixedToast(getPrefix(x))}\n`"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "getPrefixedToast",
+          "declaration": {
+            "name": "getPrefixedToast",
+            "module": "src/toast/toast.template.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "foundationToastTemplate",
@@ -46065,6 +46085,13 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "notificationIcon",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "kind": "method",
               "name": "close",
@@ -46199,6 +46226,13 @@
               },
               "default": "false",
               "fieldName": "autoClose"
+            },
+            {
+              "name": "notification-icon",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "notificationIcon"
             }
           ],
           "superclass": {

package/dist/dts/base-components.d.ts

@@ -311,12 +311,12 @@ export declare const baseComponents: {
     foundationToast: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
         baseName: string;
         styles: import("@microsoft/fast-element").ElementStyles;
-        template: import("@microsoft/fast-element").ViewTemplate<import("./toast").Toast, any>;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./icon").Icon, any>;
         shadowOptions: ShadowRootInit;
     }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
         baseName: string;
         styles: import("@microsoft/fast-element").ElementStyles;
-        template: import("@microsoft/fast-element").ViewTemplate<import("./toast").Toast, any>;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./icon").Icon, any>;
         shadowOptions: ShadowRootInit;
     }, typeof import("./toast").Toast>;
     foundationToolbar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./toolbar").Toolbar>;

package/dist/dts/toast/toast.d.ts

@@ -9,6 +9,7 @@ export declare class Toast extends FoundationElement {
     deleteAnimation: string;
     closeTimeout: number;
     autoClose: boolean;
+    notificationIcon: string;
     connectedCallback(): void;
     /**
      * Remove the toast from display.
@@ -25,12 +26,12 @@ export declare class Toast extends FoundationElement {
 export declare const foundationToast: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
     baseName: string;
     styles: import("@microsoft/fast-element").ElementStyles;
-    template: import("@microsoft/fast-element").ViewTemplate<Toast, any>;
+    template: import("@microsoft/fast-element").ViewTemplate<import("..").Icon, any>;
     shadowOptions: ShadowRootInit;
 }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
     baseName: string;
     styles: import("@microsoft/fast-element").ElementStyles;
-    template: import("@microsoft/fast-element").ViewTemplate<Toast, any>;
+    template: import("@microsoft/fast-element").ViewTemplate<import("..").Icon, any>;
     shadowOptions: ShadowRootInit;
 }, typeof Toast>;
 //# sourceMappingURL=toast.d.ts.map

package/dist/dts/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,eAAO,MAAM,4BAA4B,EAAE,cAG1C,CAAC;AAEF,eAAO,MAAM,kBAAkB,IAAK,CAAC;AAErC;;GAEG;AACH,qBAAa,KAAM,SAAQ,iBAAiB;IACnC,KAAK,EAAE,WAAW,CAAC;IACd,eAAe,SAAM;IAEK,YAAY,EAAE,MAAM,CAAS;IAChC,SAAS,EAAE,OAAO,CAAS;IAE9D,iBAAiB;IAajB;;OAEG;IACI,KAAK;CAGb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;gBAM1B,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,eAAO,MAAM,4BAA4B,EAAE,cAG1C,CAAC;AAEF,eAAO,MAAM,kBAAkB,IAAK,CAAC;AAErC;;GAEG;AACH,qBAAa,KAAM,SAAQ,iBAAiB;IACnC,KAAK,EAAE,WAAW,CAAC;IACd,eAAe,SAAM;IAEK,YAAY,EAAE,MAAM,CAAS;IAChC,SAAS,EAAE,OAAO,CAAS;IACpB,gBAAgB,EAAE,MAAM,CAAC;IAEnE,iBAAiB;IAajB;;OAEG;IACI,KAAK;CAGb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;gBAM1B,CAAC"}

package/dist/dts/toast/toast.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.styles.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,qBAAqB,EAAE,aAyGnC,CAAC"}
+{"version":3,"file":"toast.styles.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,qBAAqB,EAAE,aA+GnC,CAAC"}

package/dist/dts/toast/toast.template.d.ts

@@ -1,4 +1,6 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
+import { Icon } from '../icon';
 import type { Toast } from './toast';
-export declare const foundationToastTemplate: ViewTemplate<Toast>;
+export declare const getPrefixedToast: (prefix?: string) => ViewTemplate<Toast>;
+export declare const foundationToastTemplate: ViewTemplate<Icon, any>;
 //# sourceMappingURL=toast.template.d.ts.map

package/dist/dts/toast/toast.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.template.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,uBAAuB,EAAE,YAAY,CAAC,KAAK,CAkBvD,CAAC"}
+{"version":3,"file":"toast.template.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKrC,eAAO,MAAM,gBAAgB,GAAI,eAAe,KAAG,YAAY,CAAC,KAAK,CAwBpE,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAEnC,CAAC"}

package/dist/esm/toast/toast.js

@@ -47,6 +47,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'auto-close' })
 ], Toast.prototype, "autoClose", void 0);
+__decorate([
+    attr({ attribute: 'notification-icon' })
+], Toast.prototype, "notificationIcon", void 0);
 /**
  * The Foundation Toast
  *

package/dist/esm/toast/toast.styles.js

@@ -101,7 +101,13 @@ export const foundationToastStyles = css `
     margin: 0 0 5px;
   }
 
-  .close-icon svg {
+  .notification-icon {
+    margin-right: 6px;
+  }
+
+  .close-icon {
     cursor: pointer;
+    margin-left: auto;
+    color: #879ba6;
   }
 `;

package/dist/esm/toast/toast.template.js

@@ -1,11 +1,15 @@
-import { html, ref } from '@microsoft/fast-element';
-import { closeIcon } from '../_common/icons';
-export const foundationToastTemplate = html `
+import { html, ref, when } from '@microsoft/fast-element';
+import { getPrefix } from '../utils';
+const closeIcon = (prefix = 'zero') => html `<${prefix}-icon class="close-icon" size="lg" name="xmark"></prefix-icon>`;
+export const getPrefixedToast = (prefix = 'zero') => html `
   <div role="alert" aria-live="polite" class="toast ${(x) => x.deleteAnimation}" ${ref('toast')}>
     <div class="content-wrapper">
       <div part="top" class="top">
+        ${when((x) => x.notificationIcon, html `
+            <${prefix}-icon class="notification-icon" name="${(x) => x.notificationIcon}" size="lg"></prefix-icon>
+        `)}
         <slot name="top"></slot>
-        <div class="close-icon" @click=${(x) => x.close()}>${closeIcon()}</div>
+        <div class="close-icon" @click=${(x) => x.close()}>${closeIcon(prefix)}</div>
       </div>
       <div part="content" class="content">
         <slot name="content"></slot>
@@ -19,3 +23,6 @@ export const foundationToastTemplate = html `
     </div>
   </div>
 `;
+export const foundationToastTemplate = html `
+  ${(x) => getPrefixedToast(getPrefix(x))}
+`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.329.0",
+  "version": "14.330.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.329.0",
-    "@genesislcap/genx": "14.329.0",
-    "@genesislcap/rollup-builder": "14.329.0",
-    "@genesislcap/ts-builder": "14.329.0",
-    "@genesislcap/uvu-playwright-builder": "14.329.0",
-    "@genesislcap/vite-builder": "14.329.0",
-    "@genesislcap/webpack-builder": "14.329.0",
+    "@genesislcap/foundation-testing": "14.330.0",
+    "@genesislcap/genx": "14.330.0",
+    "@genesislcap/rollup-builder": "14.330.0",
+    "@genesislcap/ts-builder": "14.330.0",
+    "@genesislcap/uvu-playwright-builder": "14.330.0",
+    "@genesislcap/vite-builder": "14.330.0",
+    "@genesislcap/webpack-builder": "14.330.0",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -98,15 +98,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.329.0",
-    "@genesislcap/foundation-comms": "14.329.0",
-    "@genesislcap/foundation-criteria": "14.329.0",
-    "@genesislcap/foundation-errors": "14.329.0",
-    "@genesislcap/foundation-events": "14.329.0",
-    "@genesislcap/foundation-logger": "14.329.0",
-    "@genesislcap/foundation-notifications": "14.329.0",
-    "@genesislcap/foundation-user": "14.329.0",
-    "@genesislcap/foundation-utils": "14.329.0",
+    "@genesislcap/expression-builder": "14.330.0",
+    "@genesislcap/foundation-comms": "14.330.0",
+    "@genesislcap/foundation-criteria": "14.330.0",
+    "@genesislcap/foundation-errors": "14.330.0",
+    "@genesislcap/foundation-events": "14.330.0",
+    "@genesislcap/foundation-logger": "14.330.0",
+    "@genesislcap/foundation-notifications": "14.330.0",
+    "@genesislcap/foundation-user": "14.330.0",
+    "@genesislcap/foundation-utils": "14.330.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -128,5 +128,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "b3e477f5cd4531384935f255ac3ab9aab22ed77c"
+  "gitHead": "f6f09dc864888890f952e2208aa606e01eea5bce"
 }