@ulu/frontend-vue 0.6.12 → 0.6.14

package/dist/mcp-data.json

@@ -20,62 +20,6 @@
       }
     ],
     "useDocumentTitle": [],
-    "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>"
-      }
-    ],
-    "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": [],
     "UluProgressCircle": [],
     "UluProgressBar": [],
     "UluAnimateNumber": [],
@@ -191,10 +135,6 @@
         "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
       }
     ],
-    "UluWhenBreakpoint": [],
-    "UluTitleRail": [],
-    "UluDataGrid": [],
-    "UluAdaptiveLayout": [],
     "UluSelectableMenu": [],
     "UluSearchForm": [],
     "UluFormTextarea": [],
@@ -211,6 +151,38 @@
     "UluFormActions": [],
     "UluForm": [],
     "UluFileDisplay": [],
+    "UluWhenBreakpoint": [],
+    "UluTitleRail": [],
+    "UluDataGrid": [],
+    "UluAdaptiveLayout": [],
+    "UluTabGroup": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluTabGroup>Content</UluTabGroup>"
+      },
+      {
+        "title": "Vertical",
+        "description": "Vertical variation",
+        "code": "<UluTabGroup vertical>Content</UluTabGroup>"
+      },
+      {
+        "title": "DefaultIndex",
+        "description": "DefaultIndex variation",
+        "code": "<UluTabGroup :defaultIndex=\"2\">Content</UluTabGroup>"
+      },
+      {
+        "title": "FullWidth",
+        "description": "FullWidth variation",
+        "code": "<UluTabGroup modifiers=\"{...}\">Content</UluTabGroup>"
+      }
+    ],
+    "UluOverflowPopover": [],
+    "UluModal": [],
+    "UluDropdown": [],
+    "UluCollapsible": [],
+    "UluAccordionGroup": [],
+    "UluAccordion": [],
     "UluTag": [],
     "UluTable": [
       {
@@ -434,34 +406,62 @@
       }
     ],
     "UluAlert": [],
-    "UluTabGroup": [
+    "toast": [
       {
         "title": "Default",
         "description": "Default variation",
-        "code": "<UluTabGroup>Content</UluTabGroup>"
+        "code": "<toast>Content</toast>"
+      }
+    ],
+    "useModals": [],
+    "modals": [
+      {
+        "title": "GlobalApiTest",
+        "description": "GlobalApiTest variation",
+        "code": "<modals>Content</modals>"
       },
       {
-        "title": "Vertical",
-        "description": "Vertical variation",
-        "code": "<UluTabGroup vertical>Content</UluTabGroup>"
+        "title": "modals Example 1",
+        "description": "Code example extracted from markdown.",
+        "code": "<template>\n  <UluModal>\n    User setting modal…\n  </UluModal>\n</template>"
       },
       {
-        "title": "DefaultIndex",
-        "description": "DefaultIndex variation",
-        "code": "<UluTabGroup :defaultIndex=\"2\">Content</UluTabGroup>"
+        "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": "FullWidth",
-        "description": "FullWidth variation",
-        "code": "<UluTabGroup modifiers=\"{...}\">Content</UluTabGroup>"
+        "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>"
       }
     ],
-    "UluOverflowPopover": [],
-    "UluModal": [],
-    "UluDropdown": [],
-    "UluCollapsible": [],
-    "UluAccordionGroup": [],
-    "UluAccordion": [],
+    "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": [],
     "UluTableSticky": [
       {
         "title": "Default",
@@ -469,6 +469,10 @@
         "code": "<UluTableSticky columns=\"{...}\" rows=\"{...}\" caption=\"Example Sticky Table\" scrollControls>Content</UluTableSticky>"
       }
     ],
+    "UluScrollAnchorsNavAnimated": [],
+    "UluScrollAnchorsNav": [],
+    "UluScrollAnchorsHeadlessSection": [],
+    "UluScrollAnchors": [],
     "UluSkeletonText": [],
     "UluSkeletonMedia": [],
     "UluSkeletonContent": [],
@@ -480,10 +484,6 @@
         "code": "<CardExample horizontal>Content</CardExample>"
       }
     ],
-    "UluScrollAnchorsNavAnimated": [],
-    "UluScrollAnchorsNav": [],
-    "UluScrollAnchorsHeadlessSection": [],
-    "UluScrollAnchors": [],
     "facets-router": [
       {
         "title": "Default",
@@ -605,7 +605,7 @@
       {
         "title": "useModifiers Example 1",
         "description": "Code example extracted from markdown.",
-        "code": "<script setup>\n  import { useModifiers } from \"../composables/useModifiers.js\";\n  const props = defineProps({\n    /**\n     * Modifiers for classes\n     */\n    modifiers: [String, Array],\n  });\n  const { resolvedModifiers } = useModifiers({ props, baseClass: \"button\" });\n</script>"
+        "code": "<script setup>\n  import { useModifiers } from \"../composables/useModifiers.js\";\n  const props = defineProps({\n    /**\n     * Modifiers for classes\n     */\n    modifiers: [String, Array, Object],\n  });\n  const { resolvedModifiers } = useModifiers({ props, baseClass: \"button\" });\n</script>"
       }
     ],
     "useBreakpointManager": [
@@ -917,7 +917,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class)"
         }
       ],
@@ -1025,7 +1025,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])"
         }
       ],
@@ -1349,7 +1349,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class)"
         }
       ],
@@ -1392,7 +1392,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Class modifiers (ie. 'transparent', 'secondary', etc)"
         }
       ],
@@ -1548,7 +1548,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class)"
         }
       ],
@@ -1910,7 +1910,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Additional BEM modifiers for the form item."
         }
       ],
@@ -2096,7 +2096,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers for tag class"
         }
       ],
@@ -2252,7 +2252,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Base class modifiers."
         }
       ],
@@ -2321,7 +2321,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Base class modifiers."
         }
       ],
@@ -2371,7 +2371,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])"
         }
       ],
@@ -2727,7 +2727,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Class modifiers (ie. 'transparent', 'secondary', etc)"
         },
         {
@@ -2832,7 +2832,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Additional style modifiers"
         },
         {
@@ -2888,7 +2888,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class [ie. 'alphabetical'])"
         }
       ],
@@ -3004,8 +3004,8 @@
         },
         {
           "name": "modifiers",
-          "type": "array|string",
-          "description": "Class modifiers (ie. 'transparent', 'secondary', etc)\n- Can be String or Array of Strings"
+          "type": "string|array|object",
+          "description": "Class modifiers (ie. 'transparent', 'secondary', etc)\n- Can be String, Array, or Object"
         }
       ],
       "events": [
@@ -3053,7 +3053,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers for styling and positioning (e.g., 'bottom', 'center', 'right', 'traditional')."
         }
       ],
@@ -3079,8 +3079,8 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
-          "description": "Class modifiers (ie. 'transparent', 'secondary', etc)\n- Can be String or Array of Strings"
+          "type": "string|array|object",
+          "description": "Class modifiers (ie. 'transparent', 'secondary', etc)\n- Can be String, Array, or Object"
         }
       ],
       "events": [],
@@ -3147,7 +3147,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])"
         }
       ],
@@ -3258,7 +3258,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])"
         },
         {
@@ -3340,7 +3340,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])"
         }
       ],
@@ -3383,7 +3383,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])"
         }
       ],
@@ -3466,7 +3466,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Class modifiers (ie. 'transparent', 'secondary', etc)"
         }
       ],
@@ -3622,7 +3622,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])"
         },
         {
@@ -3776,7 +3776,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Class modifiers (ie. 'transparent', 'secondary', etc)"
         },
         {
@@ -3845,7 +3845,7 @@
         },
         {
           "name": "modifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Class modifiers (ie. 'transparent', 'secondary', etc)"
         }
       ],
@@ -4794,7 +4794,7 @@
         },
         {
           "name": "accordionModifiers",
-          "type": "string|array",
+          "type": "string|array|object",
           "description": "Class modifiers for accordion (ie. 'transparent', 'secondary', etc)"
         }
       ],
@@ -5282,7 +5282,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -5457,7 +5457,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -5993,7 +5993,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -6064,7 +6064,7 @@
             "name": "modifiers",
             "description": "Class modifiers (ie. 'transparent', 'secondary', etc)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -6337,7 +6337,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -6874,7 +6874,7 @@
             "name": "modifiers",
             "description": "Additional BEM modifiers for the form item.",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -7149,7 +7149,7 @@
             "name": "modifiers",
             "description": "Modifiers for tag class",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -7575,7 +7575,7 @@
             "name": "modifiers",
             "description": "Base class modifiers.",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -7711,7 +7711,7 @@
             "name": "modifiers",
             "description": "Base class modifiers.",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -7792,7 +7792,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -8392,7 +8392,7 @@
             "name": "modifiers",
             "description": "Class modifiers (ie. 'transparent', 'secondary', etc)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           },
           {
@@ -8697,7 +8697,7 @@
             "name": "modifiers",
             "description": "Additional style modifiers",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           },
           {
@@ -8794,7 +8794,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class [ie. 'alphabetical'])",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -8968,9 +8968,9 @@
           },
           {
             "name": "modifiers",
-            "description": "Class modifiers (ie. 'transparent', 'secondary', etc)\n- Can be String or Array of Strings",
+            "description": "Class modifiers (ie. 'transparent', 'secondary', etc)\n- Can be String, Array, or Object",
             "type": {
-              "name": "array|string"
+              "name": "string|array|object"
             }
           }
         ],
@@ -9030,7 +9030,7 @@
             "name": "modifiers",
             "description": "Modifiers for styling and positioning (e.g., 'bottom', 'center', 'right', 'traditional').",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -9063,9 +9063,9 @@
           },
           {
             "name": "modifiers",
-            "description": "Class modifiers (ie. 'transparent', 'secondary', etc)\n- Can be String or Array of Strings",
+            "description": "Class modifiers (ie. 'transparent', 'secondary', etc)\n- Can be String, Array, or Object",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -9164,7 +9164,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -9326,7 +9326,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           },
           {
@@ -9440,7 +9440,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -9504,7 +9504,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -9622,7 +9622,7 @@
             "name": "modifiers",
             "description": "Class modifiers (ie. 'transparent', 'secondary', etc)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -9861,7 +9861,7 @@
             "name": "modifiers",
             "description": "Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           },
           {
@@ -10124,7 +10124,7 @@
             "name": "modifiers",
             "description": "Class modifiers (ie. 'transparent', 'secondary', etc)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           },
           {
@@ -10276,7 +10276,7 @@
             "name": "modifiers",
             "description": "Class modifiers (ie. 'transparent', 'secondary', etc)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -12124,7 +12124,7 @@
             "name": "accordionModifiers",
             "description": "Class modifiers for accordion (ie. 'transparent', 'secondary', etc)",
             "type": {
-              "name": "string|array"
+              "name": "string|array|object"
             }
           }
         ],
@@ -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>"
@@ -12257,17 +12257,17 @@
       "raw_markdown": "# useTableData\n\nA composable for managing and normalizing table data structures. It is used internally by `UluTable` and `UluTableSticky` to handle complex nested column logic, identifier creation, and accessibility attributes. \n\nWhile primarily an internal utility, you can use it to build highly custom table implementations that adhere to the standard `columns` and `rows` data API used by the ULU library.\n\n## Usage\n\n```html\n  <script setup>\n  import { useTableData } from '@ulu/frontend-vue';\n\n  const props = defineProps({\n    columns: Array,\n    rows: Array,\n    footerRows: Array,\n    idPrefix: { type: String, default: 'my-custom-table' }\n  });\n\n  const handleDataChange = () => {\n    console.log('Table data has been updated!');\n  };\n\n  const { \n    currentColumns, \n    currentRows, \n    currentFooterRows, \n    headerRows, \n    rowColumns \n  } = useTableData(props, handleDataChange);\n</script>\n\n<template>\n  <table>\n    <thead>\n      <tr v-for=\"(row, rowIndex) in headerRows\" :key=\"rowIndex\">\n        <th \n          v-for=\"(column, colIndex) in row.columns\" \n          :key=\"colIndex\"\n          :id=\"column.id\"\n          :rowspan=\"column.rowspan\"\n          :colspan=\"column.colspan\"\n        >\n          {{ column.title }}\n        </th>\n      </tr>\n    </thead>\n    <!-- Custom body rendering using rowColumns and currentRows -->\n  </table>\n</template>\n```\n\n## Parameters\n\nThe composable accepts two parameters:\n\n1.  **`props` (Object)**: An object (usually your component's props) containing the following optional properties:\n    *   `columns` (Array): The raw column configuration array. Supports nested columns for complex headers.\n    *   `rows` (Array): The raw data rows.\n    *   `footerRows` (Array): Raw data rows intended for the table footer.\n    *   `idPrefix` (String): A prefix used when generating unique IDs for table headers and cells.\n2.  **`onChange` (Function)**: An optional callback function that is triggered whenever the `columns`, `rows`, or `footerRows` deeply change. Useful for triggering layout recalculations (like in `UluTableSticky`).\n\n## Returns\n\nThe composable returns an object containing reactive references:\n\n*   **`currentColumns` (Ref Array)**: A deeply cloned and normalized version of the `columns` prop. Each column has unique IDs and parent references attached.\n*   **`headerRows` (Ref Array)**: An array of row arrays, calculated based on the maximum depth of nested columns. Used to render the `<thead>` with correct `colspan` and `rowspan` values.\n*   **`rowColumns` (ComputedRef Array)**: A flat array representing only the deepest \"leaf\" columns. Used to iterate over data cells in the `<tbody>`. Includes utility methods for generating `headers` attributes.\n*   **`currentRows` (Ref Array)**: Normalized rows containing unique IDs and wrapped `data`.\n*   **`currentFooterRows` (Ref Array)**: Normalized footer rows containing unique IDs and wrapped `data`.\n"
     },
     "useModifiers": {
-      "raw_markdown": "# useModifiers\n\nComposable for creating modifier classes for base class based on modifiers prop for a given component\n\n\n```html\n<script setup>\n  import { useModifiers } from \"../composables/useModifiers.js\";\n  const props = defineProps({\n    /**\n     * Modifiers for classes\n     */\n    modifiers: [String, Array],\n  });\n  const { resolvedModifiers } = useModifiers({ props, baseClass: \"button\" });\n</script>\n```"
+      "raw_markdown": "# useModifiers\n\nComposable for creating modifier classes for base class based on modifiers prop for a given component\n\n\n```html\n<script setup>\n  import { useModifiers } from \"../composables/useModifiers.js\";\n  const props = defineProps({\n    /**\n     * Modifiers for classes\n     */\n    modifiers: [String, Array, Object],\n  });\n  const { resolvedModifiers } = useModifiers({ props, baseClass: \"button\" });\n</script>\n```"
     },
     "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```"
     },
-    "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"
     },
@@ -12405,32 +12405,6 @@
         "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",
@@ -12441,7 +12415,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 31,
+        "order": 29,
         "level": 0
       },
       {
@@ -12454,7 +12428,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 34,
+        "order": 32,
         "level": 0
       },
       {
@@ -12467,7 +12441,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 38,
+        "order": 36,
         "level": 0
       },
       {
@@ -12480,7 +12454,7 @@
           "filename": "useRequiredInject.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 46,
+        "order": 44,
         "level": 0
       },
       {
@@ -12493,7 +12467,7 @@
           "filename": "usePagination.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 48,
+        "order": 46,
         "level": 0
       },
       {
@@ -12506,7 +12480,7 @@
           "filename": "useModifiers.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 50,
+        "order": 48,
         "level": 0
       },
       {
@@ -12519,7 +12493,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 52,
+        "order": 50,
         "level": 0
       },
       {
@@ -12532,7 +12506,7 @@
           "filename": "useDocumentTitle.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 55,
+        "order": 53,
         "level": 0
       },
       {
@@ -12545,7 +12519,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 57,
+        "order": 55,
         "level": 0
       },
       {
@@ -12558,6 +12532,32 @@
           "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
       },
@@ -12664,20 +12664,6 @@
         },
         "order": 89
       },
-      {
-        "id": "module:corePlugin",
-        "longname": "module:corePlugin",
-        "name": "corePlugin",
-        "kind": "module",
-        "description": "Core plugin for managing shared configuration for the library.",
-        "meta": {
-          "lineno": 1,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/core"
-        },
-        "order": 111,
-        "level": 0
-      },
       {
         "id": "module:useModals",
         "longname": "module:useModals",
@@ -12688,7 +12674,7 @@
           "filename": "useModals.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 113,
+        "order": 111,
         "level": 0
       },
       {
@@ -12702,7 +12688,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 115,
+        "order": 113,
         "level": 0
       },
       {
@@ -12715,7 +12701,21 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 118,
+        "order": 116,
+        "level": 0
+      },
+      {
+        "id": "module:corePlugin",
+        "longname": "module:corePlugin",
+        "name": "corePlugin",
+        "kind": "module",
+        "description": "Core plugin for managing shared configuration for the library.",
+        "meta": {
+          "lineno": 1,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/core"
+        },
+        "order": 125,
         "level": 0
       },
       {
@@ -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"
         },
@@ -12848,6 +12848,42 @@
         "order": 88,
         "level": 0
       },
+      {
+        "id": "module:modalsPlugin--module.exports",
+        "longname": "module:modalsPlugin",
+        "name": "module.exports",
+        "kind": "function",
+        "isExported": true,
+        "description": "Modals Vue Plugin",
+        "memberof": "module:modalsPlugin",
+        "params": [
+          {
+            "type": {
+              "names": [
+                "Object"
+              ]
+            },
+            "description": "Vue app instance passed to plugin",
+            "name": "App"
+          },
+          {
+            "type": {
+              "names": [
+                "module:modalsPlugin~UluModalsPluginOptions"
+              ]
+            },
+            "description": "Options to change (see defaults)",
+            "name": "userOptions"
+          }
+        ],
+        "meta": {
+          "lineno": 28,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+        },
+        "order": 115,
+        "level": 0
+      },
       {
         "id": "module:corePlugin--module.exports",
         "longname": "module:corePlugin",
@@ -12922,43 +12958,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/core"
         },
-        "order": 112,
-        "level": 0
-      },
-      {
-        "id": "module:modalsPlugin--module.exports",
-        "longname": "module:modalsPlugin",
-        "name": "module.exports",
-        "kind": "function",
-        "isExported": true,
-        "description": "Modals Vue Plugin",
-        "memberof": "module:modalsPlugin",
-        "params": [
-          {
-            "type": {
-              "names": [
-                "Object"
-              ]
-            },
-            "description": "Vue app instance passed to plugin",
-            "name": "App"
-          },
-          {
-            "type": {
-              "names": [
-                "module:modalsPlugin~UluModalsPluginOptions"
-              ]
-            },
-            "description": "Options to change (see defaults)",
-            "name": "userOptions"
-          }
-        ],
-        "meta": {
-          "lineno": 28,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
-        },
-        "order": 117,
+        "order": 126,
         "level": 0
       },
       {
@@ -13031,7 +13031,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 58
+        "order": 56
       },
       {
         "id": "module:useBreakpointManager~defaults.onReady",
@@ -13046,7 +13046,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 59
+        "order": 57
       },
       {
         "id": "module:useBreakpointManager~defaults.plugin",
@@ -13061,7 +13061,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 60
+        "order": 58
       },
       {
         "id": "toast.module:defaults--module.exports",
@@ -13775,7 +13775,7 @@
           "filename": "useModals.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 114,
+        "order": 112,
         "level": 0
       },
       {
@@ -14641,7 +14641,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 33,
+        "order": 31,
         "level": 0
       },
       {
@@ -14695,7 +14695,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 37,
+        "order": 35,
         "level": 0
       },
       {
@@ -14732,7 +14732,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 39,
+        "order": 37,
         "level": 0
       },
       {
@@ -14764,7 +14764,7 @@
           "filename": "useRequiredInject.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 47,
+        "order": 45,
         "level": 0
       },
       {
@@ -14810,7 +14810,7 @@
           "filename": "usePagination.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 49,
+        "order": 47,
         "level": 0
       },
       {
@@ -14883,7 +14883,7 @@
           "filename": "useModifiers.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 51,
+        "order": 49,
         "level": 0
       },
       {
@@ -14909,7 +14909,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 53,
+        "order": 51,
         "level": 0
       },
       {
@@ -14979,7 +14979,7 @@
           "filename": "useDocumentTitle.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 56,
+        "order": 54,
         "level": 0
       },
       {
@@ -15047,7 +15047,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 61,
+        "order": 59,
         "level": 0
       },
       {
@@ -15435,7 +15435,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 120,
+        "order": 118,
         "level": 0
       },
       {
@@ -15451,7 +15451,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 121,
+        "order": 119,
         "level": 0
       },
       {
@@ -15485,7 +15485,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 45,
+        "order": 43,
         "level": 0
       },
       {
@@ -15502,7 +15502,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 119,
+        "order": 117,
         "level": 0
       },
       {
@@ -15519,7 +15519,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 122,
+        "order": 120,
         "level": 0
       },
       {
@@ -15598,7 +15598,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 32,
+        "order": 30,
         "level": 0
       },
       {
@@ -15615,7 +15615,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 40,
+        "order": 38,
         "level": 0
       },
       {
@@ -15632,7 +15632,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 41,
+        "order": 39,
         "level": 0
       },
       {
@@ -15649,7 +15649,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 42,
+        "order": 40,
         "level": 0
       },
       {
@@ -15666,7 +15666,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 43,
+        "order": 41,
         "level": 0
       },
       {
@@ -15683,7 +15683,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 44,
+        "order": 42,
         "level": 0
       },
       {
@@ -15723,7 +15723,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 54,
+        "order": 52,
         "level": 0
       },
       {
@@ -15754,7 +15754,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 123,
+        "order": 121,
         "level": 0
       },
       {
@@ -15780,7 +15780,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 124,
+        "order": 122,
         "level": 0
       },
       {
@@ -15796,7 +15796,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 125,
+        "order": 123,
         "level": 0
       },
       {
@@ -15822,7 +15822,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 126,
+        "order": 124,
         "level": 0
       },
       {
@@ -16177,7 +16177,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 35,
+        "order": 33,
         "level": 0
       },
       {
@@ -16264,7 +16264,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 36,
+        "order": 34,
         "level": 0
       },
       {
@@ -16305,7 +16305,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 116,
+        "order": 114,
         "level": 0
       }
     ],