@ulu/frontend-vue 0.6.13 → 0.6.15

package/dist/mcp-data.json

@@ -20,6 +20,62 @@
       }
     ],
     "useDocumentTitle": [],
+    "toast": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<toast>Content</toast>"
+      }
+    ],
+    "useTooltipFollow": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<useTooltipFollow>Content</useTooltipFollow>"
+      }
+    ],
+    "useTooltip": [],
+    "tooltip": [
+      {
+        "title": "Basic",
+        "description": "Basic variation",
+        "code": "<tooltip>This is a basic tooltip!</tooltip>"
+      }
+    ],
+    "UluPopover": [],
+    "useModals": [],
+    "modals": [
+      {
+        "title": "GlobalApiTest",
+        "description": "GlobalApiTest variation",
+        "code": "<modals>Content</modals>"
+      },
+      {
+        "title": "modals Example 1",
+        "description": "Code example extracted from markdown.",
+        "code": "<template>\n  <UluModal>\n    User setting modal…\n  </UluModal>\n</template>"
+      },
+      {
+        "title": "modals Example 2",
+        "description": "Code example extracted from markdown.",
+        "code": "import { defineAsyncComponent } from \"vue\";\n\nexport default [\n  {\n    name: \"settings\",\n    component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n  }\n]"
+      },
+      {
+        "title": "modals Example 3",
+        "description": "Code example extracted from markdown.",
+        "code": "import UluModals from \"@ulu/frontend-vue/plugins/modals/index.js\";\nimport modals from \"./src/modals.js\";\n\n//...\n\napp.use(UluModals, { modals });"
+      },
+      {
+        "title": "modals Example 4",
+        "description": "Code example extracted from markdown.",
+        "code": "// Open a app-wide modal\nthis.$uluModals.open({ exampleProp: value });\n\n// Close app-wide modal \nthis.$uluModals.close();\n\n// Add modals after post-install\nthis.$uluModals.add({\n  name: \"settings\",\n  component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n});\n\n// Remove a modal from the registry\nthis.$uluModals.remove(\"settings\");\n\n// Get Modal from registry (not usually needed)\nconst settingsModal = this.$uluModals.get(\"settings\");\n// console.log(settingsModal.name) ==> \"settings\""
+      },
+      {
+        "title": "modals Example 5",
+        "description": "Code example extracted from markdown.",
+        "code": "<template>\n  <button @click=\"showSettingsModal\">My Settings</button>\n</template>\n\n<script setup>\n  import { useModals } from \"./useModals\";\n\n  const modals = useModals();\n  const showSettingsModal = () => {\n    console.log(\"This is opening via uluModals composable\");\n    modals.open(\"settings\");\n  };\n</script>"
+      }
+    ],
     "UluProgressCircle": [],
     "UluProgressBar": [],
     "UluAnimateNumber": [],
@@ -63,10 +119,98 @@
         "code": "<UluAction href=\"{...}\" download>Content</UluAction>"
       }
     ],
+    "UluSkipLink": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluSkipLink>Content</UluSkipLink>"
+      }
+    ],
+    "UluPager": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluPager :current=\"5\" ellipses=\"{...}\">Content</UluPager>"
+      },
+      {
+        "title": "FirstPage",
+        "description": "FirstPage variation",
+        "code": "<UluPager :current=\"1\" items=\"{...}\" ellipses=\"{...}\">Content</UluPager>"
+      },
+      {
+        "title": "LastPage",
+        "description": "LastPage variation",
+        "code": "<UluPager :current=\"10\" items=\"{...}\" ellipses=\"{...}\">Content</UluPager>"
+      }
+    ],
+    "UluNavStrip": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluNavStrip items=\"{...}\">Content</UluNavStrip>"
+      }
+    ],
+    "UluMenuStack": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluMenuStack items=\"{...}\">Content</UluMenuStack>"
+      }
+    ],
+    "UluMenu": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluMenu classes=\"{...}\" items=\"{...}\">Content</UluMenu>"
+      },
+      {
+        "title": "Slots",
+        "description": "Slots variation",
+        "code": "<UluMenu items=\"{...}\">Content</UluMenu>"
+      }
+    ],
+    "UluBreadcrumb": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
+      },
+      {
+        "title": "CustomSeparator",
+        "description": "CustomSeparator variation",
+        "code": "<UluBreadcrumb separatorIcon=\"fas fa-arrow-right\">Content</UluBreadcrumb>"
+      },
+      {
+        "title": "CustomSeparatorSlot",
+        "description": "CustomSeparatorSlot variation",
+        "code": "<UluBreadcrumb>Content</UluBreadcrumb>"
+      },
+      {
+        "title": "PerItemClasses",
+        "description": "PerItemClasses variation",
+        "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
+      }
+    ],
     "UluWhenBreakpoint": [],
     "UluTitleRail": [],
     "UluDataGrid": [],
     "UluAdaptiveLayout": [],
+    "UluSelectableMenu": [],
+    "UluSearchForm": [],
+    "UluFormTextarea": [],
+    "UluFormText": [],
+    "UluFormSelect": [],
+    "UluFormRequiredChar": [],
+    "UluFormRadio": [],
+    "UluFormLabel": [],
+    "UluFormItemsInline": [],
+    "UluFormItem": [],
+    "UluFormFile": [],
+    "UluFormFieldset": [],
+    "UluFormCheckbox": [],
+    "UluFormActions": [],
+    "UluForm": [],
+    "UluFileDisplay": [],
     "UluTabGroup": [
       {
         "title": "Default",
@@ -95,22 +239,6 @@
     "UluCollapsible": [],
     "UluAccordionGroup": [],
     "UluAccordion": [],
-    "UluSelectableMenu": [],
-    "UluSearchForm": [],
-    "UluFormTextarea": [],
-    "UluFormText": [],
-    "UluFormSelect": [],
-    "UluFormRequiredChar": [],
-    "UluFormRadio": [],
-    "UluFormLabel": [],
-    "UluFormItemsInline": [],
-    "UluFormItem": [],
-    "UluFormFile": [],
-    "UluFormFieldset": [],
-    "UluFormCheckbox": [],
-    "UluFormActions": [],
-    "UluForm": [],
-    "UluFileDisplay": [],
     "UluTag": [],
     "UluTable": [
       {
@@ -334,132 +462,11 @@
       }
     ],
     "UluAlert": [],
-    "UluSkipLink": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluSkipLink>Content</UluSkipLink>"
-      }
-    ],
-    "UluPager": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluPager :current=\"5\" ellipses=\"{...}\">Content</UluPager>"
-      },
-      {
-        "title": "FirstPage",
-        "description": "FirstPage variation",
-        "code": "<UluPager :current=\"1\" items=\"{...}\" ellipses=\"{...}\">Content</UluPager>"
-      },
-      {
-        "title": "LastPage",
-        "description": "LastPage variation",
-        "code": "<UluPager :current=\"10\" items=\"{...}\" ellipses=\"{...}\">Content</UluPager>"
-      }
-    ],
-    "UluNavStrip": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluNavStrip items=\"{...}\">Content</UluNavStrip>"
-      }
-    ],
-    "UluMenuStack": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluMenuStack items=\"{...}\">Content</UluMenuStack>"
-      }
-    ],
-    "UluMenu": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluMenu classes=\"{...}\" items=\"{...}\">Content</UluMenu>"
-      },
-      {
-        "title": "Slots",
-        "description": "Slots variation",
-        "code": "<UluMenu items=\"{...}\">Content</UluMenu>"
-      }
-    ],
-    "UluBreadcrumb": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
-      },
-      {
-        "title": "CustomSeparator",
-        "description": "CustomSeparator variation",
-        "code": "<UluBreadcrumb separatorIcon=\"fas fa-arrow-right\">Content</UluBreadcrumb>"
-      },
-      {
-        "title": "CustomSeparatorSlot",
-        "description": "CustomSeparatorSlot variation",
-        "code": "<UluBreadcrumb>Content</UluBreadcrumb>"
-      },
-      {
-        "title": "PerItemClasses",
-        "description": "PerItemClasses variation",
-        "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
-      }
-    ],
-    "toast": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<toast>Content</toast>"
-      }
-    ],
-    "useTooltipFollow": [
+    "UluTableSticky": [
       {
         "title": "Default",
         "description": "Default variation",
-        "code": "<useTooltipFollow>Content</useTooltipFollow>"
-      }
-    ],
-    "useTooltip": [],
-    "tooltip": [
-      {
-        "title": "Basic",
-        "description": "Basic variation",
-        "code": "<tooltip>This is a basic tooltip!</tooltip>"
-      }
-    ],
-    "UluPopover": [],
-    "useModals": [],
-    "modals": [
-      {
-        "title": "GlobalApiTest",
-        "description": "GlobalApiTest variation",
-        "code": "<modals>Content</modals>"
-      },
-      {
-        "title": "modals Example 1",
-        "description": "Code example extracted from markdown.",
-        "code": "<template>\n  <UluModal>\n    User setting modal…\n  </UluModal>\n</template>"
-      },
-      {
-        "title": "modals Example 2",
-        "description": "Code example extracted from markdown.",
-        "code": "import { defineAsyncComponent } from \"vue\";\n\nexport default [\n  {\n    name: \"settings\",\n    component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n  }\n]"
-      },
-      {
-        "title": "modals Example 3",
-        "description": "Code example extracted from markdown.",
-        "code": "import UluModals from \"@ulu/frontend-vue/plugins/modals/index.js\";\nimport modals from \"./src/modals.js\";\n\n//...\n\napp.use(UluModals, { modals });"
-      },
-      {
-        "title": "modals Example 4",
-        "description": "Code example extracted from markdown.",
-        "code": "// Open a app-wide modal\nthis.$uluModals.open({ exampleProp: value });\n\n// Close app-wide modal \nthis.$uluModals.close();\n\n// Add modals after post-install\nthis.$uluModals.add({\n  name: \"settings\",\n  component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n});\n\n// Remove a modal from the registry\nthis.$uluModals.remove(\"settings\");\n\n// Get Modal from registry (not usually needed)\nconst settingsModal = this.$uluModals.get(\"settings\");\n// console.log(settingsModal.name) ==> \"settings\""
-      },
-      {
-        "title": "modals Example 5",
-        "description": "Code example extracted from markdown.",
-        "code": "<template>\n  <button @click=\"showSettingsModal\">My Settings</button>\n</template>\n\n<script setup>\n  import { useModals } from \"./useModals\";\n\n  const modals = useModals();\n  const showSettingsModal = () => {\n    console.log(\"This is opening via uluModals composable\");\n    modals.open(\"settings\");\n  };\n</script>"
+        "code": "<UluTableSticky columns=\"{...}\" rows=\"{...}\" caption=\"Example Sticky Table\" scrollControls>Content</UluTableSticky>"
       }
     ],
     "UluSkeletonText": [],
@@ -473,13 +480,6 @@
         "code": "<CardExample horizontal>Content</CardExample>"
       }
     ],
-    "UluTableSticky": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluTableSticky columns=\"{...}\" rows=\"{...}\" caption=\"Example Sticky Table\" scrollControls>Content</UluTableSticky>"
-      }
-    ],
     "UluScrollAnchorsNavAnimated": [],
     "UluScrollAnchorsNav": [],
     "UluScrollAnchorsHeadlessSection": [],
@@ -620,7 +620,6 @@
         "code": "<script setup>\n  import { ref, computed, provide } from \"vue\";\n  import { useBreakpointManager } from \"./useBreakpointManager.js\";\n\n  const isMobile = ref(false);\n\n  // Example using the onReady callback to set reactive value isMobile\n  // - In this situation isMobile is being used as a primary change in  \n  //   the applications layout \n  const options = { \n    onReady(manager) {\n      manager.at(\"small\").max(() => isMobile.value = true);\n      manager.at(\"large\").min(() => isMobile.value = false);\n    }\n  };\n\n  // Composable returns the following\n  const { \n    /**\n     * Reference to underlying BreakpointManager class\n    */\n    breakpointManager, \n    /**\n     * Active breakpoint name\n    */\n    breakpointActive, \n    /**\n     * Current resizeDirection (\"up\"|\"down\"|null)\n    */\n    breakpointDirection \n  } = useBreakpointManager(options);\n\n\n  // Allowing all components to access these values\n  provide(\"uluBreakpointActive\", computed(() => breakpointActive));\n  provide(\"uluBreakpointDirection\", computed(() => breakpointDirection));\n  provide(\"uluBreakpointManager\", computed(() => breakpointManager));\n  provide(\"uluIsMobile\", computed(() => isMobile));\n\n</script>"
       }
     ],
-    "forms": [],
     "core": [
       {
         "title": "core Example 1",
@@ -645,6 +644,7 @@
         "code": "<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>"
       }
     ],
+    "forms": [],
     "useScrollAnchors": [
       {
         "title": "useScrollAnchors Example 1",
@@ -4192,6 +4192,64 @@
         }
       ]
     },
+    "UluSkeletonText": {
+      "description": "Vue Component Props, Emits, and Slots for UluSkeletonText",
+      "properties": [
+        {
+          "name": "inline",
+          "type": "boolean",
+          "description": "Inline modifier"
+        },
+        {
+          "name": "alt",
+          "type": "boolean",
+          "description": "Use alternate background color"
+        },
+        {
+          "name": "width",
+          "type": "string",
+          "description": "Optional size (width) - should correspond with width setup in scss component"
+        }
+      ],
+      "events": [],
+      "slots": []
+    },
+    "UluSkeletonMedia": {
+      "description": "Vue Component Props, Emits, and Slots for UluSkeletonMedia",
+      "properties": [],
+      "events": [],
+      "slots": []
+    },
+    "UluSkeletonContent": {
+      "description": "Vue Component Props, Emits, and Slots for UluSkeletonContent",
+      "properties": [
+        {
+          "name": "lines",
+          "type": "number",
+          "default": "6",
+          "description": "Amount of lines to generate"
+        }
+      ],
+      "events": [],
+      "slots": []
+    },
+    "UluShowSkeleton": {
+      "description": "Vue Component Props, Emits, and Slots for UluShowSkeleton",
+      "properties": [
+        {
+          "name": "when",
+          "type": "boolean",
+          "description": "If true will show whatever is passed to slot, else skeleton text"
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": ""
+        }
+      ]
+    },
     "UluScrollAnchorsSection": {
       "description": "Vue Component Props, Emits, and Slots for UluScrollAnchorsSection",
       "properties": [
@@ -4404,64 +4462,6 @@
         }
       ]
     },
-    "UluSkeletonText": {
-      "description": "Vue Component Props, Emits, and Slots for UluSkeletonText",
-      "properties": [
-        {
-          "name": "inline",
-          "type": "boolean",
-          "description": "Inline modifier"
-        },
-        {
-          "name": "alt",
-          "type": "boolean",
-          "description": "Use alternate background color"
-        },
-        {
-          "name": "width",
-          "type": "string",
-          "description": "Optional size (width) - should correspond with width setup in scss component"
-        }
-      ],
-      "events": [],
-      "slots": []
-    },
-    "UluSkeletonMedia": {
-      "description": "Vue Component Props, Emits, and Slots for UluSkeletonMedia",
-      "properties": [],
-      "events": [],
-      "slots": []
-    },
-    "UluSkeletonContent": {
-      "description": "Vue Component Props, Emits, and Slots for UluSkeletonContent",
-      "properties": [
-        {
-          "name": "lines",
-          "type": "number",
-          "default": "6",
-          "description": "Amount of lines to generate"
-        }
-      ],
-      "events": [],
-      "slots": []
-    },
-    "UluShowSkeleton": {
-      "description": "Vue Component Props, Emits, and Slots for UluShowSkeleton",
-      "properties": [
-        {
-          "name": "when",
-          "type": "boolean",
-          "description": "If true will show whatever is passed to slot, else skeleton text"
-        }
-      ],
-      "events": [],
-      "slots": [
-        {
-          "name": "default",
-          "description": ""
-        }
-      ]
-    },
     "UluFacetsSort": {
       "description": "Vue Component Props, Emits, and Slots for UluFacetsSort",
       "properties": [
@@ -10960,64 +10960,158 @@
             }
           },
           {
-            "name": "scrollControlAmount",
-            "description": "Amount to scroll when user uses scroll controls (pixels)",
+            "name": "scrollControlAmount",
+            "description": "Amount to scroll when user uses scroll controls (pixels)",
+            "type": {
+              "name": "number"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "100"
+            }
+          }
+        ],
+        "events": [
+          {
+            "name": "column-sort"
+          }
+        ],
+        "slots": [
+          {
+            "name": "name",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "name",
+                "title": "binding"
+              }
+            ]
+          },
+          {
+            "name": "controls",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "scrollLeft",
+                "title": "binding"
+              },
+              {
+                "name": "scrollRight",
+                "title": "binding"
+              },
+              {
+                "name": "canScrollLeft",
+                "title": "binding"
+              },
+              {
+                "name": "canScrollRight",
+                "title": "binding"
+              }
+            ]
+          },
+          {
+            "name": "controlLeft"
+          },
+          {
+            "name": "controlRight"
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/systems/table-sticky/UluTableSticky.vue"
+        ]
+      }
+    },
+    "UluSkeletonText": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluSkeletonText",
+        "description": "",
+        "tags": {},
+        "props": [
+          {
+            "name": "inline",
+            "description": "Inline modifier",
+            "type": {
+              "name": "boolean"
+            }
+          },
+          {
+            "name": "alt",
+            "description": "Use alternate background color",
+            "type": {
+              "name": "boolean"
+            }
+          },
+          {
+            "name": "width",
+            "description": "Optional size (width) - should correspond with width setup in scss component",
+            "type": {
+              "name": "string"
+            }
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/systems/skeleton/UluSkeletonText.vue"
+        ]
+      }
+    },
+    "UluSkeletonMedia": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluSkeletonMedia",
+        "description": "",
+        "tags": {},
+        "sourceFiles": [
+          "lib/components/systems/skeleton/UluSkeletonMedia.vue"
+        ]
+      }
+    },
+    "UluSkeletonContent": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluSkeletonContent",
+        "description": "",
+        "tags": {},
+        "props": [
+          {
+            "name": "lines",
+            "description": "Amount of lines to generate",
             "type": {
               "name": "number"
             },
             "defaultValue": {
               "func": false,
-              "value": "100"
+              "value": "6"
             }
           }
         ],
-        "events": [
+        "sourceFiles": [
+          "lib/components/systems/skeleton/UluSkeletonContent.vue"
+        ]
+      }
+    },
+    "UluShowSkeleton": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluShowSkeleton",
+        "description": "",
+        "tags": {},
+        "props": [
           {
-            "name": "column-sort"
+            "name": "when",
+            "description": "If true will show whatever is passed to slot, else skeleton text",
+            "type": {
+              "name": "boolean"
+            }
           }
         ],
         "slots": [
           {
-            "name": "name",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "name",
-                "title": "binding"
-              }
-            ]
-          },
-          {
-            "name": "controls",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "scrollLeft",
-                "title": "binding"
-              },
-              {
-                "name": "scrollRight",
-                "title": "binding"
-              },
-              {
-                "name": "canScrollLeft",
-                "title": "binding"
-              },
-              {
-                "name": "canScrollRight",
-                "title": "binding"
-              }
-            ]
-          },
-          {
-            "name": "controlLeft"
-          },
-          {
-            "name": "controlRight"
+            "name": "default"
           }
         ],
         "sourceFiles": [
-          "lib/components/systems/table-sticky/UluTableSticky.vue"
+          "lib/components/systems/skeleton/UluShowSkeleton.vue"
         ]
       }
     },
@@ -11481,100 +11575,6 @@
         ]
       }
     },
-    "UluSkeletonText": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluSkeletonText",
-        "description": "",
-        "tags": {},
-        "props": [
-          {
-            "name": "inline",
-            "description": "Inline modifier",
-            "type": {
-              "name": "boolean"
-            }
-          },
-          {
-            "name": "alt",
-            "description": "Use alternate background color",
-            "type": {
-              "name": "boolean"
-            }
-          },
-          {
-            "name": "width",
-            "description": "Optional size (width) - should correspond with width setup in scss component",
-            "type": {
-              "name": "string"
-            }
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/systems/skeleton/UluSkeletonText.vue"
-        ]
-      }
-    },
-    "UluSkeletonMedia": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluSkeletonMedia",
-        "description": "",
-        "tags": {},
-        "sourceFiles": [
-          "lib/components/systems/skeleton/UluSkeletonMedia.vue"
-        ]
-      }
-    },
-    "UluSkeletonContent": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluSkeletonContent",
-        "description": "",
-        "tags": {},
-        "props": [
-          {
-            "name": "lines",
-            "description": "Amount of lines to generate",
-            "type": {
-              "name": "number"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "6"
-            }
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/systems/skeleton/UluSkeletonContent.vue"
-        ]
-      }
-    },
-    "UluShowSkeleton": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluShowSkeleton",
-        "description": "",
-        "tags": {},
-        "props": [
-          {
-            "name": "when",
-            "description": "If true will show whatever is passed to slot, else skeleton text",
-            "type": {
-              "name": "boolean"
-            }
-          }
-        ],
-        "slots": [
-          {
-            "name": "default"
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/systems/skeleton/UluShowSkeleton.vue"
-        ]
-      }
-    },
     "UluFacetsSort": {
       "raw_ast_dump": {
         "exportName": "default",
@@ -12239,7 +12239,7 @@
       "raw_markdown": "\nimport { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';\nimport { version } from '../package.json';\nimport * as ButtonStories from './components/elements/UluButton.stories.js';\nimport * as CardStories from './components/elements/UluCard.stories.js';\n\n<Meta title=\"Overview/Introduction\" />\n\n# Ulu Frontend Vue\n\nWelcome to the living style guide for the Ulu Vue component library. This library provides a comprehensive set of accessible, reusable, and composable Vue 3 components, composables, and plugins to build modern web applications.\n\nThis documentation provides interactive examples and detailed API documentation for each part of the library.\n\n---\n\n## Core Concepts\n\nThe Ulu ecosystem is built on two main packages:\n\n- **`@ulu/frontend`**: The framework-agnostic core. It contains the foundational SCSS for styling, vanilla JavaScript utilities, and base components. It knows nothing about Vue. \n- **`@ulu/frontend-vue`** (This Library): The Vue 3 implementation. It provides wrapper components, composables, and plugins that build upon and integrate seamlessly with the `@ulu/frontend` core.\n\nThis separation allows for a consistent design system that can be applied to any web technology, while providing a rich, idiomatic experience for Vue developers.\n\n**Note:** For `@ulu/frontend` (components) that you are using from this Vue library. You need to output the component stylesheets like you would normally (create global stylesheet). The components in this library do not at the frontend scss modules. While they could be included in each component this would make it so that you can't build your own implementations (local app component / etc) with the class structures since the styles would only be available if that component is used. \n\nExample global stylesheet outputting all \"included\" components and base styles. Note you can configure whats output with ulu.component-set-includes for example. Note there are many ways to assemble the stylesheet (manual per component mixins, etc), this example shows the convenience modules which output each modules stylesheet based on includes/excludes.\n\n```sass\n@use \"config\"; // Your config changes for example\n@use \"@ulu/frontend/scss/stylesheets/base-styles.scss\"; // Outputs base styles that are included\n@use \"@ulu/frontend/scss/stylesheets/component-styles.scss\"; // Outputs component styles that are included\n@use \"@ulu/frontend/scss/stylesheets/helper-styles.scss\"; // Outputs helper styles that are included\n```\n\n*Please see `@ulu/frontend` library for full documentation of configuring and outputting stylesheet*\n\n---\n\n## Installation\n\nTo get started, add the library to your project.\n\n```bash\nnpm install @ulu/frontend-vue\n```\n\nNext, you must register the required plugins in your main application entry point (`main.js`). The `corePlugin` is essential, and other plugins like `breakpointsPlugin`, `popoverPlugin` are optional. Some components require plugins. If a required plugin is missing, an error is thrown.\n\n**`src/main.js`**\n```javascript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { \n  corePlugin, \n  breakpointsPlugin, \n  toastPlugin, \n  modalsPlugin, \n  popoversPlugin \n} from '@ulu/frontend-vue';\nimport router from './router'; // Your vue-router instance\n\n// Import the main SCSS entry point\nimport '@ulu/frontend-vue/lib/_index.scss';\n\nconst app = createApp(App);\n\napp.use(router);\n\n// Register Ulu plugins\napp.use(corePlugin, {\n  // Optional: override default icons\n  iconsByType: {\n    danger: 'fas fa-exclamation-triangle',\n    close: 'fas fa-times'\n  }\n});\napp.use(breakpointsPlugin);\napp.use(toastPlugin);\napp.use(modalsPlugin, { \n  modals: [\n    /* your global modals */\n  ] \n});\napp.use(popoversPlugin);\n\n\napp.mount('#app');\n```\n\nFinally, you need to add the display components for plugins like `toast` and `modals` to your root `App.vue` file.\n\n**`src/App.vue`**\n```html\n<template>\n  <!-- Your App Layout -->\n  <router-view />\n\n  <!-- Ulu Plugin Display Components -->\n  <UluToastDisplay />\n  <UluModalsDisplay />\n  <UluTooltipDisplay />\n</template>\n```\n\n---\n\n## What's Inside?\n\nThe library is organized into several key areas:\n\n### Components\n\nThese are the reusable building blocks of your UI. They are organized by function into categories like `elements`, `collapsible`, `forms`, `layout`, `navigation`, and `systems`.\n\n**Simple Component Example: `UluButton`**\n\n<Canvas of={ButtonStories.Primary} />\n\n**Complex Component Example: `UluCard`**\n\n<Canvas of={CardStories.Default} />\n\n### Composables\n\nReusable, stateful logic that can be shared across components.\n\n- `useFacets`: A powerful composable for client-side filtering, searching, and sorting of data.\n- `usePagination`: Handles all the logic for paginating a list of items, including integration with Vue Router.\n- `useBreakpointManager`: A reactive interface to CSS breakpoints.\n- `useModifiers`: A utility for creating BEM-style modifier classes.\n- `useWindowResize`: A debounced window resize event listener.\n- `useRequiredInject`: A utility to ensure required dependencies are injected from plugins.\n\n### Plugins\n\nPlugins provide global functionality and APIs that can be accessed from anywhere in your application.\n\n- **`corePlugin` (Required)**: Manages global settings, primarily for the icon system.\n- **`breakpointsPlugin`**: Provides reactive information about the current CSS breakpoint (`uluIsMobile`, `uluBreakpointActive`).\n- **`modalsPlugin`**: A system for registering and triggering global modals (e.g., for settings or confirmation dialogs).\n- **`toastPlugin`**: A global API (`$uluToast`) for showing toast notifications.\n- **`popoversPlugin`**: Enables a simple `v-ulu-tooltip` directive for tooltips and provides the `UluPopover` component.\n\n**Example: Triggering a Toast Notification**\n```javascript\nimport { useToast } from '@ulu/frontend-vue';\n\nconst toast = useToast();\n\ntoast.add({\n  title: 'Success!',\n  description: 'Your profile has been updated.',\n  class: 'is-success'\n});\n```\n\n### Component Systems\n\nSystems are complex, multi-component features that solve a specific problem.\n\n- **Facets**: A complete system for faceted search, built around the `useFacets` composable. Includes components for search, sort, filters, and results display.\n- **Scroll Anchors**: A system for creating navigations that track the user's scroll position within a page.\n- **Skeleton**: A set of components for creating beautiful and effective loading states.\n- **Table Sticky**: A powerful table component with sticky headers and columns.\n- **Slider**: A flexible slideshow/carousel component.\n\n### Resolver\n\nResolver for [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components/tree/main]) is available to use like:\n\n```js\n// vite.config.js\n\nimport { defineConfig } from \"vite\";\nimport Components from \"unplugin-vue-components/vite\";\nimport { UluUnpluginResolver } from \"@ulu/frontend-vue/resolver\";\n\nexport default defineConfig({\n  plugins: [\n    // ...\n    Components({ \n      resolvers: [\n        UluUnpluginResolver()\n      ]\n    }),\n    // ...\n  ],\n  // ...\n});\n```\n\n### Vite Asset URLs\n\nWhen using components like `UluImage` and `UluImageSource`, you may want to pass relative asset paths directly as props (e.g. `<UluImage src=\"./assets/img.png\" />`) instead of manually importing them in your setup script. \n\nTo enable Vite to automatically resolve these paths, you can add our custom transform rules to the Vue plugin in your `vite.config.js`:\n\n*Note: this includes the defaults (img, source, video, ...) in addition to the Ulu specific components, since configuring this clears the defaults (it's not merged).*\n\n```js\n// vite.config.js\n\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport { uluTransformAssetUrls } from \"@ulu/frontend-vue/vite.js\";\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: {\n        transformAssetUrls: {\n          // \n          ...uluTransformAssetUrls\n        }\n      }\n    }),\n    // ...\n  ],\n  // ...\n});\n```"
     },
     "ExportsMap": {
-      "raw_markdown": "\nimport { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Overview/API Reference\" />\n\n# API Reference\n\nThis page provides a comprehensive map of all named exports from the `@ulu/frontend-vue` library. Use this as a quick reference to discover available components, composables, plugins, and utilities.\n\n## Components\n\nThese are the building blocks for your UI. They are imported as named exports.\n\n*   `UluAccordion`\n*   `UluAccordionGroup`\n*   `UluAction`\n*   `UluAdaptiveLayout`\n*   `UluAlert`\n*   `UluAnimateNumber`\n*   `UluBadge`\n*   `UluBadgeStack`\n*   `UluBreadcrumb`\n*   `UluButton`\n*   `UluButtonVerbose`\n*   `UluCallout`\n*   `UluCard`\n*   `UluCollapsible`\n*   `UluConditionalText`\n*   `UluConditionalWrapper`\n*   `UluDataGrid`\n*   `UluDataTable`\n*   `UluDefinitionList`\n*   `UluDefinitionListItem`\n*   `UluDropdown`\n*   `UluEmpty`\n*   `UluEmptyView`\n*   `UluExternalLink`\n*   `UluFacetsActiveFilters`\n*   `UluFacetsFilterAccordions`\n*   `UluFacetsFilterLists`\n*   `UluFacetsFilterPopovers`\n*   `UluFacetsFilterSelects`\n*   `UluFacetsHeaderLayout`\n*   `UluFacetsList`\n*   `UluFacetsResults`\n*   `UluFacetsSearch`\n*   `UluFacetsSidebarLayout`\n*   `UluFacetsSort`\n*   `UluFileDisplay`\n*   `UluForm`\n*   `UluFormActions`\n*   `UluFormCheckbox`\n*   `UluFormFieldset`\n*   `UluFormFile`\n*   `UluFormItem`\n*   `UluFormItemsInline`\n*   `UluFormLabel`\n*   `UluFormMessage`\n*   `UluFormRadio`\n*   `UluFormRequiredChar`\n*   `UluFormSelect`\n*   `UluFormText`\n*   `UluFormTextarea`\n*   `UluIcon`\n*   `UluImage`\n*   `UluImageSource`\n*   In Progress - `UluImageSlider`\n*   `UluList`\n*   `UluListItem`\n*   `UluCounterList`\n*   `UluMain`\n*   `UluMenu`\n*   `UluMenuStack`\n*   `UluModal`\n*   `UluNavStrip`\n*   `UluOverflowPopover`\n*   `UluPager`\n*   `UluPlaceholderImage`\n*   `UluPlaceholderText`\n*   `UluProgressBar`\n*   `UluProgressCircle`\n*   `UluRouteAnnouncer`\n*   `UluRule`\n*   `UluSanityRichText`\n*   `UluScrollAnchors`\n*   `UluScrollAnchorsHeadlessSection`\n*   `UluScrollAnchorsNav`\n*   `UluScrollAnchorsNavAnimated`\n*   `UluScrollAnchorsSection`\n*   `UluScrollSlider`\n*   `UluSearchForm`\n*   `UluSelectableMenu`\n*   `UluShowSkeleton`\n*   `UluSkeletonContent`\n*   `UluSkeletonMedia`\n*   `UluSkeletonText`\n*   `UluSkipLink`\n*   `UluSlider`\n*   `UluSpokeSpinner`\n*   `UluTab`\n*   `UluTabGroup`\n*   `UluTabList`\n*   `UluTabPanel`\n*   `UluTabPanels`\n*   `UluTable`\n*   `UluTableSticky`\n*   `UluTableStickyRows`\n*   `UluTableStickyTable`\n*   `UluTag`\n*   `UluTitleRail`\n\n---\n\n## Composables\n\nReusable, stateful logic that can be shared across components.\n\n*   `useBreakpointManager`\n*   `useDocumentTitle`\n*   `useFacets`\n*   `useIcon`\n*   `useModifiers`\n*   `usePagination`\n*   `useRequiredInject`\n*   `useScrollAnchorSection`\n*   `useScrollAnchorSections`\n*   `useScrollAnchors`\n*   `useTableData`\n*   `useTooltip`\n*   `useTooltipFollow`\n*   `useUluFloating`\n*   `useWindowResize`\n\n---\n\n## Plugins\n\nPlugins provide global functionality and APIs.\n\n*   `breakpointsPlugin`\n*   `corePlugin`\n*   `modalsPlugin`\n*   `popoversPlugin`\n*   `toastPlugin`\n\n\n\n---\n\n## Utilities\n\nThe `utils` export is a namespace containing helper functions.\n\n*   `utils.dom`\n*   `utils.router`\n\n`\n*   `utils.router`\n"
+      "raw_markdown": "\nimport { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Overview/API Reference\" />\n\n# API Reference\n\nThis page provides a comprehensive map of all named exports from the `@ulu/frontend-vue` library. Use this as a quick reference to discover available components, composables, plugins, and utilities.\n\n## Components\n\nThese are the building blocks for your UI. They are imported as named exports.\n\n*   `UluAccordion`\n*   `UluAccordionGroup`\n*   `UluAction`\n*   `UluAdaptiveLayout`\n*   `UluAlert`\n*   `UluAnimateNumber`\n*   `UluBadge`\n*   `UluBadgeStack`\n*   `UluBreadcrumb`\n*   `UluButton`\n*   `UluButtonVerbose`\n*   `UluCallout`\n*   `UluCard`\n*   `UluCollapsible`\n*   `UluConditionalText`\n*   `UluConditionalWrapper`\n*   `UluDataGrid`\n*   `UluDataTable`\n*   `UluDefinitionList`\n*   `UluDefinitionListItem`\n*   `UluDropdown`\n*   `UluEmpty`\n*   `UluEmptyView`\n*   `UluExternalLink`\n*   `UluFacetsActiveFilters`\n*   `UluFacetsFilterAccordions`\n*   `UluFacetsFilterLists`\n*   `UluFacetsFilterPopovers`\n*   `UluFacetsFilterSelects`\n*   `UluFacetsHeaderLayout`\n*   `UluFacetsList`\n*   `UluFacetsResults`\n*   `UluFacetsSearch`\n*   `UluFacetsSidebarLayout`\n*   `UluFacetsSort`\n*   `UluFileDisplay`\n*   `UluForm`\n*   `UluFormActions`\n*   `UluFormCheckbox`\n*   `UluFormFieldset`\n*   `UluFormFile`\n*   `UluFormItem`\n*   `UluFormItemsInline`\n*   `UluFormLabel`\n*   `UluFormMessage`\n*   `UluFormRadio`\n*   `UluFormRequiredChar`\n*   `UluFormSelect`\n*   `UluFormText`\n*   `UluFormTextarea`\n*   `UluIcon`\n*   `UluImage`\n*   `UluImageSource`\n*   In Progress - `UluImageSlider`\n*   `UluList`\n*   `UluListItem`\n*   `UluCounterList`\n*   `UluMain`\n*   `UluMenu`\n*   `UluMenuStack`\n*   `UluModal`\n*   `UluNavStrip`\n*   `UluOverflowPopover`\n*   `UluPager`\n*   `UluPlaceholderImage`\n*   `UluPlaceholderText`\n*   `UluProgressBar`\n*   `UluProgressCircle`\n*   `UluRouteAnnouncer`\n*   `UluRule`\n*   `UluSanityRichText`\n*   `UluScrollAnchors`\n*   `UluScrollAnchorsHeadlessSection`\n*   `UluScrollAnchorsNav`\n*   `UluScrollAnchorsNavAnimated`\n*   `UluScrollAnchorsSection`\n*   `UluScrollSlider`\n*   `UluSearchForm`\n*   `UluSelectableMenu`\n*   `UluShowSkeleton`\n*   `UluSkeletonContent`\n*   `UluSkeletonMedia`\n*   `UluSkeletonText`\n*   `UluSkipLink`\n*   `UluSlider`\n*   `UluSpokeSpinner`\n*   `UluTab`\n*   `UluTabGroup`\n*   `UluTabList`\n*   `UluTabPanel`\n*   `UluTabPanels`\n*   `UluTable`\n*   `UluTableSticky`\n*   `UluTableStickyRows`\n*   `UluTableStickyTable`\n*   `UluTag`\n*   `UluTitleRail`\n\n---\n\n## Composables\n\nReusable, stateful logic that can be shared across components.\n\n*   `useBreakpointManager`\n*   `useDocumentTitle`\n*   `useFacets`\n*   `useIcon`\n*   `useModifiers`\n*   `usePagination`\n*   `useRequiredInject`\n*   `useScrollAnchorSection`\n*   `useScrollAnchorSections`\n*   `useScrollAnchors`\n*   `useTableData`\n*   `useToast`\n*   `useTooltip`\n*   `useTooltipFollow`\n*   `useUluFloating`\n*   `useWindowResize`\n\n---\n\n## Plugins\n\nPlugins provide global functionality and APIs.\n\n*   `breakpointsPlugin`\n*   `corePlugin`\n*   `modalsPlugin`\n*   `popoversPlugin`\n*   `toastPlugin`\n\n\n\n---\n\n## Utilities\n\nThe `utils` export is a namespace containing helper functions.\n\n*   `utils.dom`\n*   `utils.router`\n\n`\n*   `utils.router`\n"
     },
     "ChangeLog": {
       "raw_markdown": "import { Meta, Markdown } from '@storybook/addon-docs/blocks';\nimport CHANGELOG from '../CHANGELOG.md?raw';\n\n<Meta title=\"Overview/Change Log\" />\n\n<Markdown>\n{CHANGELOG}\n</Markdown>"
@@ -12262,18 +12262,18 @@
     "useBreakpointManager": {
       "raw_markdown": "# useBreakpointManager\n\nComposable for adding breakpoint manager and related breakpoint info (via breakpoint manager from `@ulu/frontend/js/ui/breakpoints.js > BreakpointManager`).\n\n**Note:** Using the composable is only necessary for unique situations. For basic breakpoint setup use the `breakpointsPlugin`. Which uses this composable.\n\n## Options for this composable\n\n```js\nconst defaults = {\n  /**\n   * Set an initial value (value in mounted, SSR)\n   */\n  initialValue: null,\n  /**\n   * Function called after init (passed manager)\n   */\n  onReady: null,\n  /**\n   * Options sent to CssBreakpoints library (ulu/frontend/js/breakpoints <BreakpointManager>)\n   */\n  plugin: {\n    customProperty: \"--breakpoint\"\n  }\n}\n```\n\n## Example Usage\n\n```html\n<script setup>\n  import { ref, computed, provide } from \"vue\";\n  import { useBreakpointManager } from \"./useBreakpointManager.js\";\n\n  const isMobile = ref(false);\n\n  // Example using the onReady callback to set reactive value isMobile\n  // - In this situation isMobile is being used as a primary change in  \n  //   the applications layout \n  const options = { \n    onReady(manager) {\n      manager.at(\"small\").max(() => isMobile.value = true);\n      manager.at(\"large\").min(() => isMobile.value = false);\n    }\n  };\n\n  // Composable returns the following\n  const { \n    /**\n     * Reference to underlying BreakpointManager class\n    */\n    breakpointManager, \n    /**\n     * Active breakpoint name\n    */\n    breakpointActive, \n    /**\n     * Current resizeDirection (\"up\"|\"down\"|null)\n    */\n    breakpointDirection \n  } = useBreakpointManager(options);\n\n\n  // Allowing all components to access these values\n  provide(\"uluBreakpointActive\", computed(() => breakpointActive));\n  provide(\"uluBreakpointDirection\", computed(() => breakpointDirection));\n  provide(\"uluBreakpointManager\", computed(() => breakpointManager));\n  provide(\"uluIsMobile\", computed(() => isMobile));\n\n</script>\n```"
     },
-    "forms": {
-      "raw_markdown": "import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';\nimport * as FullFormDemoStories from './tests/FullFormDemo.stories.js';\n\n# Forms\n\nThis is a demonstration of a full form built with the `ulu-form` components.\n\n<Canvas of={FullFormDemoStories.Default} />\n"
+    "core": {
+      "raw_markdown": "# Core Plugin\n\n## Purpose\n\nThe Core Plugin is the central, **required** plugin for the `@ulu/frontend-vue` library. Its primary purpose is to establish a single, reactive source of truth for configuration settings that are shared across multiple components. \n\nBy using Vue's `provide`/`inject` system, this plugin ensures that all components within your application access the same configuration, preventing inconsistencies that can arise from separate module imports.\n\n## Installation\n\nTo use this library, you must register the `corePlugin` on your Vue app instance. You can also pass an options object to override the default settings.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { corePlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the core plugin\napp.use(corePlugin, {\n  // Optional: override general settings\n  fontAwesomeStatic: true,\n\n  // Optional: override specific icons safely\n  iconsByType: {\n    danger: 'my-custom-danger-icon',\n    close: 'my-custom-close-icon'\n  }\n});\n\napp.mount('#app');\n```\n\n## API Reference\n\nThe plugin provides its API to your application in two ways:\n\n-   **Composition API:** `inject('uluCore')`\n-   **Options API:** `this.$uluCore`\n\nThe API object contains the following methods:\n\n- `getSettings()`: Returns the full reactive settings object.\n- `getSetting(key)`: Retrieves a single setting by its key (e.g., `'fontAwesomeStatic'`).\n- `updateSetting(key, value)`: Updates a single setting.\n- `updateSettings(changes)`: Merges an object of changes into the settings.\n- `getDefaultSettings()`: Returns a non-reactive copy of the original default settings.\n- `getIcon(type)`: Retrieves a specific icon class string by its semantic type (e.g., `'danger'`, `'close'`).\n- `setIcon(type, definition)`: Safely sets or overrides a single icon definition.\n\n### Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\nimport { inject, onMounted } from 'vue';\n\nconst uluCore = inject('uluCore');\n\nonMounted(() => {\n  const icons = uluCore.getSetting('iconsByType');\n  console.log('Danger Icon:', icons.danger);\n\n  // Example of updating a single icon dynamically\n  uluCore.setIcon('success', 'my-awesome-success-icon');\n});\n</script>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>\n```\n\n"
     },
     "modals": {
       "raw_markdown": "import { Canvas } from '@storybook/addon-docs/blocks';\nimport * as ModalStories from '../../components/collapsible/UluModal.stories.js';\n\n# Modals\n\nModals plugin allows configuring app-wide modals that are triggered by the global API. Register your modals when you install the plugin then interact with them using the global API.\n\n## Registering your app-wide modals\n\nCreate the modal component file like:\n\n```html\n<template>\n  <UluModal>\n    User setting modal…\n  </UluModal>\n</template>\n```\n\n\nExample ./scr/modals.js\n\n```js\nimport { defineAsyncComponent } from \"vue\";\n\nexport default [\n  {\n    name: \"settings\",\n    component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n  }\n]\n```\n\n## Installing the plugin\n\nExample ./src/main.js\n\n```js\nimport UluModals from \"@ulu/frontend-vue/plugins/modals/index.js\";\nimport modals from \"./src/modals.js\";\n\n//...\n\napp.use(UluModals, { modals });\n\n```\n\n## Using Global API\n\n```js\n\n// Open a app-wide modal\nthis.$uluModals.open({ exampleProp: value });\n\n// Close app-wide modal \nthis.$uluModals.close();\n\n// Add modals after post-install\nthis.$uluModals.add({\n  name: \"settings\",\n  component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n});\n\n// Remove a modal from the registry\nthis.$uluModals.remove(\"settings\");\n\n// Get Modal from registry (not usually needed)\nconst settingsModal = this.$uluModals.get(\"settings\");\n// console.log(settingsModal.name) ==> \"settings\"\n```\n\n## Using Composition API (via composable)\n\nComposable is used get access to modals API (through inject)\n\n```html\n\n<template>\n  <button @click=\"showSettingsModal\">My Settings</button>\n</template>\n\n<script setup>\n  import { useModals } from \"./useModals\";\n\n  const modals = useModals();\n  const showSettingsModal = () => {\n    console.log(\"This is opening via uluModals composable\");\n    modals.open(\"settings\");\n  };\n</script>\n\n```\n\n## Standalone Modal Component\n\nThe `UluModal` **component is independent of this plugin.** The plugin is simply a convenient way to manage global modals (for things like a settings dialog) that need to be opened from anywhere in your application.\n\nYou can use `UluModal` as the component that the plugin displays, or you can use it on its own for any case where you are managing the state locally within a component and don't need a global API.\n\nHere is a demonstration of the standalone `UluModal` component:\n\n<Canvas of={ModalStories.Default} />"
     },
-    "core": {
-      "raw_markdown": "# Core Plugin\n\n## Purpose\n\nThe Core Plugin is the central, **required** plugin for the `@ulu/frontend-vue` library. Its primary purpose is to establish a single, reactive source of truth for configuration settings that are shared across multiple components. \n\nBy using Vue's `provide`/`inject` system, this plugin ensures that all components within your application access the same configuration, preventing inconsistencies that can arise from separate module imports.\n\n## Installation\n\nTo use this library, you must register the `corePlugin` on your Vue app instance. You can also pass an options object to override the default settings.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { corePlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the core plugin\napp.use(corePlugin, {\n  // Optional: override general settings\n  fontAwesomeStatic: true,\n\n  // Optional: override specific icons safely\n  iconsByType: {\n    danger: 'my-custom-danger-icon',\n    close: 'my-custom-close-icon'\n  }\n});\n\napp.mount('#app');\n```\n\n## API Reference\n\nThe plugin provides its API to your application in two ways:\n\n-   **Composition API:** `inject('uluCore')`\n-   **Options API:** `this.$uluCore`\n\nThe API object contains the following methods:\n\n- `getSettings()`: Returns the full reactive settings object.\n- `getSetting(key)`: Retrieves a single setting by its key (e.g., `'fontAwesomeStatic'`).\n- `updateSetting(key, value)`: Updates a single setting.\n- `updateSettings(changes)`: Merges an object of changes into the settings.\n- `getDefaultSettings()`: Returns a non-reactive copy of the original default settings.\n- `getIcon(type)`: Retrieves a specific icon class string by its semantic type (e.g., `'danger'`, `'close'`).\n- `setIcon(type, definition)`: Safely sets or overrides a single icon definition.\n\n### Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\nimport { inject, onMounted } from 'vue';\n\nconst uluCore = inject('uluCore');\n\nonMounted(() => {\n  const icons = uluCore.getSetting('iconsByType');\n  console.log('Danger Icon:', icons.danger);\n\n  // Example of updating a single icon dynamically\n  uluCore.setIcon('success', 'my-awesome-success-icon');\n});\n</script>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>\n```\n\n"
-    },
     "breakpoints": {
       "raw_markdown": "# Breakpoints Plugin\n\n## Purpose\n\nThe Breakpoints Plugin provides app-wide, reactive breakpoint information to your Vue components. It is a lightweight wrapper around the `useBreakpointManager` composable, ensuring that resize events and active breakpoint states are tracked centrally and distributed efficiently via Vue's `provide`/`inject` system.\n\nBy installing this plugin, any component in your application can instantly know the current breakpoint, whether the device is considered \"mobile,\" and the direction the window was just resized.\n\n## Installation\n\nRegister the `breakpointsPlugin` on your Vue app instance.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { breakpointsPlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the breakpoints plugin\napp.use(breakpointsPlugin, {\n  // Optional: Change which breakpoint triggers the 'isMobile' flag (default is 'small')\n  breakpointMobile: 'small',\n  \n  // Optional: Pass options directly to the underlying useBreakpointManager\n  managerOptions: {\n    // onReady(manager) { ... }\n  }\n});\n\napp.mount('#app');\n```\n\n## Provided Injections\n\nThe plugin does not attach methods to the Vue instance. Instead, it provides reactive `computed` refs that you can inject into any component.\n\n- **`uluIsMobile`**: `ComputedRef<Boolean>` - True if the current active breakpoint is less than or equal to the configured `breakpointMobile` (defaults to `'small'`).\n- **`uluBreakpointActive`**: `ComputedRef<String>` - The name of the currently active breakpoint (e.g., `'small'`, `'medium'`, `'large'`).\n- **`uluBreakpointDirection`**: `ComputedRef<Number>` - Indicates the resize direction (`1` for growing larger, `-1` for shrinking smaller, `0` for initialization).\n- **`uluBreakpointManager`**: `ComputedRef<Object>` - The underlying vanilla JS BreakpointManager instance, allowing advanced programmatic subscriptions if needed.\n\n## Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\n  import { inject } from 'vue';\n\n  const isMobile = inject('uluIsMobile');\n  const currentBreakpoint = inject('uluBreakpointActive');\n</script>\n\n<template>\n  <div>\n    <p v-if=\"isMobile\">You are on a mobile device!</p>\n    <p>Current Breakpoint: {{ currentBreakpoint }}</p>\n  </div>\n</template>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>\n```\n\n## Why use the Plugin vs the Composable?\n\nWhile you can import and use `useBreakpointManager()` directly in individual components, registering the Breakpoints Plugin ensures that the vanilla JS `BreakpointManager` is only instantiated once. This centralizes the resize event listeners, significantly improving performance across large applications with many responsive components.\n"
     },
+    "forms": {
+      "raw_markdown": "import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';\nimport * as FullFormDemoStories from './tests/FullFormDemo.stories.js';\n\n# Forms\n\nThis is a demonstration of a full form built with the `ulu-form` components.\n\n<Canvas of={FullFormDemoStories.Default} />\n"
+    },
     "useScrollAnchors": {
       "raw_markdown": "# useScrollAnchors\n\nThe main composable that contains the core \"engine\" for the Scroll Anchors system.\nIt encapsulates the `IntersectionObserver` logic to track sections and manage their active state.\nThis is intended for advanced use cases where a developer needs to build a custom provider\ncomponent instead of using the default `UluScrollAnchors`.\n\n## Usage\n\nThis composable is used to power a custom provider component. You would use it to provide the context to child components via Vue's `provide` function, using string-based keys.\n\n```html\n<script setup>\n  import { ref, computed, provide } from \"vue\";\n  import { useScrollAnchors } from './useScrollAnchors.js';\n\n  const props = defineProps({\n    firstItemActive: Boolean,\n    observerOptions: Object\n  });\n  const emit = defineEmits(['section-change']);\n  const componentEl = ref(null);\n  const sections = ref([]);\n\n  // Use the composable to handle the core logic\n  useScrollAnchors({ sections, props, emit, componentElRef: componentEl });\n\n  // Provide the state and registration functions to children\n  provide('uluScrollAnchorsSections', computed(() => sections.value));\n  provide('uluScrollAnchorsRegister', (section) => sections.value.push(section));\n  provide('uluScrollAnchorsUnregister', (sectionId) => {\n    const index = sections.value.findIndex(r => r.id === sectionId);\n    if (index > -1) sections.value.splice(index, 1);\n  });\n</script>\n\n<template>\n  <!-- Your custom wrapper, or no wrapper at all -->\n  <div ref=\"componentEl\">\n    <slot/>\n  </div>\n</template>\n```\n\n## Parameters\n\nThe `useScrollAnchors` composable accepts a single object with the following properties:\n\n- `sections` (Ref): A `ref` to the array of section objects that will be tracked.\n- `props` (Object): A props object containing `observerOptions` and `firstItemActive`.\n- `emit` (Function): The `emit` function from the host component, used to emit the `section-change` event.\n- `componentElRef` (Ref): A `ref` to an element within the component, used to find the nearest scrollable ancestor. This is not needed if `observerOptions.root` is set.\n\n## Returns\n\nThis composable does not return any values. It manages the observer and mutates the `active` state on the items within the `sections` array directly.\n"
     },
@@ -12405,6 +12405,32 @@
         "order": 28,
         "level": 0
       },
+      {
+        "id": "module:components",
+        "longname": "module:components",
+        "name": "components",
+        "kind": "module",
+        "meta": {
+          "lineno": 1,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/components"
+        },
+        "order": 29,
+        "level": 0
+      },
+      {
+        "id": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exportsmodule:",
+        "longname": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exportsmodule:",
+        "name": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exports",
+        "kind": "module",
+        "meta": {
+          "lineno": 4,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/components"
+        },
+        "order": 30,
+        "level": 0
+      },
       {
         "id": "module:useWindowResize",
         "longname": "module:useWindowResize",
@@ -12415,7 +12441,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 29,
+        "order": 31,
         "level": 0
       },
       {
@@ -12428,7 +12454,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 32,
+        "order": 34,
         "level": 0
       },
       {
@@ -12441,7 +12467,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 36,
+        "order": 38,
         "level": 0
       },
       {
@@ -12454,7 +12480,7 @@
           "filename": "useRequiredInject.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 44,
+        "order": 46,
         "level": 0
       },
       {
@@ -12467,7 +12493,7 @@
           "filename": "usePagination.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 46,
+        "order": 48,
         "level": 0
       },
       {
@@ -12480,7 +12506,7 @@
           "filename": "useModifiers.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 48,
+        "order": 50,
         "level": 0
       },
       {
@@ -12493,7 +12519,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 50,
+        "order": 52,
         "level": 0
       },
       {
@@ -12506,7 +12532,7 @@
           "filename": "useDocumentTitle.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 53,
+        "order": 55,
         "level": 0
       },
       {
@@ -12519,7 +12545,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 55,
+        "order": 57,
         "level": 0
       },
       {
@@ -12532,32 +12558,6 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 60,
-        "level": 0
-      },
-      {
-        "id": "module:components",
-        "longname": "module:components",
-        "name": "components",
-        "kind": "module",
-        "meta": {
-          "lineno": 1,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/components"
-        },
-        "order": 61,
-        "level": 0
-      },
-      {
-        "id": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exportsmodule:",
-        "longname": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exportsmodule:",
-        "name": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exports",
-        "kind": "module",
-        "meta": {
-          "lineno": 4,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/components"
-        },
         "order": 62,
         "level": 0
       },
@@ -12614,95 +12614,95 @@
         "level": 0
       },
       {
-        "id": "module:useTooltipFollow",
-        "longname": "module:useTooltipFollow",
-        "name": "useTooltipFollow",
+        "id": "module:useModals",
+        "longname": "module:useModals",
+        "name": "useModals",
         "kind": "module",
         "meta": {
           "lineno": 1,
-          "filename": "useTooltipFollow.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
+          "filename": "useModals.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
         "order": 80,
         "level": 0
       },
       {
-        "id": "module:useTooltip",
-        "longname": "module:useTooltip",
-        "name": "useTooltip",
+        "id": "module:modalsPlugin",
+        "longname": "module:modalsPlugin",
+        "name": "modalsPlugin",
         "kind": "module",
+        "description": "Modals plugin (adds components, global registry, etc)\n- Updated version handles both independent and global registered/triggered modals",
         "meta": {
           "lineno": 1,
-          "filename": "useTooltip.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 81,
+        "order": 82,
         "level": 0
       },
       {
-        "id": "module:popoversPlugin",
-        "longname": "module:popoversPlugin",
-        "name": "popoversPlugin",
+        "id": "modals.module:api",
+        "longname": "modals.module:api",
+        "name": "api",
         "kind": "module",
         "meta": {
           "lineno": 1,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
+          "filename": "api.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 83,
+        "order": 85,
         "level": 0
       },
       {
-        "id": "popovers.module:defaults",
-        "longname": "popovers.module:defaults",
-        "name": "defaults",
+        "id": "module:useTooltipFollow",
+        "longname": "module:useTooltipFollow",
+        "name": "useTooltipFollow",
         "kind": "module",
         "meta": {
           "lineno": 1,
-          "filename": "defaults.js",
+          "filename": "useTooltipFollow.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 89
+        "order": 94,
+        "level": 0
       },
       {
-        "id": "module:useModals",
-        "longname": "module:useModals",
-        "name": "useModals",
+        "id": "module:useTooltip",
+        "longname": "module:useTooltip",
+        "name": "useTooltip",
         "kind": "module",
         "meta": {
           "lineno": 1,
-          "filename": "useModals.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+          "filename": "useTooltip.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 111,
+        "order": 95,
         "level": 0
       },
       {
-        "id": "module:modalsPlugin",
-        "longname": "module:modalsPlugin",
-        "name": "modalsPlugin",
+        "id": "module:popoversPlugin",
+        "longname": "module:popoversPlugin",
+        "name": "popoversPlugin",
         "kind": "module",
-        "description": "Modals plugin (adds components, global registry, etc)\n- Updated version handles both independent and global registered/triggered modals",
         "meta": {
           "lineno": 1,
           "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 113,
+        "order": 97,
         "level": 0
       },
       {
-        "id": "modals.module:api",
-        "longname": "modals.module:api",
-        "name": "api",
+        "id": "popovers.module:defaults",
+        "longname": "popovers.module:defaults",
+        "name": "defaults",
         "kind": "module",
         "meta": {
           "lineno": 1,
-          "filename": "api.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+          "filename": "defaults.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 116,
-        "level": 0
+        "order": 103
       },
       {
         "id": "module:corePlugin",
@@ -12805,7 +12805,7 @@
         "description": "Install plugin",
         "memberof": "module:toastPlugin",
         "meta": {
-          "lineno": 11,
+          "lineno": 12,
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/toast"
         },
@@ -12813,75 +12813,75 @@
         "level": 0
       },
       {
-        "id": "module:popoversPlugin--module.exports",
-        "longname": "module:popoversPlugin",
+        "id": "module:modalsPlugin--module.exports",
+        "longname": "module:modalsPlugin",
         "name": "module.exports",
         "kind": "function",
         "isExported": true,
-        "description": "Install the UluPopovers plugin.",
-        "memberof": "module:popoversPlugin",
+        "description": "Modals Vue Plugin",
+        "memberof": "module:modalsPlugin",
         "params": [
           {
             "type": {
               "names": [
-                "object"
+                "Object"
               ]
             },
-            "description": "The Vue app instance.",
-            "name": "app"
+            "description": "Vue app instance passed to plugin",
+            "name": "App"
           },
           {
             "type": {
               "names": [
-                "object"
+                "module:modalsPlugin~UluModalsPluginOptions"
               ]
             },
-            "description": "User-defined options to override defaults.",
+            "description": "Options to change (see defaults)",
             "name": "userOptions"
           }
         ],
         "meta": {
-          "lineno": 58,
+          "lineno": 28,
           "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 88,
+        "order": 84,
         "level": 0
       },
       {
-        "id": "module:modalsPlugin--module.exports",
-        "longname": "module:modalsPlugin",
+        "id": "module:popoversPlugin--module.exports",
+        "longname": "module:popoversPlugin",
         "name": "module.exports",
         "kind": "function",
         "isExported": true,
-        "description": "Modals Vue Plugin",
-        "memberof": "module:modalsPlugin",
+        "description": "Install the UluPopovers plugin.",
+        "memberof": "module:popoversPlugin",
         "params": [
           {
             "type": {
               "names": [
-                "Object"
+                "object"
               ]
             },
-            "description": "Vue app instance passed to plugin",
-            "name": "App"
+            "description": "The Vue app instance.",
+            "name": "app"
           },
           {
             "type": {
               "names": [
-                "module:modalsPlugin~UluModalsPluginOptions"
+                "object"
               ]
             },
-            "description": "Options to change (see defaults)",
+            "description": "User-defined options to override defaults.",
             "name": "userOptions"
           }
         ],
         "meta": {
-          "lineno": 28,
+          "lineno": 58,
           "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 115,
+        "order": 102,
         "level": 0
       },
       {
@@ -13031,7 +13031,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 56
+        "order": 58
       },
       {
         "id": "module:useBreakpointManager~defaults.onReady",
@@ -13046,7 +13046,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 57
+        "order": 59
       },
       {
         "id": "module:useBreakpointManager~defaults.plugin",
@@ -13061,7 +13061,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 58
+        "order": 60
       },
       {
         "id": "toast.module:defaults--module.exports",
@@ -13158,7 +13158,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 90
+        "order": 104
       },
       {
         "id": "popovers.module:defaults.plugin.directiveName",
@@ -13178,7 +13178,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 91
+        "order": 105
       },
       {
         "id": "popovers.module:defaults.popover",
@@ -13193,7 +13193,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 92
+        "order": 106
       },
       {
         "id": "popovers.module:defaults.popover.inline",
@@ -13213,7 +13213,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 93
+        "order": 107
       },
       {
         "id": "popovers.module:defaults.popover.delay",
@@ -13233,7 +13233,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 94
+        "order": 108
       },
       {
         "id": "popovers.module:defaults.popover.placement",
@@ -13253,7 +13253,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 95
+        "order": 109
       },
       {
         "id": "popovers.module:defaults.popover.strategy",
@@ -13273,7 +13273,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 96
+        "order": 110
       },
       {
         "id": "popovers.module:defaults.popover.offset",
@@ -13293,7 +13293,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 97
+        "order": 111
       },
       {
         "id": "popovers.module:defaults.popover.arrow",
@@ -13313,7 +13313,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 98
+        "order": 112
       },
       {
         "id": "popovers.module:defaults.tooltip",
@@ -13333,7 +13333,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 99
+        "order": 113
       },
       {
         "id": "popovers.module:defaults.tooltip.teleportTo",
@@ -13353,7 +13353,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 100
+        "order": 114
       },
       {
         "id": "popovers.module:defaults.tooltip.class",
@@ -13375,7 +13375,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 101
+        "order": 115
       },
       {
         "id": "popovers.module:defaults.tooltip.showEvents",
@@ -13395,7 +13395,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 102
+        "order": 116
       },
       {
         "id": "popovers.module:defaults.tooltip.hideEvents",
@@ -13415,7 +13415,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 103
+        "order": 117
       },
       {
         "id": "popovers.module:defaults.tooltip.isHtml",
@@ -13435,7 +13435,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 104
+        "order": 118
       },
       {
         "id": "popovers.module:defaults.tooltip.trigger",
@@ -13456,7 +13456,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 105
+        "order": 119
       },
       {
         "id": "popovers.module:defaults.tooltip.content",
@@ -13477,7 +13477,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 106
+        "order": 120
       },
       {
         "id": "popovers.module:defaults.tooltip.delay",
@@ -13497,7 +13497,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 107
+        "order": 121
       },
       {
         "id": "popovers.module:defaults.tooltip.onReady",
@@ -13512,7 +13512,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 108
+        "order": 122
       },
       {
         "id": "popovers.module:defaults.tooltip.component",
@@ -13527,7 +13527,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 109
+        "order": 123
       },
       {
         "id": "popovers.module:defaults.tooltip.componentProps",
@@ -13542,7 +13542,7 @@
           "filename": "defaults.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 110
+        "order": 124
       },
       {
         "id": "module:breakpointsPlugin--module.exports~defaults.breakpointMobile",
@@ -13647,6 +13647,42 @@
         "order": 68,
         "level": 0
       },
+      {
+        "id": "module:useModals.useModals",
+        "longname": "module:useModals.useModals",
+        "name": "useModals",
+        "kind": "constant",
+        "scope": "static",
+        "description": "A composable to access the global modals API.\nThis is a simple wrapper around `inject('uluModals')` and throws an error if the plugin is not installed.",
+        "memberof": "module:useModals",
+        "returns": [
+          {
+            "type": {
+              "names": [
+                "object"
+              ]
+            },
+            "description": "The modals API with methods like `open`, `close`, `add`, `remove`, and `get`."
+          }
+        ],
+        "exceptions": [
+          {
+            "type": {
+              "names": [
+                "Error"
+              ]
+            },
+            "description": "If the modals plugin is not installed."
+          }
+        ],
+        "meta": {
+          "lineno": 13,
+          "filename": "useModals.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+        },
+        "order": 81,
+        "level": 0
+      },
       {
         "id": "module:popoversPlugin--module.exports.POPOVER_OPTIONS_KEY",
         "longname": "module:popoversPlugin.POPOVER_OPTIONS_KEY",
@@ -13660,7 +13696,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 84,
+        "order": 98,
         "level": 0
       },
       {
@@ -13676,7 +13712,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 85,
+        "order": 99,
         "level": 0
       },
       {
@@ -13692,7 +13728,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 86,
+        "order": 100,
         "level": 0
       },
       {
@@ -13739,43 +13775,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 87,
-        "level": 0
-      },
-      {
-        "id": "module:useModals.useModals",
-        "longname": "module:useModals.useModals",
-        "name": "useModals",
-        "kind": "constant",
-        "scope": "static",
-        "description": "A composable to access the global modals API.\nThis is a simple wrapper around `inject('uluModals')` and throws an error if the plugin is not installed.",
-        "memberof": "module:useModals",
-        "returns": [
-          {
-            "type": {
-              "names": [
-                "object"
-              ]
-            },
-            "description": "The modals API with methods like `open`, `close`, `add`, `remove`, and `get`."
-          }
-        ],
-        "exceptions": [
-          {
-            "type": {
-              "names": [
-                "Error"
-              ]
-            },
-            "description": "If the modals plugin is not installed."
-          }
-        ],
-        "meta": {
-          "lineno": 13,
-          "filename": "useModals.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
-        },
-        "order": 112,
+        "order": 101,
         "level": 0
       },
       {
@@ -14641,7 +14641,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 31,
+        "order": 33,
         "level": 0
       },
       {
@@ -14695,7 +14695,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 35,
+        "order": 37,
         "level": 0
       },
       {
@@ -14732,7 +14732,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 37,
+        "order": 39,
         "level": 0
       },
       {
@@ -14764,7 +14764,7 @@
           "filename": "useRequiredInject.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 45,
+        "order": 47,
         "level": 0
       },
       {
@@ -14810,7 +14810,7 @@
           "filename": "usePagination.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 47,
+        "order": 49,
         "level": 0
       },
       {
@@ -14883,7 +14883,7 @@
           "filename": "useModifiers.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 49,
+        "order": 51,
         "level": 0
       },
       {
@@ -14909,7 +14909,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 51,
+        "order": 53,
         "level": 0
       },
       {
@@ -14979,7 +14979,7 @@
           "filename": "useDocumentTitle.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 54,
+        "order": 56,
         "level": 0
       },
       {
@@ -15047,7 +15047,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 59,
+        "order": 61,
         "level": 0
       },
       {
@@ -15142,7 +15142,7 @@
           "filename": "useTooltip.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/popovers"
         },
-        "order": 82,
+        "order": 96,
         "level": 0
       },
       {
@@ -15435,7 +15435,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 118,
+        "order": 87,
         "level": 0
       },
       {
@@ -15451,7 +15451,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 119,
+        "order": 88,
         "level": 0
       },
       {
@@ -15485,7 +15485,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 43,
+        "order": 45,
         "level": 0
       },
       {
@@ -15502,7 +15502,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 117,
+        "order": 86,
         "level": 0
       },
       {
@@ -15519,7 +15519,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 120,
+        "order": 89,
         "level": 0
       },
       {
@@ -15598,7 +15598,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 30,
+        "order": 32,
         "level": 0
       },
       {
@@ -15615,7 +15615,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 38,
+        "order": 40,
         "level": 0
       },
       {
@@ -15632,7 +15632,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 39,
+        "order": 41,
         "level": 0
       },
       {
@@ -15649,7 +15649,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 40,
+        "order": 42,
         "level": 0
       },
       {
@@ -15666,7 +15666,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 41,
+        "order": 43,
         "level": 0
       },
       {
@@ -15683,7 +15683,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 42,
+        "order": 44,
         "level": 0
       },
       {
@@ -15723,7 +15723,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 52,
+        "order": 54,
         "level": 0
       },
       {
@@ -15754,7 +15754,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 121,
+        "order": 90,
         "level": 0
       },
       {
@@ -15780,7 +15780,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 122,
+        "order": 91,
         "level": 0
       },
       {
@@ -15796,7 +15796,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 123,
+        "order": 92,
         "level": 0
       },
       {
@@ -15822,7 +15822,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 124,
+        "order": 93,
         "level": 0
       },
       {
@@ -16177,7 +16177,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 33,
+        "order": 35,
         "level": 0
       },
       {
@@ -16264,7 +16264,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 34,
+        "order": 36,
         "level": 0
       },
       {
@@ -16305,7 +16305,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 114,
+        "order": 83,
         "level": 0
       }
     ],
@@ -17412,7 +17412,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17424,7 +17424,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17436,7 +17436,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17448,7 +17448,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17460,7 +17460,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17472,7 +17472,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17484,7 +17484,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17496,7 +17496,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17508,7 +17508,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17520,7 +17520,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17532,7 +17532,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17544,7 +17544,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17556,7 +17556,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17568,7 +17568,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17580,7 +17580,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17592,7 +17592,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17604,7 +17604,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17616,7 +17616,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17628,7 +17628,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17640,7 +17640,7 @@
               "context": {
                 "type": "mixin",
                 "name": "styles",
-                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+                "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
                 "line": {
                   "start": 108,
                   "end": 198
@@ -17662,7 +17662,7 @@
           "context": {
             "type": "mixin",
             "name": "styles",
-            "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue animation\n  #{ $prefix }--animation-move, \n  #{ $prefix }--animation-enter-active,\n  #{ $prefix }--animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  #{ $prefix }--animation-enter-from,\n  #{ $prefix }--animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  #{ $prefix }--animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
+            "code": "\n  $prefix: selector.class(\"toast\");\n\n  #{ $prefix }-container {\n    position: fixed;\n    top: get(\"container-top\");\n    right: get(\"container-right\");\n    width: get(\"container-width\");\n    z-index: get(\"z-index\");\n  }\n\n  #{ $prefix } {\n    box-shadow: get(\"box-shadow\");\n    background-color: get(\"background-color\");\n    border-radius: get(\"border-radius\");\n    border: get(\"border-width\") solid get(\"border-color\");\n    padding: get(\"padding\");\n    line-height: get(\"line-height\");\n    margin-bottom: get(\"margin-bottom\");\n    display: flex;\n    align-items: center;\n  }\n\n  #{ $prefix }__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n  }\n\n  #{ $prefix }__date {\n    color: get(\"date-color\");\n    font-weight: get(\"date-font-weight\");\n    margin-left: 1em;\n  }\n\n  #{ $prefix }__icon {\n    margin-right: get(\"icon-margin-right\");\n    font-size: get(\"icon-font-size\");\n  }\n\n  #{ $prefix }__actions {\n    flex-basis: min-content;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-right: get(\"actions-margin-right\");\n  }\n\n  #{ $prefix }__action {\n    width: 100%;\n    margin: 0;\n    & + & {\n      margin-top: get(\"action-margin-top\");\n    }\n  }\n\n  #{ $prefix }__close {\n    margin: 0;\n  }\n\n  #{ $prefix }__content {\n    margin-right: auto;\n    flex-grow: 1;\n    padding: get(\"content-padding\");\n  }\n\n  #{ $prefix }--persistent {\n    animation: get(\"persistent-animation\");\n    &:hover,\n    &:focus-within {\n      animation: none;\n    }\n  }\n\n  // Vue transition group animation on container\n  .toast-animation-move, \n  .toast-animation-enter-active,\n  .toast-animation-leave-active {\n    transition: all 0.3s ease;\n  }\n  .toast-animation-enter-from,\n  .toast-animation-leave-to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  .toast-animation-leave-active {\n    position: absolute;\n    width: 100%;\n  }\n",
             "line": {
               "start": 108,
               "end": 198