@ulu/frontend-vue 0.6.33 → 0.6.34

package/dist/mcp-data.json

@@ -20,29 +20,6 @@
       }
     ],
     "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": [],
     "tour": [
       {
         "title": "tour Example 1",
@@ -80,6 +57,29 @@
         "code": "<template>\n  <div class=\"my-custom-floating-drawer\">\n    <h3>Custom Design</h3>\n    <!-- Wire up your own buttons -->\n    <button @click=\"api.next()\">Got it!</button>\n  </div>\n</template>\n\n<script setup>\n  import { useTour } from \"@ulu/frontend-vue\";\n  const { api } = useTour();\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": [],
     "useModals": [],
     "modals": [
       {
@@ -113,6 +113,9 @@
         "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": [],
     "UluSanityRichText": [],
     "UluRouteAnnouncer": [],
     "UluPlaceholderText": [],
@@ -153,13 +156,6 @@
         "code": "<UluAction href=\"{...}\" download>Content</UluAction>"
       }
     ],
-    "UluProgressCircle": [],
-    "UluProgressBar": [],
-    "UluAnimateNumber": [],
-    "UluWhenBreakpoint": [],
-    "UluTitleRail": [],
-    "UluDataGrid": [],
-    "UluAdaptiveLayout": [],
     "UluSkipLink": [
       {
         "title": "Default",
@@ -232,22 +228,10 @@
         "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
       }
     ],
-    "UluSelectableMenu": [],
-    "UluSearchForm": [],
-    "UluFormTextarea": [],
-    "UluFormText": [],
-    "UluFormSelect": [],
-    "UluFormRequiredChar": [],
-    "UluFormRadio": [],
-    "UluFormLabel": [],
-    "UluFormItemsInline": [],
-    "UluFormItem": [],
-    "UluFormFile": [],
-    "UluFormFieldset": [],
-    "UluFormCheckbox": [],
-    "UluFormActions": [],
-    "UluForm": [],
-    "UluFileDisplay": [],
+    "UluWhenBreakpoint": [],
+    "UluTitleRail": [],
+    "UluDataGrid": [],
+    "UluAdaptiveLayout": [],
     "UluTabGroup": [
       {
         "title": "Default",
@@ -276,6 +260,22 @@
     "UluCollapsible": [],
     "UluAccordionGroup": [],
     "UluAccordion": [],
+    "UluSelectableMenu": [],
+    "UluSearchForm": [],
+    "UluFormTextarea": [],
+    "UluFormText": [],
+    "UluFormSelect": [],
+    "UluFormRequiredChar": [],
+    "UluFormRadio": [],
+    "UluFormLabel": [],
+    "UluFormItemsInline": [],
+    "UluFormItem": [],
+    "UluFormFile": [],
+    "UluFormFieldset": [],
+    "UluFormCheckbox": [],
+    "UluFormActions": [],
+    "UluForm": [],
+    "UluFileDisplay": [],
     "UluTag": [],
     "UluTable": [
       {
@@ -499,6 +499,13 @@
       }
     ],
     "UluAlert": [],
+    "UluTableSticky": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluTableSticky columns=\"{...}\" rows=\"{...}\" caption=\"Example Sticky Table\" scrollControls>Content</UluTableSticky>"
+      }
+    ],
     "UluSkeletonText": [],
     "UluSkeletonMedia": [],
     "UluSkeletonContent": [],
@@ -590,13 +597,6 @@
         "code": "<Facets facetFields=\"{...}\" countMode=\"intuitive\">Content</Facets>"
       }
     ],
-    "UluTableSticky": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluTableSticky columns=\"{...}\" rows=\"{...}\" caption=\"Example Sticky Table\" scrollControls>Content</UluTableSticky>"
-      }
-    ],
     "FullFormDemo": [],
     "FrontPage": [
       {
@@ -657,28 +657,28 @@
         "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>"
       }
     ],
-    "core": [
+    "breakpoints": [
       {
-        "title": "core Example 1",
+        "title": "breakpoints Example 1",
         "description": "Code example extracted from markdown.",
-        "code": "<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>"
+        "code": "<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>"
       },
       {
-        "title": "core Example 2",
+        "title": "breakpoints Example 2",
         "description": "Code example extracted from markdown.",
-        "code": "<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>"
+        "code": "<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>"
       }
     ],
-    "breakpoints": [
+    "core": [
       {
-        "title": "breakpoints Example 1",
+        "title": "core Example 1",
         "description": "Code example extracted from markdown.",
-        "code": "<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>"
+        "code": "<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>"
       },
       {
-        "title": "breakpoints Example 2",
+        "title": "core Example 2",
         "description": "Code example extracted from markdown.",
-        "code": "<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>"
+        "code": "<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>"
       }
     ],
     "forms": [],
@@ -1429,6 +1429,125 @@
         }
       ]
     },
+    "UluWhenBreakpoint": {
+      "description": "Vue Component Props, Emits, and Slots for UluWhenBreakpoint",
+      "properties": [
+        {
+          "name": "max",
+          "type": "string",
+          "description": "The maximum breakpoint to show the content at."
+        },
+        {
+          "name": "min",
+          "type": "string",
+          "description": "The minimum breakpoint to show the content at."
+        },
+        {
+          "name": "only",
+          "type": "string",
+          "description": "Only show the content at this breakpoint."
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": ""
+        }
+      ]
+    },
+    "UluTitleRail": {
+      "description": "Vue Component Props, Emits, and Slots for UluTitleRail",
+      "properties": [
+        {
+          "name": "icon",
+          "type": "string",
+          "description": "Icon to display next to the title."
+        },
+        {
+          "name": "iconAlign",
+          "type": "string",
+          "default": "\"baseline\"",
+          "description": "The alignment of the icon with the title."
+        },
+        {
+          "name": "classes",
+          "type": "object",
+          "default": "{\n  title: \"h2\",\n  icon: \"margin-right-small\"\n}",
+          "description": "Classes for the different elements in the component."
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "The title to display."
+        },
+        {
+          "name": "titleElement",
+          "type": "string",
+          "default": "\"h2\"",
+          "description": "The HTML element to use for the title."
+        },
+        {
+          "name": "rule",
+          "type": "boolean",
+          "description": "If true, a rule will be displayed under the title."
+        },
+        {
+          "name": "modifiers",
+          "type": "string|array|object",
+          "description": "Modifiers (to add any modifier classes based on base class)"
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": ""
+        },
+        {
+          "name": "end",
+          "description": ""
+        }
+      ]
+    },
+    "UluDataGrid": {
+      "description": "Vue Component Props, Emits, and Slots for UluDataGrid",
+      "properties": [
+        {
+          "name": "element",
+          "type": "string",
+          "default": "\"div\"",
+          "description": "The element to use on data-grid container"
+        },
+        {
+          "name": "hidden",
+          "type": "boolean",
+          "description": "Tell the component when this grid is actually in a hidden container \n- When value changes the component will properly update position classes"
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": ""
+        }
+      ]
+    },
+    "UluAdaptiveLayout": {
+      "description": "Vue Component Props, Emits, and Slots for UluAdaptiveLayout",
+      "properties": [],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": ""
+        },
+        {
+          "name": "mobile",
+          "description": ""
+        }
+      ]
+    },
     "UluSkipLink": {
       "description": "Vue Component Props, Emits, and Slots for UluSkipLink",
       "properties": [],
@@ -1523,223 +1642,104 @@
           "description": "Hanging style menu"
         },
         {
-          "name": "compact",
-          "type": "boolean",
-          "description": "Compact style menu"
-        },
-        {
-          "name": "noChildren",
-          "type": "boolean",
-          "description": "Don't include children of menu"
-        },
-        {
-          "name": "modifiers",
-          "type": "string|array|object",
-          "description": "Class modifiers (ie. 'transparent', 'secondary', etc)"
-        }
-      ],
-      "events": [],
-      "slots": [
-        {
-          "name": "name",
-          "description": ""
-        }
-      ]
-    },
-    "UluMenu": {
-      "description": "Vue Component Props, Emits, and Slots for UluMenu",
-      "properties": [
-        {
-          "name": "items",
-          "type": "array",
-          "description": "Items Array of Objects for each link\n[{\n  title: String (title of link)\n  icon: Icon definition passed to UluIcon\n  tag: Tag appearing after link text (count/etc), pass props you want bound to tag\n  tooltip: Add tooltip to menu item (pass options for tooltip), unless iconOnly than the title is presented in the tooltip\n  href: Will result in <a>\n  click: Will be called on click and result in <button>\n  to: Will result in <a> and use vue-router router-link component\n}]"
-        },
-        {
-          "name": "classes",
-          "type": "object",
-          "default": "{}",
-          "description": "Classes object to add class bindings to the different elements\n- { list, item, link, linkActive, linkExactActive, linkIcon, linkText }"
-        },
-        {
-          "name": "iconOnly",
-          "type": "boolean",
-          "description": "Use icon only version of menu"
-        },
-        {
-          "name": "noChildren",
-          "type": "boolean",
-          "description": "Do not print menu items children recursively"
-        }
-      ],
-      "events": [
-        {
-          "name": "item-click",
-          "description": "Fired anytime a item is clicked"
-        }
-      ],
-      "slots": [
-        {
-          "name": "default",
-          "description": ""
-        },
-        {
-          "name": "item",
-          "description": ""
-        },
-        {
-          "name": "name",
-          "description": ""
-        }
-      ]
-    },
-    "UluBreadcrumb": {
-      "description": "Vue Component Props, Emits, and Slots for UluBreadcrumb",
-      "properties": [
-        {
-          "name": "items",
-          "type": "array",
-          "default": "[]",
-          "description": "Array of breadcrumb items.\nEach item is an object: { title: String, to: [String, Object], current: Boolean }"
-        },
-        {
-          "name": "separatorIcon",
-          "type": "string",
-          "description": "Icon to use as a separator."
-        },
-        {
-          "name": "classes",
-          "type": "object",
-          "default": "{\n  nav: \"breadcrumb\",\n  list: \"breadcrumb__list\",\n  item: \"breadcrumb__item\",\n  link: \"breadcrumb__link\",\n  current: \"breadcrumb__current\",\n  separator: \"breadcrumb__separator\"\n}",
-          "description": "Classes object to be applied to elements.\nKeys: nav, list, item, link, current, separator"
-        }
-      ],
-      "events": [],
-      "slots": [
-        {
-          "name": "default",
-          "description": ""
-        },
-        {
-          "name": "separator",
-          "description": ""
-        }
-      ]
-    },
-    "UluWhenBreakpoint": {
-      "description": "Vue Component Props, Emits, and Slots for UluWhenBreakpoint",
-      "properties": [
-        {
-          "name": "max",
-          "type": "string",
-          "description": "The maximum breakpoint to show the content at."
-        },
-        {
-          "name": "min",
-          "type": "string",
-          "description": "The minimum breakpoint to show the content at."
+          "name": "compact",
+          "type": "boolean",
+          "description": "Compact style menu"
         },
         {
-          "name": "only",
-          "type": "string",
-          "description": "Only show the content at this breakpoint."
+          "name": "noChildren",
+          "type": "boolean",
+          "description": "Don't include children of menu"
+        },
+        {
+          "name": "modifiers",
+          "type": "string|array|object",
+          "description": "Class modifiers (ie. 'transparent', 'secondary', etc)"
         }
       ],
       "events": [],
       "slots": [
         {
-          "name": "default",
+          "name": "name",
           "description": ""
         }
       ]
     },
-    "UluTitleRail": {
-      "description": "Vue Component Props, Emits, and Slots for UluTitleRail",
+    "UluMenu": {
+      "description": "Vue Component Props, Emits, and Slots for UluMenu",
       "properties": [
         {
-          "name": "icon",
-          "type": "string",
-          "description": "Icon to display next to the title."
-        },
-        {
-          "name": "iconAlign",
-          "type": "string",
-          "default": "\"baseline\"",
-          "description": "The alignment of the icon with the title."
+          "name": "items",
+          "type": "array",
+          "description": "Items Array of Objects for each link\n[{\n  title: String (title of link)\n  icon: Icon definition passed to UluIcon\n  tag: Tag appearing after link text (count/etc), pass props you want bound to tag\n  tooltip: Add tooltip to menu item (pass options for tooltip), unless iconOnly than the title is presented in the tooltip\n  href: Will result in <a>\n  click: Will be called on click and result in <button>\n  to: Will result in <a> and use vue-router router-link component\n}]"
         },
         {
           "name": "classes",
           "type": "object",
-          "default": "{\n  title: \"h2\",\n  icon: \"margin-right-small\"\n}",
-          "description": "Classes for the different elements in the component."
-        },
-        {
-          "name": "title",
-          "type": "string",
-          "description": "The title to display."
+          "default": "{}",
+          "description": "Classes object to add class bindings to the different elements\n- { list, item, link, linkActive, linkExactActive, linkIcon, linkText }"
         },
         {
-          "name": "titleElement",
-          "type": "string",
-          "default": "\"h2\"",
-          "description": "The HTML element to use for the title."
+          "name": "iconOnly",
+          "type": "boolean",
+          "description": "Use icon only version of menu"
         },
         {
-          "name": "rule",
+          "name": "noChildren",
           "type": "boolean",
-          "description": "If true, a rule will be displayed under the title."
-        },
+          "description": "Do not print menu items children recursively"
+        }
+      ],
+      "events": [
         {
-          "name": "modifiers",
-          "type": "string|array|object",
-          "description": "Modifiers (to add any modifier classes based on base class)"
+          "name": "item-click",
+          "description": "Fired anytime a item is clicked"
         }
       ],
-      "events": [],
       "slots": [
         {
           "name": "default",
           "description": ""
         },
         {
-          "name": "end",
+          "name": "item",
+          "description": ""
+        },
+        {
+          "name": "name",
           "description": ""
         }
       ]
     },
-    "UluDataGrid": {
-      "description": "Vue Component Props, Emits, and Slots for UluDataGrid",
+    "UluBreadcrumb": {
+      "description": "Vue Component Props, Emits, and Slots for UluBreadcrumb",
       "properties": [
         {
-          "name": "element",
+          "name": "items",
+          "type": "array",
+          "default": "[]",
+          "description": "Array of breadcrumb items.\nEach item is an object: { title: String, to: [String, Object], current: Boolean }"
+        },
+        {
+          "name": "separatorIcon",
           "type": "string",
-          "default": "\"div\"",
-          "description": "The element to use on data-grid container"
+          "description": "Icon to use as a separator."
         },
         {
-          "name": "hidden",
-          "type": "boolean",
-          "description": "Tell the component when this grid is actually in a hidden container \n- When value changes the component will properly update position classes"
+          "name": "classes",
+          "type": "object",
+          "default": "{\n  nav: \"breadcrumb\",\n  list: \"breadcrumb__list\",\n  item: \"breadcrumb__item\",\n  link: \"breadcrumb__link\",\n  current: \"breadcrumb__current\",\n  separator: \"breadcrumb__separator\"\n}",
+          "description": "Classes object to be applied to elements.\nKeys: nav, list, item, link, current, separator"
         }
       ],
       "events": [],
-      "slots": [
-        {
-          "name": "default",
-          "description": ""
-        }
-      ]
-    },
-    "UluAdaptiveLayout": {
-      "description": "Vue Component Props, Emits, and Slots for UluAdaptiveLayout",
-      "properties": [],
-      "events": [],
       "slots": [
         {
           "name": "default",
           "description": ""
         },
         {
-          "name": "mobile",
+          "name": "separator",
           "description": ""
         }
       ]
@@ -6217,34 +6217,210 @@
             }
           },
           {
-            "name": "exactActiveClass",
-            "description": "Vue Router exact active class override.",
+            "name": "exactActiveClass",
+            "description": "Vue Router exact active class override.",
+            "type": {
+              "name": "string"
+            }
+          },
+          {
+            "name": "click",
+            "description": "Allows passing 'click' as a prop to signify this is an action (used in UluMenu data objects).\nNote: The actual @click listener should be attached via fallthrough attrs, this is just for logic routing.",
+            "type": {
+              "name": "func"
+            }
+          },
+          {
+            "name": "type",
+            "description": "Button type (e.g. 'submit', 'reset', 'button'). Defaults to 'button' to prevent accidental form submissions.",
+            "type": {
+              "name": "string"
+            }
+          }
+        ],
+        "slots": [
+          {
+            "name": "default"
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/utils/UluAction.vue"
+        ]
+      }
+    },
+    "UluWhenBreakpoint": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluWhenBreakpoint",
+        "description": "",
+        "tags": {},
+        "props": [
+          {
+            "name": "max",
+            "description": "The maximum breakpoint to show the content at.",
+            "type": {
+              "name": "string"
+            }
+          },
+          {
+            "name": "min",
+            "description": "The minimum breakpoint to show the content at.",
+            "type": {
+              "name": "string"
+            }
+          },
+          {
+            "name": "only",
+            "description": "Only show the content at this breakpoint.",
+            "type": {
+              "name": "string"
+            }
+          }
+        ],
+        "slots": [
+          {
+            "name": "default"
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/layout/UluWhenBreakpoint.vue"
+        ]
+      }
+    },
+    "UluTitleRail": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluTitleRail",
+        "description": "",
+        "tags": {},
+        "props": [
+          {
+            "name": "icon",
+            "description": "Icon to display next to the title.",
+            "type": {
+              "name": "string"
+            }
+          },
+          {
+            "name": "iconAlign",
+            "description": "The alignment of the icon with the title.",
+            "type": {
+              "name": "string"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "\"baseline\""
+            }
+          },
+          {
+            "name": "classes",
+            "description": "Classes for the different elements in the component.",
+            "type": {
+              "name": "object"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "{\n  title: \"h2\",\n  icon: \"margin-right-small\"\n}"
+            }
+          },
+          {
+            "name": "title",
+            "description": "The title to display.",
+            "type": {
+              "name": "string"
+            }
+          },
+          {
+            "name": "titleElement",
+            "description": "The HTML element to use for the title.",
+            "type": {
+              "name": "string"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "\"h2\""
+            }
+          },
+          {
+            "name": "rule",
+            "description": "If true, a rule will be displayed under the title.",
+            "type": {
+              "name": "boolean"
+            }
+          },
+          {
+            "name": "modifiers",
+            "description": "Modifiers (to add any modifier classes based on base class)",
+            "type": {
+              "name": "string|array|object"
+            }
+          }
+        ],
+        "slots": [
+          {
+            "name": "default"
+          },
+          {
+            "name": "end"
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/layout/UluTitleRail.vue"
+        ]
+      }
+    },
+    "UluDataGrid": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluDataGrid",
+        "description": "",
+        "tags": {},
+        "props": [
+          {
+            "name": "element",
+            "description": "The element to use on data-grid container",
             "type": {
               "name": "string"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "\"div\""
             }
           },
           {
-            "name": "click",
-            "description": "Allows passing 'click' as a prop to signify this is an action (used in UluMenu data objects).\nNote: The actual @click listener should be attached via fallthrough attrs, this is just for logic routing.",
+            "name": "hidden",
+            "description": "Tell the component when this grid is actually in a hidden container \n- When value changes the component will properly update position classes",
             "type": {
-              "name": "func"
+              "name": "boolean"
             }
-          },
+          }
+        ],
+        "slots": [
           {
-            "name": "type",
-            "description": "Button type (e.g. 'submit', 'reset', 'button'). Defaults to 'button' to prevent accidental form submissions.",
-            "type": {
-              "name": "string"
-            }
+            "name": "default"
           }
         ],
+        "sourceFiles": [
+          "lib/components/layout/UluDataGrid.vue"
+        ]
+      }
+    },
+    "UluAdaptiveLayout": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluAdaptiveLayout",
+        "description": "",
+        "tags": {},
         "slots": [
           {
             "name": "default"
+          },
+          {
+            "name": "mobile"
           }
         ],
         "sourceFiles": [
-          "lib/components/utils/UluAction.vue"
+          "lib/components/layout/UluAdaptiveLayout.vue"
         ]
       }
     },
@@ -6594,182 +6770,6 @@
         ]
       }
     },
-    "UluWhenBreakpoint": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluWhenBreakpoint",
-        "description": "",
-        "tags": {},
-        "props": [
-          {
-            "name": "max",
-            "description": "The maximum breakpoint to show the content at.",
-            "type": {
-              "name": "string"
-            }
-          },
-          {
-            "name": "min",
-            "description": "The minimum breakpoint to show the content at.",
-            "type": {
-              "name": "string"
-            }
-          },
-          {
-            "name": "only",
-            "description": "Only show the content at this breakpoint.",
-            "type": {
-              "name": "string"
-            }
-          }
-        ],
-        "slots": [
-          {
-            "name": "default"
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/layout/UluWhenBreakpoint.vue"
-        ]
-      }
-    },
-    "UluTitleRail": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluTitleRail",
-        "description": "",
-        "tags": {},
-        "props": [
-          {
-            "name": "icon",
-            "description": "Icon to display next to the title.",
-            "type": {
-              "name": "string"
-            }
-          },
-          {
-            "name": "iconAlign",
-            "description": "The alignment of the icon with the title.",
-            "type": {
-              "name": "string"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "\"baseline\""
-            }
-          },
-          {
-            "name": "classes",
-            "description": "Classes for the different elements in the component.",
-            "type": {
-              "name": "object"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "{\n  title: \"h2\",\n  icon: \"margin-right-small\"\n}"
-            }
-          },
-          {
-            "name": "title",
-            "description": "The title to display.",
-            "type": {
-              "name": "string"
-            }
-          },
-          {
-            "name": "titleElement",
-            "description": "The HTML element to use for the title.",
-            "type": {
-              "name": "string"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "\"h2\""
-            }
-          },
-          {
-            "name": "rule",
-            "description": "If true, a rule will be displayed under the title.",
-            "type": {
-              "name": "boolean"
-            }
-          },
-          {
-            "name": "modifiers",
-            "description": "Modifiers (to add any modifier classes based on base class)",
-            "type": {
-              "name": "string|array|object"
-            }
-          }
-        ],
-        "slots": [
-          {
-            "name": "default"
-          },
-          {
-            "name": "end"
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/layout/UluTitleRail.vue"
-        ]
-      }
-    },
-    "UluDataGrid": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluDataGrid",
-        "description": "",
-        "tags": {},
-        "props": [
-          {
-            "name": "element",
-            "description": "The element to use on data-grid container",
-            "type": {
-              "name": "string"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "\"div\""
-            }
-          },
-          {
-            "name": "hidden",
-            "description": "Tell the component when this grid is actually in a hidden container \n- When value changes the component will properly update position classes",
-            "type": {
-              "name": "boolean"
-            }
-          }
-        ],
-        "slots": [
-          {
-            "name": "default"
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/layout/UluDataGrid.vue"
-        ]
-      }
-    },
-    "UluAdaptiveLayout": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluAdaptiveLayout",
-        "description": "",
-        "tags": {},
-        "slots": [
-          {
-            "name": "default"
-          },
-          {
-            "name": "mobile"
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/layout/UluAdaptiveLayout.vue"
-        ]
-      }
-    },
     "UluSelectableMenu": {
       "raw_ast_dump": {
         "exportName": "default",
@@ -12629,12 +12629,12 @@
     "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"
     },
+    "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"
+    },
     "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"
     },
@@ -13536,6 +13536,16 @@
             "description": "Global class applied to the pager.",
             "name": "tour.pagerClass"
           },
+          {
+            "type": {
+              "names": [
+                "function"
+              ]
+            },
+            "optional": true,
+            "description": "Async hook called before the tour starts.",
+            "name": "tour.onStart"
+          },
           {
             "type": {
               "names": [
@@ -13548,7 +13558,7 @@
           }
         ],
         "meta": {
-          "lineno": 40,
+          "lineno": 41,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13562,7 +13572,7 @@
         "scope": "global",
         "description": "Advances the tour to the next step, or stops if it is the last step",
         "meta": {
-          "lineno": 49,
+          "lineno": 59,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13576,7 +13586,7 @@
         "scope": "global",
         "description": "Returns the tour to the previous step",
         "meta": {
-          "lineno": 65,
+          "lineno": 81,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13589,8 +13599,21 @@
         "kind": "function",
         "scope": "global",
         "description": "Stops and closes the current tour",
+        "params": [
+          {
+            "type": {
+              "names": [
+                "Boolean"
+              ]
+            },
+            "optional": true,
+            "defaultvalue": false,
+            "description": "Used internally to bypass transition check",
+            "name": "internalBypass"
+          }
+        ],
         "meta": {
-          "lineno": 79,
+          "lineno": 102,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13615,7 +13638,7 @@
           }
         ],
         "meta": {
-          "lineno": 96,
+          "lineno": 125,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13640,7 +13663,7 @@
           }
         ],
         "meta": {
-          "lineno": 105,
+          "lineno": 134,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },