@ulu/frontend-vue 0.6.34 → 0.6.36

package/dist/mcp-data.json

@@ -39,21 +39,26 @@
       {
         "title": "tour Example 4",
         "description": "Code example extracted from markdown.",
-        "code": "<template>\n  <button @click=\"startTour\">Start Tour</button>\n</template>\n\n<script setup>\n  import { useTour } from \"@ulu/frontend-vue\";\n\n  const { api } = useTour();\n\n  const startTour = () => {\n    api.start(demoTour);\n  };\n</script>"
+        "code": "const comprehensiveTour = {\n  // Optional identifier for the tour\n  name: 'my-feature-tour',\n  \n  // --- GLOBAL LIFECYCLE HOOKS ---\n  // Async hook called right before the tour initializes\n  onStart: async () => {\n    console.log('Tour is starting! Preparing UI...');\n  },\n  // Async hook called when the tour stops/closes (via api.stop() or the last step)\n  onStop: async () => {\n    console.log('Tour finished! Cleaning up...');\n  },\n\n  // --- GLOBAL COMPONENT OVERRIDES ---\n  // Replace the structural layout for ALL steps by default\n  component: MyFullTakeoverComponent,         // Bypasses Modal/Popover completely\n  modalComponent: MyCustomModalWrapper,       // Replaces UluModal wrapper\n  popoverComponent: MyCustomPopoverWrapper,   // Replaces UluPopoverBase wrapper\n  contentComponent: MyCustomContentLayout,    // Replaces the inner text layout\n  pagerComponent: MyCustomPaginationFooter,   // Replaces the UluTourPager (Next/Back footer)\n  \n  // --- GLOBAL PROP OVERRIDES ---\n  modalProps: { size: 'large' },             // Props passed to every Modal step\n  popoverProps: { modifiers: 'large' },      // Props passed to every Popover step\n  modalTitleClass: ['h3', 'text-primary'],   // Typography classes for Modal titles\n  popoverTitleClass: ['h4', 'text-primary'], // Typography classes for Popover titles\n  pagerClass: ['margin-top-large'],          // Classes applied to the pager footer wrapper\n  progressClass: 'headline-label',           // Classes applied to the progress indicator\n  hideProgress: false,                       // Globally hides the progress indicator (\"Part 1 / 3\")\n\n  // --- STEP DEFINITIONS ---\n  steps: [\n    {\n      // --- CORE ---\n      // Target: String (CSS Selector), DOM HTMLElement, or a Function returning either (or a ref).\n      // If the target is omitted or the function returns falsy, it renders as a Modal.\n      target: () => window.innerWidth > 768 ? '#desktop-sidebar' : null,\n      \n      // Highlight Element: String, DOM HTMLElement, Function or Ref. \n      // Used for the backdrop highlight if it needs to be different from the target. Falls back to target if omitted.\n      highlightElement: () => window.innerWidth > 768 ? '#desktop-sidebar-container' : null,\n      \n      title: 'Step Title',\n      content: 'Step body content.',\n\n      // --- STYLING & POSITIONING ---\n      placement: 'right', // Floating UI placement (e.g. 'bottom', 'left-start')\n      highlight: true,    // Dims the background around the target element\n      titleClass: 'custom-title', // Override global title classes for this step\n      pagerClass: 'custom-pager', // Override global pager classes for this step\n      modalProps: {},     // Step-specific props for UluModal\n      popoverProps: {},   // Step-specific props for UluPopoverBase\n      \n      // --- COMPONENT OVERRIDES (Step Level) ---\n      // These override the global tour configurations above for this specific step.\n      component: null, \n      contentComponent: null, \n      pagerComponent: null,\n      modalComponent: null,\n      popoverComponent: null,\n      componentProps: { }, // Props passed down to custom component overrides\n\n      // --- BEHAVIOR ---\n      hideFooter: false,   // If true, the pager (Next/Prev) is not rendered\n      hideProgress: false, // If true, hides the \"Part X / Y\" progress indicator for this step\n      \n      // Boolean or Sync/Async function. If true, the step is bypassed dynamically!\n      skip: async () => await checkUserSettings('sawFeature1'),\n\n      // --- STEP LIFECYCLE HOOKS ---\n      // Awaited right before the step transitions in\n      onEnter: async () => {\n        await openSidebarMenu();\n      },\n      // Awaited right before the step transitions out (either forward or backward)\n      onLeave: async () => {\n        await closeSidebarMenu();\n      }\n    }\n  ]\n};"
       },
       {
         "title": "tour Example 5",
         "description": "Code example extracted from markdown.",
-        "code": "this.$uluTour.start(demoTour);\nthis.$uluTour.next();\nthis.$uluTour.prev();\nthis.$uluTour.stop();"
+        "code": "<template>\n  <button @click=\"startTour\">Start Tour</button>\n</template>\n\n<script setup>\n  import { useTour } from \"@ulu/frontend-vue\";\n\n  const { api } = useTour();\n\n  const startTour = () => {\n    api.start(demoTour);\n  };\n</script>"
       },
       {
         "title": "tour Example 6",
         "description": "Code example extracted from markdown.",
-        "code": "<template>\n  <div style=\"text-align: center;\">\n    <img src=\"/logo.png\" />\n    <p>This is my custom graphic step.</p>\n  </div>\n</template>"
+        "code": "this.$uluTour.start(demoTour);\nthis.$uluTour.next();\nthis.$uluTour.prev();\nthis.$uluTour.stop();"
       },
       {
         "title": "tour Example 7",
         "description": "Code example extracted from markdown.",
+        "code": "<template>\n  <div style=\"text-align: center;\">\n    <img src=\"/logo.png\" />\n    <p>This is my custom graphic step.</p>\n  </div>\n</template>"
+      },
+      {
+        "title": "tour Example 8",
+        "description": "Code example extracted from markdown.",
         "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>"
       }
     ],
@@ -64,22 +69,6 @@
         "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,49 +102,25 @@
         "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": [],
-    "UluPlaceholderImage": [],
-    "UluEmptyView": [],
-    "UluEmpty": [],
-    "UluConditionalWrapper": [],
-    "UluConditionalText": [],
-    "UluAction": [
-      {
-        "title": "AsButton",
-        "description": "AsButton variation",
-        "code": "<UluAction>Content</UluAction>"
-      },
-      {
-        "title": "AsAnchor",
-        "description": "AsAnchor variation",
-        "code": "<UluAction href=\"https://example.com\" target=\"_blank\">Content</UluAction>"
-      },
-      {
-        "title": "AsRouterLink",
-        "description": "AsRouterLink variation",
-        "code": "<UluAction to=\"/about\">Content</UluAction>"
-      },
-      {
-        "title": "ExplicitElementOverride",
-        "description": "ExplicitElementOverride variation",
-        "code": "<UluAction element=\"span\">Content</UluAction>"
-      },
+    "useTooltipFollow": [
       {
-        "title": "DownloadWithFilename",
-        "description": "DownloadWithFilename variation",
-        "code": "<UluAction href=\"{...}\" download=\"download-test.txt\">Content</UluAction>"
-      },
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<useTooltipFollow>Content</useTooltipFollow>"
+      }
+    ],
+    "useTooltip": [],
+    "tooltip": [
       {
-        "title": "TestDownloadWithoutFilename",
-        "description": "TestDownloadWithoutFilename variation",
-        "code": "<UluAction href=\"{...}\" download>Content</UluAction>"
+        "title": "Basic",
+        "description": "Basic variation",
+        "code": "<tooltip>This is a basic tooltip!</tooltip>"
       }
     ],
+    "UluPopover": [],
+    "UluProgressCircle": [],
+    "UluProgressBar": [],
+    "UluAnimateNumber": [],
     "UluSkipLink": [
       {
         "title": "Default",
@@ -228,10 +193,66 @@
         "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
       }
     ],
+    "UluSanityRichText": [],
+    "UluRouteAnnouncer": [],
+    "UluPlaceholderText": [],
+    "UluPlaceholderImage": [],
+    "UluEmptyView": [],
+    "UluEmpty": [],
+    "UluConditionalWrapper": [],
+    "UluConditionalText": [],
+    "UluAction": [
+      {
+        "title": "AsButton",
+        "description": "AsButton variation",
+        "code": "<UluAction>Content</UluAction>"
+      },
+      {
+        "title": "AsAnchor",
+        "description": "AsAnchor variation",
+        "code": "<UluAction href=\"https://example.com\" target=\"_blank\">Content</UluAction>"
+      },
+      {
+        "title": "AsRouterLink",
+        "description": "AsRouterLink variation",
+        "code": "<UluAction to=\"/about\">Content</UluAction>"
+      },
+      {
+        "title": "ExplicitElementOverride",
+        "description": "ExplicitElementOverride variation",
+        "code": "<UluAction element=\"span\">Content</UluAction>"
+      },
+      {
+        "title": "DownloadWithFilename",
+        "description": "DownloadWithFilename variation",
+        "code": "<UluAction href=\"{...}\" download=\"download-test.txt\">Content</UluAction>"
+      },
+      {
+        "title": "TestDownloadWithoutFilename",
+        "description": "TestDownloadWithoutFilename variation",
+        "code": "<UluAction href=\"{...}\" download>Content</UluAction>"
+      }
+    ],
     "UluWhenBreakpoint": [],
     "UluTitleRail": [],
     "UluDataGrid": [],
     "UluAdaptiveLayout": [],
+    "UluSelectableMenu": [],
+    "UluSearchForm": [],
+    "UluFormTextarea": [],
+    "UluFormText": [],
+    "UluFormSelect": [],
+    "UluFormRequiredChar": [],
+    "UluFormRadio": [],
+    "UluFormLabel": [],
+    "UluFormItemsInline": [],
+    "UluFormItem": [],
+    "UluFormFile": [],
+    "UluFormFieldset": [],
+    "UluFormCheckbox": [],
+    "UluFormActions": [],
+    "UluForm": [],
+    "UluFileDisplay": [],
     "UluTabGroup": [
       {
         "title": "Default",
@@ -260,22 +281,6 @@
     "UluCollapsible": [],
     "UluAccordionGroup": [],
     "UluAccordion": [],
-    "UluSelectableMenu": [],
-    "UluSearchForm": [],
-    "UluFormTextarea": [],
-    "UluFormText": [],
-    "UluFormSelect": [],
-    "UluFormRequiredChar": [],
-    "UluFormRadio": [],
-    "UluFormLabel": [],
-    "UluFormItemsInline": [],
-    "UluFormItem": [],
-    "UluFormFile": [],
-    "UluFormFieldset": [],
-    "UluFormCheckbox": [],
-    "UluFormActions": [],
-    "UluForm": [],
-    "UluFileDisplay": [],
     "UluTag": [],
     "UluTable": [
       {
@@ -499,13 +504,6 @@
       }
     ],
     "UluAlert": [],
-    "UluTableSticky": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluTableSticky columns=\"{...}\" rows=\"{...}\" caption=\"Example Sticky Table\" scrollControls>Content</UluTableSticky>"
-      }
-    ],
     "UluSkeletonText": [],
     "UluSkeletonMedia": [],
     "UluSkeletonContent": [],
@@ -517,6 +515,13 @@
         "code": "<CardExample horizontal>Content</CardExample>"
       }
     ],
+    "UluTableSticky": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluTableSticky columns=\"{...}\" rows=\"{...}\" caption=\"Example Sticky Table\" scrollControls>Content</UluTableSticky>"
+      }
+    ],
     "UluScrollAnchorsNavAnimated": [],
     "UluScrollAnchorsNav": [],
     "UluScrollAnchorsHeadlessSection": [],
@@ -657,28 +662,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>"
       }
     ],
-    "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>"
       }
     ],
-    "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>"
       }
     ],
     "forms": [],
@@ -742,39 +747,6 @@
       "events": [],
       "slots": []
     },
-    "UluToastDisplay": {
-      "description": "Vue Component Props, Emits, and Slots for UluToastDisplay",
-      "properties": [],
-      "events": [],
-      "slots": []
-    },
-    "UluToast": {
-      "description": "Vue Component Props, Emits, and Slots for UluToast",
-      "properties": [
-        {
-          "name": "toast",
-          "type": "object",
-          "description": "Toast configuration"
-        },
-        {
-          "name": "classes",
-          "type": "object|boolean|func",
-          "default": "() => ({})",
-          "description": "Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }"
-        }
-      ],
-      "events": [],
-      "slots": [
-        {
-          "name": "icon",
-          "description": ""
-        },
-        {
-          "name": "content",
-          "description": ""
-        }
-      ]
-    },
     "UluTooltipPopover": {
       "description": "Vue Component Props, Emits, and Slots for UluTooltipPopover",
       "properties": [
@@ -964,6 +936,39 @@
         }
       ]
     },
+    "UluToastDisplay": {
+      "description": "Vue Component Props, Emits, and Slots for UluToastDisplay",
+      "properties": [],
+      "events": [],
+      "slots": []
+    },
+    "UluToast": {
+      "description": "Vue Component Props, Emits, and Slots for UluToast",
+      "properties": [
+        {
+          "name": "toast",
+          "type": "object",
+          "description": "Toast configuration"
+        },
+        {
+          "name": "classes",
+          "type": "object|boolean|func",
+          "default": "() => ({})",
+          "description": "Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }"
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "icon",
+          "description": ""
+        },
+        {
+          "name": "content",
+          "description": ""
+        }
+      ]
+    },
     "UluModalsDisplay": {
       "description": "Vue Component Props, Emits, and Slots for UluModalsDisplay",
       "properties": [],
@@ -1212,225 +1217,8 @@
         }
       ]
     },
-    "UluSanityRichText": {
-      "description": "Vue Component Props, Emits, and Slots for UluSanityRichText",
-      "properties": [
-        {
-          "name": "content",
-          "type": "array",
-          "description": "The array of Portable Text blocks to render."
-        },
-        {
-          "name": "noWrapper",
-          "type": "boolean",
-          "default": "false",
-          "description": "If true, the output will not be wrapped in a div with the 'wysiwyg' class."
-        }
-      ],
-      "events": [],
-      "slots": []
-    },
-    "UluRouteAnnouncer": {
-      "description": "Vue Component Props, Emits, and Slots for UluRouteAnnouncer",
-      "properties": [
-        {
-          "name": "validator",
-          "type": "func",
-          "default": "() => true",
-          "description": "Allow user to bypass this functionality\n- Function should return true if the page should be announced\n- Function is passed (to, from) => {}\n  - to/from are RouteLocationNormalizedLoaded objects"
-        },
-        {
-          "name": "exclude",
-          "type": "array",
-          "default": "[]",
-          "description": "Array of paths to exclude\n- Can be exact path \"/about\" \n- Or can be path with wildcard \"/about/*\" (match all paths under about)"
-        },
-        {
-          "name": "getTitle",
-          "type": "func",
-          "default": "(route) => getRouteTitle(route)",
-          "description": "Function to retrieve routes title"
-        },
-        {
-          "name": "debug",
-          "type": "boolean",
-          "description": "Enable debug logging"
-        }
-      ],
-      "events": [],
-      "slots": []
-    },
-    "UluPlaceholderText": {
-      "description": "Vue Component Props, Emits, and Slots for UluPlaceholderText",
-      "properties": [
-        {
-          "name": "amount",
-          "type": "number",
-          "default": "1",
-          "description": ""
-        },
-        {
-          "name": "element",
-          "type": "string",
-          "default": "\"p\"",
-          "description": ""
-        }
-      ],
-      "events": [],
-      "slots": []
-    },
-    "UluPlaceholderImage": {
-      "description": "Vue Component Props, Emits, and Slots for UluPlaceholderImage",
-      "properties": [
-        {
-          "name": "imageId",
-          "type": "string",
-          "description": ""
-        },
-        {
-          "name": "width",
-          "type": "string|number",
-          "default": "\"300\"",
-          "description": "Width of the image"
-        },
-        {
-          "name": "height",
-          "type": "string|number",
-          "default": "\"400\"",
-          "description": "Height of the image"
-        },
-        {
-          "name": "alt",
-          "type": "string",
-          "description": "Alt text for placeholder image"
-        },
-        {
-          "name": "random",
-          "type": "boolean",
-          "description": "Random size"
-        }
-      ],
-      "events": [],
-      "slots": []
-    },
-    "UluEmptyView": {
-      "description": "Vue Component Props, Emits, and Slots for UluEmptyView",
-      "properties": [],
-      "events": [],
-      "slots": []
-    },
-    "UluEmpty": {
-      "description": "Vue Component Props, Emits, and Slots for UluEmpty",
-      "properties": [],
-      "events": [],
-      "slots": []
-    },
-    "UluConditionalWrapper": {
-      "description": "Vue Component Props, Emits, and Slots for UluConditionalWrapper",
-      "properties": [
-        {
-          "name": "is",
-          "type": "string|object|func",
-          "default": "'div'",
-          "description": "The underlying component or HTML tag to render.\nCan be a string like 'div' or an imported component object."
-        },
-        {
-          "name": "unwrapped",
-          "type": "boolean",
-          "default": "false",
-          "description": "If true, the wrapper will not be rendered and the content\nwill be output directly."
-        }
-      ],
-      "events": [],
-      "slots": [
-        {
-          "name": "default",
-          "description": ""
-        }
-      ]
-    },
-    "UluConditionalText": {
-      "description": "Vue Component Props, Emits, and Slots for UluConditionalText",
-      "properties": [
-        {
-          "name": "text",
-          "type": "string|number|array|object",
-          "description": "Text to print in element"
-        },
-        {
-          "name": "element",
-          "type": "string",
-          "default": "\"p\"",
-          "description": "Element type to render (ie. h1, h2, p, etc)"
-        }
-      ],
-      "events": [],
-      "slots": []
-    },
-    "UluAction": {
-      "description": "Vue Component Props, Emits, and Slots for UluAction",
-      "properties": [
-        {
-          "name": "to",
-          "type": "string|object",
-          "description": "Router link target."
-        },
-        {
-          "name": "path",
-          "type": "string",
-          "description": "Alternative to 'to' (used in some legacy or specific data structures like UluMenu items)."
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "description": "Standard URL for native anchor tags."
-        },
-        {
-          "name": "target",
-          "type": "string",
-          "description": "Target attribute for anchor tags (e.g. '_blank')."
-        },
-        {
-          "name": "download",
-          "type": "boolean|string",
-          "description": "Download attribute for anchor tags."
-        },
-        {
-          "name": "element",
-          "type": "string",
-          "description": "Optional explicit element to use (e.g., if you need 'div' or 'span' instead of a button)."
-        },
-        {
-          "name": "activeClass",
-          "type": "string",
-          "description": "Vue Router active class override."
-        },
-        {
-          "name": "exactActiveClass",
-          "type": "string",
-          "description": "Vue Router exact active class override."
-        },
-        {
-          "name": "click",
-          "type": "func",
-          "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": "type",
-          "type": "string",
-          "description": "Button type (e.g. 'submit', 'reset', 'button'). Defaults to 'button' to prevent accidental form submissions."
-        }
-      ],
-      "events": [],
-      "slots": [
-        {
-          "name": "default",
-          "description": ""
-        }
-      ]
-    },
-    "UluWhenBreakpoint": {
-      "description": "Vue Component Props, Emits, and Slots for UluWhenBreakpoint",
+    "UluWhenBreakpoint": {
+      "description": "Vue Component Props, Emits, and Slots for UluWhenBreakpoint",
       "properties": [
         {
           "name": "max",
@@ -1744,32 +1532,249 @@
         }
       ]
     },
-    "UluSelectableMenu": {
-      "description": "Vue Component Props, Emits, and Slots for UluSelectableMenu",
+    "UluSanityRichText": {
+      "description": "Vue Component Props, Emits, and Slots for UluSanityRichText",
       "properties": [
         {
-          "name": "legend",
-          "type": "string",
-          "description": "The legend for the menu."
-        },
-        {
-          "name": "options",
+          "name": "content",
           "type": "array",
-          "description": "An array of options for the menu."
+          "description": "The array of Portable Text blocks to render."
         },
         {
-          "name": "compact",
+          "name": "noWrapper",
           "type": "boolean",
-          "description": "Use compact modifier on menu stack"
+          "default": "false",
+          "description": "If true, the output will not be wrapped in a div with the 'wysiwyg' class."
+        }
+      ],
+      "events": [],
+      "slots": []
+    },
+    "UluRouteAnnouncer": {
+      "description": "Vue Component Props, Emits, and Slots for UluRouteAnnouncer",
+      "properties": [
+        {
+          "name": "validator",
+          "type": "func",
+          "default": "() => true",
+          "description": "Allow user to bypass this functionality\n- Function should return true if the page should be announced\n- Function is passed (to, from) => {}\n  - to/from are RouteLocationNormalizedLoaded objects"
         },
         {
-          "name": "type",
-          "type": "string",
-          "default": "'checkbox'",
-          "description": "The type of input to use ('checkbox' or 'radio')."
+          "name": "exclude",
+          "type": "array",
+          "default": "[]",
+          "description": "Array of paths to exclude\n- Can be exact path \"/about\" \n- Or can be path with wildcard \"/about/*\" (match all paths under about)"
         },
         {
-          "name": "modelValue",
+          "name": "getTitle",
+          "type": "func",
+          "default": "(route) => getRouteTitle(route)",
+          "description": "Function to retrieve routes title"
+        },
+        {
+          "name": "debug",
+          "type": "boolean",
+          "description": "Enable debug logging"
+        }
+      ],
+      "events": [],
+      "slots": []
+    },
+    "UluPlaceholderText": {
+      "description": "Vue Component Props, Emits, and Slots for UluPlaceholderText",
+      "properties": [
+        {
+          "name": "amount",
+          "type": "number",
+          "default": "1",
+          "description": ""
+        },
+        {
+          "name": "element",
+          "type": "string",
+          "default": "\"p\"",
+          "description": ""
+        }
+      ],
+      "events": [],
+      "slots": []
+    },
+    "UluPlaceholderImage": {
+      "description": "Vue Component Props, Emits, and Slots for UluPlaceholderImage",
+      "properties": [
+        {
+          "name": "imageId",
+          "type": "string",
+          "description": ""
+        },
+        {
+          "name": "width",
+          "type": "string|number",
+          "default": "\"300\"",
+          "description": "Width of the image"
+        },
+        {
+          "name": "height",
+          "type": "string|number",
+          "default": "\"400\"",
+          "description": "Height of the image"
+        },
+        {
+          "name": "alt",
+          "type": "string",
+          "description": "Alt text for placeholder image"
+        },
+        {
+          "name": "random",
+          "type": "boolean",
+          "description": "Random size"
+        }
+      ],
+      "events": [],
+      "slots": []
+    },
+    "UluEmptyView": {
+      "description": "Vue Component Props, Emits, and Slots for UluEmptyView",
+      "properties": [],
+      "events": [],
+      "slots": []
+    },
+    "UluEmpty": {
+      "description": "Vue Component Props, Emits, and Slots for UluEmpty",
+      "properties": [],
+      "events": [],
+      "slots": []
+    },
+    "UluConditionalWrapper": {
+      "description": "Vue Component Props, Emits, and Slots for UluConditionalWrapper",
+      "properties": [
+        {
+          "name": "is",
+          "type": "string|object|func",
+          "default": "'div'",
+          "description": "The underlying component or HTML tag to render.\nCan be a string like 'div' or an imported component object."
+        },
+        {
+          "name": "unwrapped",
+          "type": "boolean",
+          "default": "false",
+          "description": "If true, the wrapper will not be rendered and the content\nwill be output directly."
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": ""
+        }
+      ]
+    },
+    "UluConditionalText": {
+      "description": "Vue Component Props, Emits, and Slots for UluConditionalText",
+      "properties": [
+        {
+          "name": "text",
+          "type": "string|number|array|object",
+          "description": "Text to print in element"
+        },
+        {
+          "name": "element",
+          "type": "string",
+          "default": "\"p\"",
+          "description": "Element type to render (ie. h1, h2, p, etc)"
+        }
+      ],
+      "events": [],
+      "slots": []
+    },
+    "UluAction": {
+      "description": "Vue Component Props, Emits, and Slots for UluAction",
+      "properties": [
+        {
+          "name": "to",
+          "type": "string|object",
+          "description": "Router link target."
+        },
+        {
+          "name": "path",
+          "type": "string",
+          "description": "Alternative to 'to' (used in some legacy or specific data structures like UluMenu items)."
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "Standard URL for native anchor tags."
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "description": "Target attribute for anchor tags (e.g. '_blank')."
+        },
+        {
+          "name": "download",
+          "type": "boolean|string",
+          "description": "Download attribute for anchor tags."
+        },
+        {
+          "name": "element",
+          "type": "string",
+          "description": "Optional explicit element to use (e.g., if you need 'div' or 'span' instead of a button)."
+        },
+        {
+          "name": "activeClass",
+          "type": "string",
+          "description": "Vue Router active class override."
+        },
+        {
+          "name": "exactActiveClass",
+          "type": "string",
+          "description": "Vue Router exact active class override."
+        },
+        {
+          "name": "click",
+          "type": "func",
+          "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": "type",
+          "type": "string",
+          "description": "Button type (e.g. 'submit', 'reset', 'button'). Defaults to 'button' to prevent accidental form submissions."
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": ""
+        }
+      ]
+    },
+    "UluSelectableMenu": {
+      "description": "Vue Component Props, Emits, and Slots for UluSelectableMenu",
+      "properties": [
+        {
+          "name": "legend",
+          "type": "string",
+          "description": "The legend for the menu."
+        },
+        {
+          "name": "options",
+          "type": "array",
+          "description": "An array of options for the menu."
+        },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "description": "Use compact modifier on menu stack"
+        },
+        {
+          "name": "type",
+          "type": "string",
+          "default": "'checkbox'",
+          "description": "The type of input to use ('checkbox' or 'radio')."
+        },
+        {
+          "name": "modelValue",
           "type": "string|array",
           "description": "The value of the menu (for v-model)."
         },
@@ -4012,12 +4017,6 @@
         }
       ]
     },
-    "CustomToast": {
-      "description": "Vue Component Props, Emits, and Slots for CustomToast",
-      "properties": [],
-      "events": [],
-      "slots": []
-    },
     "TestTooltipInline": {
       "description": "Vue Component Props, Emits, and Slots for TestTooltipInline",
       "properties": [],
@@ -4066,6 +4065,12 @@
       "events": [],
       "slots": []
     },
+    "CustomToast": {
+      "description": "Vue Component Props, Emits, and Slots for CustomToast",
+      "properties": [],
+      "events": [],
+      "slots": []
+    },
     "TestModal": {
       "description": "Vue Component Props, Emits, and Slots for TestModal",
       "properties": [],
@@ -5060,91 +5065,27 @@
         ]
       }
     },
-    "UluToastDisplay": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluToastDisplay",
-        "description": "",
-        "tags": {},
-        "sourceFiles": [
-          "lib/plugins/toast/UluToastDisplay.vue"
-        ]
-      }
-    },
-    "UluToast": {
+    "UluTooltipPopover": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluToast",
+        "displayName": "UluTooltipPopover",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "toast",
-            "description": "Toast configuration",
+            "name": "config",
             "type": {
               "name": "object"
             }
           },
           {
-            "name": "classes",
-            "description": "Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }",
+            "name": "trigger",
             "type": {
-              "name": "object|boolean|func"
+              "name": "object"
             },
             "defaultValue": {
-              "func": true,
-              "value": "() => ({})"
-            }
-          }
-        ],
-        "slots": [
-          {
-            "name": "icon",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "toast",
-                "title": "binding"
-              }
-            ]
-          },
-          {
-            "name": "content",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "toast",
-                "title": "binding"
-              }
-            ]
-          }
-        ],
-        "sourceFiles": [
-          "lib/plugins/toast/UluToast.vue"
-        ]
-      }
-    },
-    "UluTooltipPopover": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluTooltipPopover",
-        "description": "",
-        "tags": {},
-        "props": [
-          {
-            "name": "config",
-            "type": {
-              "name": "object"
-            }
-          },
-          {
-            "name": "trigger",
-            "type": {
-              "name": "object"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "null"
+              "func": false,
+              "value": "null"
             }
           }
         ],
@@ -5495,6 +5436,70 @@
         ]
       }
     },
+    "UluToastDisplay": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluToastDisplay",
+        "description": "",
+        "tags": {},
+        "sourceFiles": [
+          "lib/plugins/toast/UluToastDisplay.vue"
+        ]
+      }
+    },
+    "UluToast": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluToast",
+        "description": "",
+        "tags": {},
+        "props": [
+          {
+            "name": "toast",
+            "description": "Toast configuration",
+            "type": {
+              "name": "object"
+            }
+          },
+          {
+            "name": "classes",
+            "description": "Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }",
+            "type": {
+              "name": "object|boolean|func"
+            },
+            "defaultValue": {
+              "func": true,
+              "value": "() => ({})"
+            }
+          }
+        ],
+        "slots": [
+          {
+            "name": "icon",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "toast",
+                "title": "binding"
+              }
+            ]
+          },
+          {
+            "name": "content",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "toast",
+                "title": "binding"
+              }
+            ]
+          }
+        ],
+        "sourceFiles": [
+          "lib/plugins/toast/UluToast.vue"
+        ]
+      }
+    },
     "UluModalsDisplay": {
       "raw_ast_dump": {
         "exportName": "default",
@@ -5897,575 +5902,621 @@
         ]
       }
     },
-    "UluSanityRichText": {
+    "UluWhenBreakpoint": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluSanityRichText",
+        "displayName": "UluWhenBreakpoint",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "content",
-            "description": "The array of Portable Text blocks to render.",
+            "name": "max",
+            "description": "The maximum breakpoint to show the content at.",
             "type": {
-              "name": "array"
+              "name": "string"
             }
           },
           {
-            "name": "noWrapper",
-            "description": "If true, the output will not be wrapped in a div with the 'wysiwyg' class.",
+            "name": "min",
+            "description": "The minimum breakpoint to show the content at.",
             "type": {
-              "name": "boolean"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "false"
+              "name": "string"
+            }
+          },
+          {
+            "name": "only",
+            "description": "Only show the content at this breakpoint.",
+            "type": {
+              "name": "string"
             }
           }
         ],
+        "slots": [
+          {
+            "name": "default"
+          }
+        ],
         "sourceFiles": [
-          "lib/components/utils/UluSanityRichText.vue"
+          "lib/components/layout/UluWhenBreakpoint.vue"
         ]
       }
     },
-    "UluRouteAnnouncer": {
+    "UluTitleRail": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluRouteAnnouncer",
+        "displayName": "UluTitleRail",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "validator",
-            "description": "Allow user to bypass this functionality\n- Function should return true if the page should be announced\n- Function is passed (to, from) => {}\n  - to/from are RouteLocationNormalizedLoaded objects",
+            "name": "icon",
+            "description": "Icon to display next to the title.",
             "type": {
-              "name": "func"
+              "name": "string"
+            }
+          },
+          {
+            "name": "iconAlign",
+            "description": "The alignment of the icon with the title.",
+            "type": {
+              "name": "string"
             },
             "defaultValue": {
-              "func": true,
-              "value": "() => true"
+              "func": false,
+              "value": "\"baseline\""
             }
           },
           {
-            "name": "exclude",
-            "description": "Array of paths to exclude\n- Can be exact path \"/about\" \n- Or can be path with wildcard \"/about/*\" (match all paths under about)",
+            "name": "classes",
+            "description": "Classes for the different elements in the component.",
             "type": {
-              "name": "array"
+              "name": "object"
             },
             "defaultValue": {
               "func": false,
-              "value": "[]"
+              "value": "{\n  title: \"h2\",\n  icon: \"margin-right-small\"\n}"
             }
           },
           {
-            "name": "getTitle",
-            "description": "Function to retrieve routes title",
+            "name": "title",
+            "description": "The title to display.",
             "type": {
-              "name": "func"
+              "name": "string"
+            }
+          },
+          {
+            "name": "titleElement",
+            "description": "The HTML element to use for the title.",
+            "type": {
+              "name": "string"
             },
             "defaultValue": {
-              "func": true,
-              "value": "(route) => getRouteTitle(route)"
+              "func": false,
+              "value": "\"h2\""
             }
           },
           {
-            "name": "debug",
-            "description": "Enable debug logging",
+            "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/utils/UluRouteAnnouncer.vue"
+          "lib/components/layout/UluTitleRail.vue"
         ]
       }
     },
-    "UluPlaceholderText": {
+    "UluDataGrid": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluPlaceholderText",
+        "displayName": "UluDataGrid",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "amount",
+            "name": "element",
+            "description": "The element to use on data-grid container",
             "type": {
-              "name": "number"
+              "name": "string"
             },
             "defaultValue": {
               "func": false,
-              "value": "1"
+              "value": "\"div\""
             }
           },
           {
-            "name": "element",
+            "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": "string"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "\"p\""
+              "name": "boolean"
             }
           }
         ],
+        "slots": [
+          {
+            "name": "default"
+          }
+        ],
         "sourceFiles": [
-          "lib/components/utils/UluPlaceholderText.vue"
+          "lib/components/layout/UluDataGrid.vue"
         ]
       }
     },
-    "UluPlaceholderImage": {
+    "UluAdaptiveLayout": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluPlaceholderImage",
+        "displayName": "UluAdaptiveLayout",
         "description": "",
         "tags": {},
-        "props": [
+        "slots": [
           {
-            "name": "imageId",
-            "type": {
-              "name": "string"
-            }
+            "name": "default"
           },
           {
-            "name": "width",
-            "description": "Width of the image",
-            "type": {
-              "name": "string|number"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "\"300\""
-            }
-          },
-          {
-            "name": "height",
-            "description": "Height of the image",
-            "type": {
-              "name": "string|number"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "\"400\""
-            }
-          },
-          {
-            "name": "alt",
-            "description": "Alt text for placeholder image",
-            "type": {
-              "name": "string"
-            }
-          },
-          {
-            "name": "random",
-            "description": "Random size",
-            "type": {
-              "name": "boolean"
-            }
+            "name": "mobile"
           }
         ],
         "sourceFiles": [
-          "lib/components/utils/UluPlaceholderImage.vue"
-        ]
-      }
-    },
-    "UluEmptyView": {
-      "raw_ast_dump": {
-        "displayName": "UluEmptyView",
-        "description": "",
-        "tags": {},
-        "sourceFiles": [
-          "lib/components/utils/UluEmptyView.vue"
+          "lib/components/layout/UluAdaptiveLayout.vue"
         ]
       }
     },
-    "UluEmpty": {
+    "UluSkipLink": {
       "raw_ast_dump": {
-        "displayName": "UluEmpty",
+        "displayName": "UluSkipLink",
         "description": "",
         "tags": {},
         "sourceFiles": [
-          "lib/components/utils/UluEmpty.vue"
+          "lib/components/navigation/UluSkipLink.vue"
         ]
       }
     },
-    "UluConditionalWrapper": {
+    "UluPager": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluConditionalWrapper",
+        "displayName": "UluPager",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "is",
-            "description": "The underlying component or HTML tag to render.\nCan be a string like 'div' or an imported component object.",
+            "name": "titleElement",
+            "description": "The HTML element to use for the visually hidden title.",
             "type": {
-              "name": "string|object|func"
+              "name": "string"
             },
             "defaultValue": {
               "func": false,
-              "value": "'div'"
+              "value": "'h4'"
             }
           },
           {
-            "name": "unwrapped",
-            "description": "If true, the wrapper will not be rendered and the content\nwill be output directly.",
+            "name": "items",
+            "description": "List of pager items.",
             "type": {
-              "name": "boolean"
+              "name": "object"
             },
             "defaultValue": {
               "func": false,
-              "value": "false"
+              "value": "{}"
             }
-          }
-        ],
-        "slots": [
-          {
-            "name": "default"
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/utils/UluConditionalWrapper.vue"
-        ]
-      }
-    },
-    "UluConditionalText": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluConditionalText",
-        "description": "",
-        "tags": {},
-        "props": [
+          },
           {
-            "name": "text",
-            "description": "Text to print in element",
+            "name": "current",
+            "description": "The page number of the current page.",
             "type": {
-              "name": "string|number|array|object"
+              "name": "number"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "1"
             }
           },
           {
-            "name": "element",
-            "description": "Element type to render (ie. h1, h2, p, etc)",
+            "name": "ellipses",
+            "description": "Ellipses configuration.",
             "type": {
-              "name": "string"
+              "name": "object"
             },
             "defaultValue": {
               "func": false,
-              "value": "\"p\""
+              "value": "{}"
             }
           }
         ],
         "sourceFiles": [
-          "lib/components/utils/UluConditionalText.vue"
+          "lib/components/navigation/UluPager.vue"
         ]
       }
     },
-    "UluAction": {
+    "UluNavStrip": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluAction",
+        "displayName": "UluNavStrip",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "to",
-            "description": "Router link target.",
+            "name": "items",
+            "description": "Array of items for list (uses UluMenu, see structure there)",
             "type": {
-              "name": "string|object"
+              "name": "array"
             }
           },
           {
-            "name": "path",
-            "description": "Alternative to 'to' (used in some legacy or specific data structures like UluMenu items).",
+            "name": "center",
+            "description": "Center aligned",
             "type": {
-              "name": "string"
+              "name": "boolean"
             }
           },
           {
-            "name": "href",
-            "description": "Standard URL for native anchor tags.",
+            "name": "right",
+            "description": "Right aligned",
             "type": {
-              "name": "string"
+              "name": "boolean"
             }
           },
           {
-            "name": "target",
-            "description": "Target attribute for anchor tags (e.g. '_blank').",
+            "name": "rule",
+            "description": "Rule nav strip style",
             "type": {
-              "name": "string"
+              "name": "boolean"
             }
           },
           {
-            "name": "download",
-            "description": "Download attribute for anchor tags.",
+            "name": "modifiers",
+            "description": "Modifiers (to add any modifier classes based on base class)",
             "type": {
-              "name": "boolean|string"
+              "name": "string|array|object"
+            }
+          }
+        ],
+        "slots": [
+          {
+            "name": "name",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "name",
+                "title": "binding"
+              }
+            ]
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/navigation/UluNavStrip.vue"
+        ]
+      }
+    },
+    "UluMenuStack": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluMenuStack",
+        "description": "",
+        "tags": {},
+        "props": [
+          {
+            "name": "items",
+            "description": "Menu item (see UluMenu)",
+            "type": {
+              "name": "array"
             }
           },
           {
-            "name": "element",
-            "description": "Optional explicit element to use (e.g., if you need 'div' or 'span' instead of a button).",
+            "name": "containerElement",
+            "description": "The HTML element to use as the container (e.g., 'nav', 'div', 'aside').",
             "type": {
               "name": "string"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "\"nav\""
             }
           },
           {
-            "name": "activeClass",
-            "description": "Vue Router active class override.",
+            "name": "hanging",
+            "description": "Hanging style menu",
             "type": {
-              "name": "string"
+              "name": "boolean"
             }
           },
           {
-            "name": "exactActiveClass",
-            "description": "Vue Router exact active class override.",
+            "name": "compact",
+            "description": "Compact style menu",
             "type": {
-              "name": "string"
+              "name": "boolean"
             }
           },
           {
-            "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": "noChildren",
+            "description": "Don't include children of menu",
             "type": {
-              "name": "func"
+              "name": "boolean"
             }
           },
           {
-            "name": "type",
-            "description": "Button type (e.g. 'submit', 'reset', 'button'). Defaults to 'button' to prevent accidental form submissions.",
+            "name": "modifiers",
+            "description": "Class modifiers (ie. 'transparent', 'secondary', etc)",
             "type": {
-              "name": "string"
+              "name": "string|array|object"
             }
           }
         ],
         "slots": [
           {
-            "name": "default"
+            "name": "name",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "name",
+                "title": "binding"
+              }
+            ]
           }
         ],
         "sourceFiles": [
-          "lib/components/utils/UluAction.vue"
+          "lib/components/navigation/UluMenuStack.vue"
         ]
       }
     },
-    "UluWhenBreakpoint": {
+    "UluMenu": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluWhenBreakpoint",
+        "displayName": "UluMenu",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "max",
-            "description": "The maximum breakpoint to show the content at.",
+            "name": "items",
+            "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}]",
             "type": {
-              "name": "string"
+              "name": "array"
             }
           },
           {
-            "name": "min",
-            "description": "The minimum breakpoint to show the content at.",
+            "name": "classes",
+            "description": "Classes object to add class bindings to the different elements\n- { list, item, link, linkActive, linkExactActive, linkIcon, linkText }",
             "type": {
-              "name": "string"
+              "name": "object"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "{}"
             }
           },
           {
-            "name": "only",
-            "description": "Only show the content at this breakpoint.",
+            "name": "iconOnly",
+            "description": "Use icon only version of menu",
             "type": {
-              "name": "string"
+              "name": "boolean"
+            }
+          },
+          {
+            "name": "noChildren",
+            "description": "Do not print menu items children recursively",
+            "type": {
+              "name": "boolean"
             }
           }
         ],
-        "slots": [
+        "events": [
           {
-            "name": "default"
+            "name": "item-click",
+            "description": "Fired anytime a item is clicked"
           }
         ],
-        "sourceFiles": [
-          "lib/components/layout/UluWhenBreakpoint.vue"
-        ]
-      }
-    },
-    "UluTitleRail": {
+        "slots": [
+          {
+            "name": "default",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "item",
+                "title": "binding"
+              },
+              {
+                "name": "index",
+                "title": "binding"
+              }
+            ]
+          },
+          {
+            "name": "item",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "item",
+                "title": "binding"
+              },
+              {
+                "name": "index",
+                "title": "binding"
+              }
+            ]
+          },
+          {
+            "name": "name",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "name",
+                "title": "binding"
+              }
+            ]
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/navigation/UluMenu.vue"
+        ]
+      }
+    },
+    "UluBreadcrumb": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluTitleRail",
+        "displayName": "UluBreadcrumb",
         "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.",
+            "name": "items",
+            "description": "Array of breadcrumb items.\nEach item is an object: { title: String, to: [String, Object], current: Boolean }",
             "type": {
-              "name": "object"
+              "name": "array"
             },
             "defaultValue": {
               "func": false,
-              "value": "{\n  title: \"h2\",\n  icon: \"margin-right-small\"\n}"
+              "value": "[]"
             }
           },
           {
-            "name": "title",
-            "description": "The title to display.",
+            "name": "separatorIcon",
+            "description": "Icon to use as a separator.",
             "type": {
               "name": "string"
             }
           },
           {
-            "name": "titleElement",
-            "description": "The HTML element to use for the title.",
+            "name": "classes",
+            "description": "Classes object to be applied to elements.\nKeys: nav, list, item, link, current, separator",
             "type": {
-              "name": "string"
+              "name": "object"
             },
             "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"
+              "value": "{\n  nav: \"breadcrumb\",\n  list: \"breadcrumb__list\",\n  item: \"breadcrumb__item\",\n  link: \"breadcrumb__link\",\n  current: \"breadcrumb__current\",\n  separator: \"breadcrumb__separator\"\n}"
             }
           }
         ],
         "slots": [
           {
-            "name": "default"
+            "name": "default",
+            "scoped": true,
+            "bindings": [
+              {
+                "name": "item",
+                "title": "binding"
+              }
+            ]
           },
           {
-            "name": "end"
+            "name": "separator"
           }
         ],
         "sourceFiles": [
-          "lib/components/layout/UluTitleRail.vue"
+          "lib/components/navigation/UluBreadcrumb.vue"
         ]
       }
     },
-    "UluDataGrid": {
+    "UluSanityRichText": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluDataGrid",
+        "displayName": "UluSanityRichText",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "element",
-            "description": "The element to use on data-grid container",
+            "name": "content",
+            "description": "The array of Portable Text blocks to render.",
             "type": {
-              "name": "string"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "\"div\""
+              "name": "array"
             }
           },
           {
-            "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",
+            "name": "noWrapper",
+            "description": "If true, the output will not be wrapped in a div with the 'wysiwyg' class.",
             "type": {
               "name": "boolean"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "false"
             }
           }
         ],
-        "slots": [
-          {
-            "name": "default"
-          }
-        ],
         "sourceFiles": [
-          "lib/components/layout/UluDataGrid.vue"
+          "lib/components/utils/UluSanityRichText.vue"
         ]
       }
     },
-    "UluAdaptiveLayout": {
+    "UluRouteAnnouncer": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluAdaptiveLayout",
+        "displayName": "UluRouteAnnouncer",
         "description": "",
         "tags": {},
-        "slots": [
+        "props": [
           {
-            "name": "default"
+            "name": "validator",
+            "description": "Allow user to bypass this functionality\n- Function should return true if the page should be announced\n- Function is passed (to, from) => {}\n  - to/from are RouteLocationNormalizedLoaded objects",
+            "type": {
+              "name": "func"
+            },
+            "defaultValue": {
+              "func": true,
+              "value": "() => true"
+            }
           },
           {
-            "name": "mobile"
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/layout/UluAdaptiveLayout.vue"
-        ]
-      }
-    },
-    "UluSkipLink": {
-      "raw_ast_dump": {
-        "displayName": "UluSkipLink",
-        "description": "",
-        "tags": {},
-        "sourceFiles": [
-          "lib/components/navigation/UluSkipLink.vue"
-        ]
-      }
-    },
-    "UluPager": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluPager",
-        "description": "",
-        "tags": {},
-        "props": [
-          {
-            "name": "titleElement",
-            "description": "The HTML element to use for the visually hidden title.",
+            "name": "exclude",
+            "description": "Array of paths to exclude\n- Can be exact path \"/about\" \n- Or can be path with wildcard \"/about/*\" (match all paths under about)",
             "type": {
-              "name": "string"
+              "name": "array"
             },
             "defaultValue": {
               "func": false,
-              "value": "'h4'"
+              "value": "[]"
             }
           },
           {
-            "name": "items",
-            "description": "List of pager items.",
+            "name": "getTitle",
+            "description": "Function to retrieve routes title",
             "type": {
-              "name": "object"
+              "name": "func"
             },
             "defaultValue": {
-              "func": false,
-              "value": "{}"
+              "func": true,
+              "value": "(route) => getRouteTitle(route)"
             }
           },
           {
-            "name": "current",
-            "description": "The page number of the current page.",
+            "name": "debug",
+            "description": "Enable debug logging",
+            "type": {
+              "name": "boolean"
+            }
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/utils/UluRouteAnnouncer.vue"
+        ]
+      }
+    },
+    "UluPlaceholderText": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluPlaceholderText",
+        "description": "",
+        "tags": {},
+        "props": [
+          {
+            "name": "amount",
             "type": {
               "name": "number"
             },
@@ -6475,298 +6526,252 @@
             }
           },
           {
-            "name": "ellipses",
-            "description": "Ellipses configuration.",
+            "name": "element",
             "type": {
-              "name": "object"
+              "name": "string"
             },
             "defaultValue": {
               "func": false,
-              "value": "{}"
+              "value": "\"p\""
             }
           }
         ],
         "sourceFiles": [
-          "lib/components/navigation/UluPager.vue"
+          "lib/components/utils/UluPlaceholderText.vue"
         ]
       }
     },
-    "UluNavStrip": {
+    "UluPlaceholderImage": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluNavStrip",
+        "displayName": "UluPlaceholderImage",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "items",
-            "description": "Array of items for list (uses UluMenu, see structure there)",
+            "name": "imageId",
             "type": {
-              "name": "array"
+              "name": "string"
             }
           },
           {
-            "name": "center",
-            "description": "Center aligned",
+            "name": "width",
+            "description": "Width of the image",
             "type": {
-              "name": "boolean"
+              "name": "string|number"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "\"300\""
             }
           },
           {
-            "name": "right",
-            "description": "Right aligned",
+            "name": "height",
+            "description": "Height of the image",
             "type": {
-              "name": "boolean"
+              "name": "string|number"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "\"400\""
             }
           },
           {
-            "name": "rule",
-            "description": "Rule nav strip style",
+            "name": "alt",
+            "description": "Alt text for placeholder image",
             "type": {
-              "name": "boolean"
+              "name": "string"
             }
           },
           {
-            "name": "modifiers",
-            "description": "Modifiers (to add any modifier classes based on base class)",
+            "name": "random",
+            "description": "Random size",
             "type": {
-              "name": "string|array|object"
+              "name": "boolean"
             }
           }
         ],
-        "slots": [
-          {
-            "name": "name",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "name",
-                "title": "binding"
-              }
-            ]
-          }
-        ],
         "sourceFiles": [
-          "lib/components/navigation/UluNavStrip.vue"
+          "lib/components/utils/UluPlaceholderImage.vue"
         ]
       }
     },
-    "UluMenuStack": {
+    "UluEmptyView": {
+      "raw_ast_dump": {
+        "displayName": "UluEmptyView",
+        "description": "",
+        "tags": {},
+        "sourceFiles": [
+          "lib/components/utils/UluEmptyView.vue"
+        ]
+      }
+    },
+    "UluEmpty": {
+      "raw_ast_dump": {
+        "displayName": "UluEmpty",
+        "description": "",
+        "tags": {},
+        "sourceFiles": [
+          "lib/components/utils/UluEmpty.vue"
+        ]
+      }
+    },
+    "UluConditionalWrapper": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluMenuStack",
+        "displayName": "UluConditionalWrapper",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "items",
-            "description": "Menu item (see UluMenu)",
-            "type": {
-              "name": "array"
-            }
-          },
-          {
-            "name": "containerElement",
-            "description": "The HTML element to use as the container (e.g., 'nav', 'div', 'aside').",
+            "name": "is",
+            "description": "The underlying component or HTML tag to render.\nCan be a string like 'div' or an imported component object.",
             "type": {
-              "name": "string"
+              "name": "string|object|func"
             },
             "defaultValue": {
               "func": false,
-              "value": "\"nav\""
+              "value": "'div'"
             }
           },
           {
-            "name": "hanging",
-            "description": "Hanging style menu",
+            "name": "unwrapped",
+            "description": "If true, the wrapper will not be rendered and the content\nwill be output directly.",
             "type": {
               "name": "boolean"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "false"
             }
-          },
+          }
+        ],
+        "slots": [
           {
-            "name": "compact",
-            "description": "Compact style menu",
-            "type": {
-              "name": "boolean"
-            }
-          },
+            "name": "default"
+          }
+        ],
+        "sourceFiles": [
+          "lib/components/utils/UluConditionalWrapper.vue"
+        ]
+      }
+    },
+    "UluConditionalText": {
+      "raw_ast_dump": {
+        "exportName": "default",
+        "displayName": "UluConditionalText",
+        "description": "",
+        "tags": {},
+        "props": [
           {
-            "name": "noChildren",
-            "description": "Don't include children of menu",
+            "name": "text",
+            "description": "Text to print in element",
             "type": {
-              "name": "boolean"
+              "name": "string|number|array|object"
             }
           },
           {
-            "name": "modifiers",
-            "description": "Class modifiers (ie. 'transparent', 'secondary', etc)",
+            "name": "element",
+            "description": "Element type to render (ie. h1, h2, p, etc)",
             "type": {
-              "name": "string|array|object"
+              "name": "string"
+            },
+            "defaultValue": {
+              "func": false,
+              "value": "\"p\""
             }
           }
         ],
-        "slots": [
-          {
-            "name": "name",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "name",
-                "title": "binding"
-              }
-            ]
-          }
-        ],
         "sourceFiles": [
-          "lib/components/navigation/UluMenuStack.vue"
+          "lib/components/utils/UluConditionalText.vue"
         ]
       }
     },
-    "UluMenu": {
+    "UluAction": {
       "raw_ast_dump": {
         "exportName": "default",
-        "displayName": "UluMenu",
+        "displayName": "UluAction",
         "description": "",
         "tags": {},
         "props": [
           {
-            "name": "items",
-            "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": "to",
+            "description": "Router link target.",
             "type": {
-              "name": "array"
+              "name": "string|object"
             }
           },
           {
-            "name": "classes",
-            "description": "Classes object to add class bindings to the different elements\n- { list, item, link, linkActive, linkExactActive, linkIcon, linkText }",
+            "name": "path",
+            "description": "Alternative to 'to' (used in some legacy or specific data structures like UluMenu items).",
             "type": {
-              "name": "object"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "{}"
+              "name": "string"
             }
           },
           {
-            "name": "iconOnly",
-            "description": "Use icon only version of menu",
+            "name": "href",
+            "description": "Standard URL for native anchor tags.",
             "type": {
-              "name": "boolean"
+              "name": "string"
             }
           },
           {
-            "name": "noChildren",
-            "description": "Do not print menu items children recursively",
+            "name": "target",
+            "description": "Target attribute for anchor tags (e.g. '_blank').",
             "type": {
-              "name": "boolean"
+              "name": "string"
             }
-          }
-        ],
-        "events": [
-          {
-            "name": "item-click",
-            "description": "Fired anytime a item is clicked"
-          }
-        ],
-        "slots": [
-          {
-            "name": "default",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "item",
-                "title": "binding"
-              },
-              {
-                "name": "index",
-                "title": "binding"
-              }
-            ]
           },
           {
-            "name": "item",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "item",
-                "title": "binding"
-              },
-              {
-                "name": "index",
-                "title": "binding"
-              }
-            ]
+            "name": "download",
+            "description": "Download attribute for anchor tags.",
+            "type": {
+              "name": "boolean|string"
+            }
           },
           {
-            "name": "name",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "name",
-                "title": "binding"
-              }
-            ]
-          }
-        ],
-        "sourceFiles": [
-          "lib/components/navigation/UluMenu.vue"
-        ]
-      }
-    },
-    "UluBreadcrumb": {
-      "raw_ast_dump": {
-        "exportName": "default",
-        "displayName": "UluBreadcrumb",
-        "description": "",
-        "tags": {},
-        "props": [
+            "name": "element",
+            "description": "Optional explicit element to use (e.g., if you need 'div' or 'span' instead of a button).",
+            "type": {
+              "name": "string"
+            }
+          },
           {
-            "name": "items",
-            "description": "Array of breadcrumb items.\nEach item is an object: { title: String, to: [String, Object], current: Boolean }",
+            "name": "activeClass",
+            "description": "Vue Router active class override.",
             "type": {
-              "name": "array"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "[]"
+              "name": "string"
             }
           },
           {
-            "name": "separatorIcon",
-            "description": "Icon to use as a separator.",
+            "name": "exactActiveClass",
+            "description": "Vue Router exact active class override.",
             "type": {
               "name": "string"
             }
           },
           {
-            "name": "classes",
-            "description": "Classes object to be applied to elements.\nKeys: nav, list, item, link, current, separator",
+            "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": "object"
-            },
-            "defaultValue": {
-              "func": false,
-              "value": "{\n  nav: \"breadcrumb\",\n  list: \"breadcrumb__list\",\n  item: \"breadcrumb__item\",\n  link: \"breadcrumb__link\",\n  current: \"breadcrumb__current\",\n  separator: \"breadcrumb__separator\"\n}"
+              "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",
-            "scoped": true,
-            "bindings": [
-              {
-                "name": "item",
-                "title": "binding"
-              }
-            ]
-          },
-          {
-            "name": "separator"
+            "name": "default"
           }
         ],
         "sourceFiles": [
-          "lib/components/navigation/UluBreadcrumb.vue"
+          "lib/components/utils/UluAction.vue"
         ]
       }
     },
@@ -10687,16 +10692,6 @@
         ]
       }
     },
-    "CustomToast": {
-      "raw_ast_dump": {
-        "displayName": "CustomToast",
-        "description": "",
-        "tags": {},
-        "sourceFiles": [
-          "lib/plugins/toast/tests/CustomToast.vue"
-        ]
-      }
-    },
     "TestTooltipInline": {
       "raw_ast_dump": {
         "displayName": "TestTooltipInline",
@@ -10781,6 +10776,16 @@
         ]
       }
     },
+    "CustomToast": {
+      "raw_ast_dump": {
+        "displayName": "CustomToast",
+        "description": "",
+        "tags": {},
+        "sourceFiles": [
+          "lib/plugins/toast/tests/CustomToast.vue"
+        ]
+      }
+    },
     "TestModal": {
       "raw_ast_dump": {
         "displayName": "TestModal",
@@ -12624,17 +12629,17 @@
       "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```"
     },
     "tour": {
-      "raw_markdown": "import { Canvas } from '@storybook/addon-docs/blocks';\nimport * as TourStories from './tour.stories.js';\n\n# Tour Plugin\n\nThe Tour plugin allows configuring an app-wide guided tour that leverages `UluModal` and `@floating-ui/vue`. Register the plugin, and use the global API (or composable) to start step-by-step onboarding flows.\n\n## Installing the plugin\n\nExample `./src/main.js`\n\n```js\nimport UluTour from \"@ulu/frontend-vue/plugins/tour/index.js\";\n\n//...\n\napp.use(UluTour);\n```\n\nTo display the tour, you must include the `UluTourDisplay` component somewhere in your application root (e.g. `App.vue`):\n\n```html\n<template>\n  <div id=\"app\">\n    <router-view />\n    <UluTourDisplay />\n  </div>\n</template>\n```\n\n## Creating a Tour\n\nA tour is defined as an object containing a `name` and an array of `steps`. You can also define global `modalProps` or `popoverProps` on the root tour object to apply them to all steps by default.\n\n```js\nconst demoTour = {\n  name: 'demo-tour',\n  popoverProps: { modifiers: 'large' }, // Global popover styling for all steps\n  steps: [\n    {\n      title: 'Welcome!',\n      content: 'This step is a modal because it has no target element. Click next to continue.',\n      modalProps: { size: 'small' } // Step-specific override\n    },\n    {\n      target: '#step-1-btn',\n      title: 'First Feature',\n      content: 'This points to a simple button.',\n      placement: 'bottom'\n    }\n  ]\n};\n```\n\n### Step API Structure\n\nEach step object can accept the following properties:\n\n*   **`target`**: *(String)* The CSS selector for the target element. If omitted, the step renders as a centered modal.\n*   **`title`**: *(String)* The title text for the step.\n*   **`content`**: *(String)* The body content text for the step.\n*   **`contentComponent`**: *(Object)* A Vue component to replace only the text content (keeps the modal/popover shell and default footer intact).\n*   **`component`**: *(Object)* A Vue component to completely replace the outer wrapper (bypasses modal/popover entirely).\n*   **`componentProps`**: *(Object)* Props to bind to `contentComponent` or `component`.\n*   **`hideFooter`**: *(Boolean)* If true, hides the default tour footer (Next/Back buttons). Useful if you want the standard text but no buttons.\n*   **`placement`**: *(String)* Floating UI placement string (e.g. `'bottom'`, `'right'`).\n*   **`highlight`**: *(Boolean)* If true, darkens the backdrop around the target element.\n*   **`modalProps`**: *(Object)* Props to pass to the modal (only applies if `target` is omitted).\n*   **`popoverProps`**: *(Object)* Props to pass to the popover (only applies if `target` is present).\n*   **`onEnter`**: *(Function)* An async hook called before the step is rendered.\n\n## Starting the Tour\n\nYou can control the tour programmatically using the `useTour` composable:\n\n```html\n<template>\n  <button @click=\"startTour\">Start Tour</button>\n</template>\n\n<script setup>\n  import { useTour } from \"@ulu/frontend-vue\";\n\n  const { api } = useTour();\n\n  const startTour = () => {\n    api.start(demoTour);\n  };\n</script>\n```\n\nAlternatively, you can use the global API:\n\n```js\nthis.$uluTour.start(demoTour);\nthis.$uluTour.next();\nthis.$uluTour.prev();\nthis.$uluTour.stop();\n```\n\n## Custom Components & Layouts\n\nIf you need custom designs, the plugin supports two levels of control:\n\n### 1. Custom Inner Content (`contentComponent`)\n\nUse `contentComponent` if you want to render an image, form, or custom layout inside the step, but want to **keep** the default popover/modal wrappers and the Next/Back footer buttons.\n\n```html\n<template>\n  <div style=\"text-align: center;\">\n    <img src=\"/logo.png\" />\n    <p>This is my custom graphic step.</p>\n  </div>\n</template>\n```\n\n### 2. Full Wrapper Takeover (`component`)\n\nUse `component` if you want to bypass the `<UluModal>` and `<UluPopoverBase>` wrappers entirely. This allows you to build custom off-canvas drawers, alert banners, or custom absolute-positioned panels. \n\nYou are responsible for your own positioning, styling, and wiring up the Next/Back buttons via `useTour()`.\n\n```html\n<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>\n```\n\n## Demonstration\n\n<Canvas of={TourStories.Default} />\n"
+      "raw_markdown": "import { Canvas } from '@storybook/addon-docs/blocks';\nimport * as TourStories from './tour.stories.js';\n\n# Tour Plugin\n\nThe Tour plugin allows configuring an app-wide guided tour that leverages `UluModal` and `@floating-ui/vue`. Register the plugin, and use the global API (or composable) to start step-by-step onboarding flows.\n\n## Installing the plugin\n\nExample `./src/main.js`\n\n```js\nimport UluTour from \"@ulu/frontend-vue/plugins/tour/index.js\";\n\n//...\n\napp.use(UluTour);\n```\n\nTo display the tour, you must include the `UluTourDisplay` component somewhere in your application root (e.g. `App.vue`):\n\n```html\n<template>\n  <div id=\"app\">\n    <router-view />\n    <UluTourDisplay />\n  </div>\n</template>\n```\n\n## Creating a Tour\n\nA tour is defined as an object containing a `name` and an array of `steps`. You can also define global `modalProps` or `popoverProps` on the root tour object to apply them to all steps by default.\n\n```js\nconst demoTour = {\n  name: 'demo-tour',\n  popoverProps: { modifiers: 'large' }, // Global popover styling for all steps\n  steps: [\n    {\n      title: 'Welcome!',\n      content: 'This step is a modal because it has no target element. Click next to continue.',\n      modalProps: { size: 'small' } // Step-specific override\n    },\n    {\n      target: '#step-1-btn',\n      title: 'First Feature',\n      content: 'This points to a simple button.',\n      placement: 'bottom'\n    }\n  ]\n};\n```\n\n## Configuration API Reference\n\nHere is a complete representation of a tour object demonstrating all available configuration properties, global overrides, lifecycle hooks, and step options.\n\n```js\nconst comprehensiveTour = {\n  // Optional identifier for the tour\n  name: 'my-feature-tour',\n  \n  // --- GLOBAL LIFECYCLE HOOKS ---\n  // Async hook called right before the tour initializes\n  onStart: async () => {\n    console.log('Tour is starting! Preparing UI...');\n  },\n  // Async hook called when the tour stops/closes (via api.stop() or the last step)\n  onStop: async () => {\n    console.log('Tour finished! Cleaning up...');\n  },\n\n  // --- GLOBAL COMPONENT OVERRIDES ---\n  // Replace the structural layout for ALL steps by default\n  component: MyFullTakeoverComponent,         // Bypasses Modal/Popover completely\n  modalComponent: MyCustomModalWrapper,       // Replaces UluModal wrapper\n  popoverComponent: MyCustomPopoverWrapper,   // Replaces UluPopoverBase wrapper\n  contentComponent: MyCustomContentLayout,    // Replaces the inner text layout\n  pagerComponent: MyCustomPaginationFooter,   // Replaces the UluTourPager (Next/Back footer)\n  \n  // --- GLOBAL PROP OVERRIDES ---\n  modalProps: { size: 'large' },             // Props passed to every Modal step\n  popoverProps: { modifiers: 'large' },      // Props passed to every Popover step\n  modalTitleClass: ['h3', 'text-primary'],   // Typography classes for Modal titles\n  popoverTitleClass: ['h4', 'text-primary'], // Typography classes for Popover titles\n  pagerClass: ['margin-top-large'],          // Classes applied to the pager footer wrapper\n  progressClass: 'headline-label',           // Classes applied to the progress indicator\n  hideProgress: false,                       // Globally hides the progress indicator (\"Part 1 / 3\")\n\n  // --- STEP DEFINITIONS ---\n  steps: [\n    {\n      // --- CORE ---\n      // Target: String (CSS Selector), DOM HTMLElement, or a Function returning either (or a ref).\n      // If the target is omitted or the function returns falsy, it renders as a Modal.\n      target: () => window.innerWidth > 768 ? '#desktop-sidebar' : null,\n      \n      // Highlight Element: String, DOM HTMLElement, Function or Ref. \n      // Used for the backdrop highlight if it needs to be different from the target. Falls back to target if omitted.\n      highlightElement: () => window.innerWidth > 768 ? '#desktop-sidebar-container' : null,\n      \n      title: 'Step Title',\n      content: 'Step body content.',\n\n      // --- STYLING & POSITIONING ---\n      placement: 'right', // Floating UI placement (e.g. 'bottom', 'left-start')\n      highlight: true,    // Dims the background around the target element\n      titleClass: 'custom-title', // Override global title classes for this step\n      pagerClass: 'custom-pager', // Override global pager classes for this step\n      modalProps: {},     // Step-specific props for UluModal\n      popoverProps: {},   // Step-specific props for UluPopoverBase\n      \n      // --- COMPONENT OVERRIDES (Step Level) ---\n      // These override the global tour configurations above for this specific step.\n      component: null, \n      contentComponent: null, \n      pagerComponent: null,\n      modalComponent: null,\n      popoverComponent: null,\n      componentProps: { }, // Props passed down to custom component overrides\n\n      // --- BEHAVIOR ---\n      hideFooter: false,   // If true, the pager (Next/Prev) is not rendered\n      hideProgress: false, // If true, hides the \"Part X / Y\" progress indicator for this step\n      \n      // Boolean or Sync/Async function. If true, the step is bypassed dynamically!\n      skip: async () => await checkUserSettings('sawFeature1'),\n\n      // --- STEP LIFECYCLE HOOKS ---\n      // Awaited right before the step transitions in\n      onEnter: async () => {\n        await openSidebarMenu();\n      },\n      // Awaited right before the step transitions out (either forward or backward)\n      onLeave: async () => {\n        await closeSidebarMenu();\n      }\n    }\n  ]\n};\n```\n\n## Starting the Tour\n\nYou can control the tour programmatically using the `useTour` composable:\n\n```html\n<template>\n  <button @click=\"startTour\">Start Tour</button>\n</template>\n\n<script setup>\n  import { useTour } from \"@ulu/frontend-vue\";\n\n  const { api } = useTour();\n\n  const startTour = () => {\n    api.start(demoTour);\n  };\n</script>\n```\n\nAlternatively, you can use the global API:\n\n```js\nthis.$uluTour.start(demoTour);\nthis.$uluTour.next();\nthis.$uluTour.prev();\nthis.$uluTour.stop();\n```\n\n## Custom Components & Layouts\n\nIf you need custom designs, the plugin supports two levels of control:\n\n### 1. Custom Inner Content (`contentComponent`)\n\nUse `contentComponent` if you want to render an image, form, or custom layout inside the step, but want to **keep** the default popover/modal wrappers and the Next/Back footer buttons.\n\n```html\n<template>\n  <div style=\"text-align: center;\">\n    <img src=\"/logo.png\" />\n    <p>This is my custom graphic step.</p>\n  </div>\n</template>\n```\n\n### 2. Full Wrapper Takeover (`component`)\n\nUse `component` if you want to bypass the `<UluModal>` and `<UluPopoverBase>` wrappers entirely. This allows you to build custom off-canvas drawers, alert banners, or custom absolute-positioned panels. \n\nYou are responsible for your own positioning, styling, and wiring up the Next/Back buttons via `useTour()`.\n\n```html\n<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>\n```\n\n## Demonstration\n\n<Canvas of={TourStories.Default} />\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} />"
     },
-    "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"
     },
+    "breakpoints": {
+      "raw_markdown": "# Breakpoints Plugin\n\n## Purpose\n\nThe Breakpoints Plugin provides app-wide, reactive breakpoint information to your Vue components. It is a lightweight wrapper around the `useBreakpointManager` composable, ensuring that resize events and active breakpoint states are tracked centrally and distributed efficiently via Vue's `provide`/`inject` system.\n\nBy installing this plugin, any component in your application can instantly know the current breakpoint, whether the device is considered \"mobile,\" and the direction the window was just resized.\n\n## Installation\n\nRegister the `breakpointsPlugin` on your Vue app instance.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { breakpointsPlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the breakpoints plugin\napp.use(breakpointsPlugin, {\n  // Optional: Change which breakpoint triggers the 'isMobile' flag (default is 'small')\n  breakpointMobile: 'small',\n  \n  // Optional: Pass options directly to the underlying useBreakpointManager\n  managerOptions: {\n    // onReady(manager) { ... }\n  }\n});\n\napp.mount('#app');\n```\n\n## Provided Injections\n\nThe plugin does not attach methods to the Vue instance. Instead, it provides reactive `computed` refs that you can inject into any component.\n\n- **`uluIsMobile`**: `ComputedRef<Boolean>` - True if the current active breakpoint is less than or equal to the configured `breakpointMobile` (defaults to `'small'`).\n- **`uluBreakpointActive`**: `ComputedRef<String>` - The name of the currently active breakpoint (e.g., `'small'`, `'medium'`, `'large'`).\n- **`uluBreakpointDirection`**: `ComputedRef<Number>` - Indicates the resize direction (`1` for growing larger, `-1` for shrinking smaller, `0` for initialization).\n- **`uluBreakpointManager`**: `ComputedRef<Object>` - The underlying vanilla JS BreakpointManager instance, allowing advanced programmatic subscriptions if needed.\n\n## Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\n  import { inject } from 'vue';\n\n  const isMobile = inject('uluIsMobile');\n  const currentBreakpoint = inject('uluBreakpointActive');\n</script>\n\n<template>\n  <div>\n    <p v-if=\"isMobile\">You are on a mobile device!</p>\n    <p>Current Breakpoint: {{ currentBreakpoint }}</p>\n  </div>\n</template>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>\n```\n\n## Why use the Plugin vs the Composable?\n\nWhile you can import and use `useBreakpointManager()` directly in individual components, registering the Breakpoints Plugin ensures that the vanilla JS `BreakpointManager` is only instantiated once. This centralizes the resize event listeners, significantly improving performance across large applications with many responsive components.\n"
+    },
     "forms": {
       "raw_markdown": "import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';\nimport * as FullFormDemoStories from './tests/FullFormDemo.stories.js';\n\n# Forms\n\nThis is a demonstration of a full form built with the `ulu-form` components.\n\n<Canvas of={FullFormDemoStories.Default} />\n"
     },
@@ -13424,7 +13429,7 @@
           }
         ],
         "meta": {
-          "lineno": 27,
+          "lineno": 31,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13536,6 +13541,28 @@
             "description": "Global class applied to the pager.",
             "name": "tour.pagerClass"
           },
+          {
+            "type": {
+              "names": [
+                "String",
+                "Array",
+                "Object"
+              ]
+            },
+            "optional": true,
+            "description": "Global class applied to the progress indicator.",
+            "name": "tour.progressClass"
+          },
+          {
+            "type": {
+              "names": [
+                "Boolean"
+              ]
+            },
+            "optional": true,
+            "description": "Globally hides the progress indicator for all steps unless overridden.",
+            "name": "tour.hideProgress"
+          },
           {
             "type": {
               "names": [
@@ -13558,7 +13585,7 @@
           }
         ],
         "meta": {
-          "lineno": 41,
+          "lineno": 47,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13572,7 +13599,7 @@
         "scope": "global",
         "description": "Advances the tour to the next step, or stops if it is the last step",
         "meta": {
-          "lineno": 59,
+          "lineno": 79,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13586,7 +13613,7 @@
         "scope": "global",
         "description": "Returns the tour to the previous step",
         "meta": {
-          "lineno": 81,
+          "lineno": 108,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13613,7 +13640,7 @@
           }
         ],
         "meta": {
-          "lineno": 102,
+          "lineno": 136,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13638,7 +13665,7 @@
           }
         ],
         "meta": {
-          "lineno": 125,
+          "lineno": 159,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13663,7 +13690,7 @@
           }
         ],
         "meta": {
-          "lineno": 134,
+          "lineno": 168,
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/tour"
         },
@@ -13684,13 +13711,27 @@
           {
             "type": {
               "names": [
-                "String"
+                "String",
+                "function",
+                "HTMLElement"
               ]
             },
             "optional": true,
-            "description": "The CSS selector for the target element. If omitted, step renders as a modal.",
+            "description": "The CSS selector, DOM element, or function returning either, for the target element. If omitted or resolves to falsy, step renders as a modal.",
             "name": "target"
           },
+          {
+            "type": {
+              "names": [
+                "String",
+                "function",
+                "HTMLElement"
+              ]
+            },
+            "optional": true,
+            "description": "Element to highlight if different from target. Falls back to target if not provided.",
+            "name": "highlightElement"
+          },
           {
             "type": {
               "names": [
@@ -13725,6 +13766,18 @@
             "description": "Class to apply to the pager footer.",
             "name": "pagerClass"
           },
+          {
+            "type": {
+              "names": [
+                "String",
+                "Array",
+                "Object"
+              ]
+            },
+            "optional": true,
+            "description": "Class to apply to the progress indicator.",
+            "name": "progressClass"
+          },
           {
             "type": {
               "names": [
@@ -13775,6 +13828,16 @@
             "description": "If true, hides the default tour footer (Next/Back buttons).",
             "name": "hideFooter"
           },
+          {
+            "type": {
+              "names": [
+                "Boolean"
+              ]
+            },
+            "optional": true,
+            "description": "If true, hides the \"Part X / Y\" progress indicator for this step.",
+            "name": "hideProgress"
+          },
           {
             "type": {
               "names": [
@@ -13795,6 +13858,17 @@
             "description": "If true, darkens the backdrop around the target element.",
             "name": "highlight"
           },
+          {
+            "type": {
+              "names": [
+                "Boolean",
+                "function"
+              ]
+            },
+            "optional": true,
+            "description": "If true or returns true, this step will be skipped when navigating the tour.",
+            "name": "skip"
+          },
           {
             "type": {
               "names": [