@ulu/frontend-vue 0.6.15 → 0.6.17

package/dist/mcp-data.json

@@ -20,62 +20,6 @@
       }
     ],
     "useDocumentTitle": [],
-    "toast": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<toast>Content</toast>"
-      }
-    ],
-    "useTooltipFollow": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<useTooltipFollow>Content</useTooltipFollow>"
-      }
-    ],
-    "useTooltip": [],
-    "tooltip": [
-      {
-        "title": "Basic",
-        "description": "Basic variation",
-        "code": "<tooltip>This is a basic tooltip!</tooltip>"
-      }
-    ],
-    "UluPopover": [],
-    "useModals": [],
-    "modals": [
-      {
-        "title": "GlobalApiTest",
-        "description": "GlobalApiTest variation",
-        "code": "<modals>Content</modals>"
-      },
-      {
-        "title": "modals Example 1",
-        "description": "Code example extracted from markdown.",
-        "code": "<template>\n  <UluModal>\n    User setting modal…\n  </UluModal>\n</template>"
-      },
-      {
-        "title": "modals Example 2",
-        "description": "Code example extracted from markdown.",
-        "code": "import { defineAsyncComponent } from \"vue\";\n\nexport default [\n  {\n    name: \"settings\",\n    component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n  }\n]"
-      },
-      {
-        "title": "modals Example 3",
-        "description": "Code example extracted from markdown.",
-        "code": "import UluModals from \"@ulu/frontend-vue/plugins/modals/index.js\";\nimport modals from \"./src/modals.js\";\n\n//...\n\napp.use(UluModals, { modals });"
-      },
-      {
-        "title": "modals Example 4",
-        "description": "Code example extracted from markdown.",
-        "code": "// Open a app-wide modal\nthis.$uluModals.open({ exampleProp: value });\n\n// Close app-wide modal \nthis.$uluModals.close();\n\n// Add modals after post-install\nthis.$uluModals.add({\n  name: \"settings\",\n  component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n});\n\n// Remove a modal from the registry\nthis.$uluModals.remove(\"settings\");\n\n// Get Modal from registry (not usually needed)\nconst settingsModal = this.$uluModals.get(\"settings\");\n// console.log(settingsModal.name) ==> \"settings\""
-      },
-      {
-        "title": "modals Example 5",
-        "description": "Code example extracted from markdown.",
-        "code": "<template>\n  <button @click=\"showSettingsModal\">My Settings</button>\n</template>\n\n<script setup>\n  import { useModals } from \"./useModals\";\n\n  const modals = useModals();\n  const showSettingsModal = () => {\n    console.log(\"This is opening via uluModals composable\");\n    modals.open(\"settings\");\n  };\n</script>"
-      }
-    ],
     "UluProgressCircle": [],
     "UluProgressBar": [],
     "UluAnimateNumber": [],
@@ -119,6 +63,10 @@
         "code": "<UluAction href=\"{...}\" download>Content</UluAction>"
       }
     ],
+    "UluWhenBreakpoint": [],
+    "UluTitleRail": [],
+    "UluDataGrid": [],
+    "UluAdaptiveLayout": [],
     "UluSkipLink": [
       {
         "title": "Default",
@@ -191,10 +139,6 @@
         "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
       }
     ],
-    "UluWhenBreakpoint": [],
-    "UluTitleRail": [],
-    "UluDataGrid": [],
-    "UluAdaptiveLayout": [],
     "UluSelectableMenu": [],
     "UluSearchForm": [],
     "UluFormTextarea": [],
@@ -211,34 +155,6 @@
     "UluFormActions": [],
     "UluForm": [],
     "UluFileDisplay": [],
-    "UluTabGroup": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluTabGroup>Content</UluTabGroup>"
-      },
-      {
-        "title": "Vertical",
-        "description": "Vertical variation",
-        "code": "<UluTabGroup vertical>Content</UluTabGroup>"
-      },
-      {
-        "title": "DefaultIndex",
-        "description": "DefaultIndex variation",
-        "code": "<UluTabGroup :defaultIndex=\"2\">Content</UluTabGroup>"
-      },
-      {
-        "title": "FullWidth",
-        "description": "FullWidth variation",
-        "code": "<UluTabGroup modifiers=\"{...}\">Content</UluTabGroup>"
-      }
-    ],
-    "UluOverflowPopover": [],
-    "UluModal": [],
-    "UluDropdown": [],
-    "UluCollapsible": [],
-    "UluAccordionGroup": [],
-    "UluAccordion": [],
     "UluTag": [],
     "UluTable": [
       {
@@ -462,6 +378,90 @@
       }
     ],
     "UluAlert": [],
+    "UluTabGroup": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluTabGroup>Content</UluTabGroup>"
+      },
+      {
+        "title": "Vertical",
+        "description": "Vertical variation",
+        "code": "<UluTabGroup vertical>Content</UluTabGroup>"
+      },
+      {
+        "title": "DefaultIndex",
+        "description": "DefaultIndex variation",
+        "code": "<UluTabGroup :defaultIndex=\"2\">Content</UluTabGroup>"
+      },
+      {
+        "title": "FullWidth",
+        "description": "FullWidth variation",
+        "code": "<UluTabGroup modifiers=\"{...}\">Content</UluTabGroup>"
+      }
+    ],
+    "UluOverflowPopover": [],
+    "UluModal": [],
+    "UluDropdown": [],
+    "UluCollapsible": [],
+    "UluAccordionGroup": [],
+    "UluAccordion": [],
+    "toast": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<toast>Content</toast>"
+      }
+    ],
+    "useModals": [],
+    "modals": [
+      {
+        "title": "GlobalApiTest",
+        "description": "GlobalApiTest variation",
+        "code": "<modals>Content</modals>"
+      },
+      {
+        "title": "modals Example 1",
+        "description": "Code example extracted from markdown.",
+        "code": "<template>\n  <UluModal>\n    User setting modal…\n  </UluModal>\n</template>"
+      },
+      {
+        "title": "modals Example 2",
+        "description": "Code example extracted from markdown.",
+        "code": "import { defineAsyncComponent } from \"vue\";\n\nexport default [\n  {\n    name: \"settings\",\n    component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n  }\n]"
+      },
+      {
+        "title": "modals Example 3",
+        "description": "Code example extracted from markdown.",
+        "code": "import UluModals from \"@ulu/frontend-vue/plugins/modals/index.js\";\nimport modals from \"./src/modals.js\";\n\n//...\n\napp.use(UluModals, { modals });"
+      },
+      {
+        "title": "modals Example 4",
+        "description": "Code example extracted from markdown.",
+        "code": "// Open a app-wide modal\nthis.$uluModals.open({ exampleProp: value });\n\n// Close app-wide modal \nthis.$uluModals.close();\n\n// Add modals after post-install\nthis.$uluModals.add({\n  name: \"settings\",\n  component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n});\n\n// Remove a modal from the registry\nthis.$uluModals.remove(\"settings\");\n\n// Get Modal from registry (not usually needed)\nconst settingsModal = this.$uluModals.get(\"settings\");\n// console.log(settingsModal.name) ==> \"settings\""
+      },
+      {
+        "title": "modals Example 5",
+        "description": "Code example extracted from markdown.",
+        "code": "<template>\n  <button @click=\"showSettingsModal\">My Settings</button>\n</template>\n\n<script setup>\n  import { useModals } from \"./useModals\";\n\n  const modals = useModals();\n  const showSettingsModal = () => {\n    console.log(\"This is opening via uluModals composable\");\n    modals.open(\"settings\");\n  };\n</script>"
+      }
+    ],
+    "useTooltipFollow": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<useTooltipFollow>Content</useTooltipFollow>"
+      }
+    ],
+    "useTooltip": [],
+    "tooltip": [
+      {
+        "title": "Basic",
+        "description": "Basic variation",
+        "code": "<tooltip>This is a basic tooltip!</tooltip>"
+      }
+    ],
+    "UluPopover": [],
     "UluTableSticky": [
       {
         "title": "Default",
@@ -645,6 +645,13 @@
       }
     ],
     "forms": [],
+    "facets": [
+      {
+        "title": "facets Example 1",
+        "description": "Code example extracted from markdown.",
+        "code": "<script setup>\n  import { ref } from 'vue';\n  import { useFacets } from './useFacets.js';\n  import UluFacetsFilterAccordions from './UluFacetsFilterAccordions.vue';\n  import UluFacetsResults from './UluFacetsResults.vue';\n  import UluFacetsSearch from './UluFacetsSearch.vue';\n  import UluFacetsSort from './UluFacetsSort.vue';\n  import UluFacetsSidebarLayout from './UluFacetsSidebarLayout.vue';\n  import { mockItems } from './_mock-data';\n\n  const allItems = ref(mockItems);\n\n  // 1. Define fields for automatic facet generation\n  const facetFields = [\n    { name: 'Category', uid: 'category', open: true, multiple: true },\n    { name: 'Author', uid: 'author', open: true },\n    { name: 'Year', uid: 'date', open: true, getValue: item => item.date.getFullYear() }\n  ];\n\n  // 2. Define any extra sort types\n  const extraSortTypes = {\n    newest: { text: 'Date (Newest)', sort: (items) => [...items].sort((a, b) => b.date - a.date) },\n    oldest: { text: 'Date (Oldest)', sort: (items) => [...items].sort((a, b) => a.date - b.date) }\n  };\n\n  // 3. Initialize the composable\n  const {\n    facets,\n    searchValue,\n    selectedSort,\n    sortTypes,\n    displayItems,\n    selectedFacets, // Use this to check if filters are active\n    handleFacetChange,\n    clearFilters\n  } = useFacets(allItems, {\n    facetFields,\n    extraSortTypes,\n    initialSortType: 'newest',\n    countMode: 'intuitive', // Show counts next to facet values\n    searchOptions: { keys: ['title', 'description', 'author'] }\n  });\n</script>\n\n<template>\n  <UluFacetsSidebarLayout>\n    <template #header>\n      <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee;\">\n        <h2>Found {{ displayItems.length }} items</h2>\n        <UluFacetsSort v-model=\"selectedSort\" :sort-types=\"sortTypes\" />\n      </div>\n    </template>\n    <template #sidebar>\n      <UluFacetsSearch v-model=\"searchValue\" placeholder=\"Search articles...\" />\n      <hr/>\n      <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n        <h3>Filters</h3>\n        <button v-if=\"selectedFacets.length > 0\" @click=\"clearFilters\" style=\"border: none; background: none; color: blue; cursor: pointer;\">Clear</button>\n      </div>\n      <UluFacetsFilterAccordions :facets=\"facets\" @facet-change=\"handleFacetChange\" :max-visible=\"5\" />\n    </template>\n    <template #main>\n      <UluFacetsResults :items=\"displayItems\">\n        <template #item=\"{ item }\">\n          <div style=\"border: 1px solid #eee; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;\">\n            <h3>{{ item.title }}</h3>\n            <p>{{ item.description }}</p>\n            <p><small><strong>Author:</strong> {{ Array.isArray(item.author) ? item.author.join(', ') : item.author }}</small></p>\n            <p><small><strong>Published on:</strong> {{ item.date.toLocaleDateString() }}</small></p>\n          </div>\n        </template>\n        <template #empty>\n          <div style=\"padding: 2rem; text-align: center;\">\n            <p>No matching items found. Try clearing some filters.</p>\n          </div>\n        </template>\n      </UluFacetsResults>\n    </template>\n  </UluFacetsSidebarLayout>\n</template>"
+      }
+    ],
     "useScrollAnchors": [
       {
         "title": "useScrollAnchors Example 1",
@@ -665,13 +672,6 @@
         "description": "Code example extracted from markdown.",
         "code": "<script setup>\nimport { useScrollAnchorSection } from './useScrollAnchorSection';\n\nconst props = defineProps({\n  title: {\n    type: String,\n    required: true\n  },\n  customTitleId: String,\n});\n\nconst { sectionRef, titleId, isActive, section } = useScrollAnchorSection(props);\n</script>\n\n<template>\n  <section :class=\"['my-custom-section', { 'is-active': isActive }]\" :ref=\"sectionRef\">\n    <h2 :id=\"titleId\">{{ title }}</h2>\n    <p>This section is {{ isActive ? 'active' : 'inactive' }}.</p>\n    <!-- More content here -->\n    <slot />\n  </section>\n</template>"
       }
-    ],
-    "facets": [
-      {
-        "title": "facets Example 1",
-        "description": "Code example extracted from markdown.",
-        "code": "<script setup>\n  import { ref } from 'vue';\n  import { useFacets } from './useFacets.js';\n  import UluFacetsFilterAccordions from './UluFacetsFilterAccordions.vue';\n  import UluFacetsResults from './UluFacetsResults.vue';\n  import UluFacetsSearch from './UluFacetsSearch.vue';\n  import UluFacetsSort from './UluFacetsSort.vue';\n  import UluFacetsSidebarLayout from './UluFacetsSidebarLayout.vue';\n  import { mockItems } from './_mock-data';\n\n  const allItems = ref(mockItems);\n\n  // 1. Define fields for automatic facet generation\n  const facetFields = [\n    { name: 'Category', uid: 'category', open: true, multiple: true },\n    { name: 'Author', uid: 'author', open: true },\n    { name: 'Year', uid: 'date', open: true, getValue: item => item.date.getFullYear() }\n  ];\n\n  // 2. Define any extra sort types\n  const extraSortTypes = {\n    newest: { text: 'Date (Newest)', sort: (items) => [...items].sort((a, b) => b.date - a.date) },\n    oldest: { text: 'Date (Oldest)', sort: (items) => [...items].sort((a, b) => a.date - b.date) }\n  };\n\n  // 3. Initialize the composable\n  const {\n    facets,\n    searchValue,\n    selectedSort,\n    sortTypes,\n    displayItems,\n    selectedFacets, // Use this to check if filters are active\n    handleFacetChange,\n    clearFilters\n  } = useFacets(allItems, {\n    facetFields,\n    extraSortTypes,\n    initialSortType: 'newest',\n    countMode: 'intuitive', // Show counts next to facet values\n    searchOptions: { keys: ['title', 'description', 'author'] }\n  });\n</script>\n\n<template>\n  <UluFacetsSidebarLayout>\n    <template #header>\n      <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee;\">\n        <h2>Found {{ displayItems.length }} items</h2>\n        <UluFacetsSort v-model=\"selectedSort\" :sort-types=\"sortTypes\" />\n      </div>\n    </template>\n    <template #sidebar>\n      <UluFacetsSearch v-model=\"searchValue\" placeholder=\"Search articles...\" />\n      <hr/>\n      <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n        <h3>Filters</h3>\n        <button v-if=\"selectedFacets.length > 0\" @click=\"clearFilters\" style=\"border: none; background: none; color: blue; cursor: pointer;\">Clear</button>\n      </div>\n      <UluFacetsFilterAccordions :facets=\"facets\" @facet-change=\"handleFacetChange\" :max-visible=\"5\" />\n    </template>\n    <template #main>\n      <UluFacetsResults :items=\"displayItems\">\n        <template #item=\"{ item }\">\n          <div style=\"border: 1px solid #eee; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;\">\n            <h3>{{ item.title }}</h3>\n            <p>{{ item.description }}</p>\n            <p><small><strong>Author:</strong> {{ Array.isArray(item.author) ? item.author.join(', ') : item.author }}</small></p>\n            <p><small><strong>Published on:</strong> {{ item.date.toLocaleDateString() }}</small></p>\n          </div>\n        </template>\n        <template #empty>\n          <div style=\"padding: 2rem; text-align: center;\">\n            <p>No matching items found. Try clearing some filters.</p>\n          </div>\n        </template>\n      </UluFacetsResults>\n    </template>\n  </UluFacetsSidebarLayout>\n</template>"
-      }
     ]
   },
   "configuration": {
@@ -12239,7 +12239,7 @@
       "raw_markdown": "\nimport { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';\nimport { version } from '../package.json';\nimport * as ButtonStories from './components/elements/UluButton.stories.js';\nimport * as CardStories from './components/elements/UluCard.stories.js';\n\n<Meta title=\"Overview/Introduction\" />\n\n# Ulu Frontend Vue\n\nWelcome to the living style guide for the Ulu Vue component library. This library provides a comprehensive set of accessible, reusable, and composable Vue 3 components, composables, and plugins to build modern web applications.\n\nThis documentation provides interactive examples and detailed API documentation for each part of the library.\n\n---\n\n## Core Concepts\n\nThe Ulu ecosystem is built on two main packages:\n\n- **`@ulu/frontend`**: The framework-agnostic core. It contains the foundational SCSS for styling, vanilla JavaScript utilities, and base components. It knows nothing about Vue. \n- **`@ulu/frontend-vue`** (This Library): The Vue 3 implementation. It provides wrapper components, composables, and plugins that build upon and integrate seamlessly with the `@ulu/frontend` core.\n\nThis separation allows for a consistent design system that can be applied to any web technology, while providing a rich, idiomatic experience for Vue developers.\n\n**Note:** For `@ulu/frontend` (components) that you are using from this Vue library. You need to output the component stylesheets like you would normally (create global stylesheet). The components in this library do not at the frontend scss modules. While they could be included in each component this would make it so that you can't build your own implementations (local app component / etc) with the class structures since the styles would only be available if that component is used. \n\nExample global stylesheet outputting all \"included\" components and base styles. Note you can configure whats output with ulu.component-set-includes for example. Note there are many ways to assemble the stylesheet (manual per component mixins, etc), this example shows the convenience modules which output each modules stylesheet based on includes/excludes.\n\n```sass\n@use \"config\"; // Your config changes for example\n@use \"@ulu/frontend/scss/stylesheets/base-styles.scss\"; // Outputs base styles that are included\n@use \"@ulu/frontend/scss/stylesheets/component-styles.scss\"; // Outputs component styles that are included\n@use \"@ulu/frontend/scss/stylesheets/helper-styles.scss\"; // Outputs helper styles that are included\n```\n\n*Please see `@ulu/frontend` library for full documentation of configuring and outputting stylesheet*\n\n---\n\n## Installation\n\nTo get started, add the library to your project.\n\n```bash\nnpm install @ulu/frontend-vue\n```\n\nNext, you must register the required plugins in your main application entry point (`main.js`). The `corePlugin` is essential, and other plugins like `breakpointsPlugin`, `popoverPlugin` are optional. Some components require plugins. If a required plugin is missing, an error is thrown.\n\n**`src/main.js`**\n```javascript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { \n  corePlugin, \n  breakpointsPlugin, \n  toastPlugin, \n  modalsPlugin, \n  popoversPlugin \n} from '@ulu/frontend-vue';\nimport router from './router'; // Your vue-router instance\n\n// Import the main SCSS entry point\nimport '@ulu/frontend-vue/lib/_index.scss';\n\nconst app = createApp(App);\n\napp.use(router);\n\n// Register Ulu plugins\napp.use(corePlugin, {\n  // Optional: override default icons\n  iconsByType: {\n    danger: 'fas fa-exclamation-triangle',\n    close: 'fas fa-times'\n  }\n});\napp.use(breakpointsPlugin);\napp.use(toastPlugin);\napp.use(modalsPlugin, { \n  modals: [\n    /* your global modals */\n  ] \n});\napp.use(popoversPlugin);\n\n\napp.mount('#app');\n```\n\nFinally, you need to add the display components for plugins like `toast` and `modals` to your root `App.vue` file.\n\n**`src/App.vue`**\n```html\n<template>\n  <!-- Your App Layout -->\n  <router-view />\n\n  <!-- Ulu Plugin Display Components -->\n  <UluToastDisplay />\n  <UluModalsDisplay />\n  <UluTooltipDisplay />\n</template>\n```\n\n---\n\n## What's Inside?\n\nThe library is organized into several key areas:\n\n### Components\n\nThese are the reusable building blocks of your UI. They are organized by function into categories like `elements`, `collapsible`, `forms`, `layout`, `navigation`, and `systems`.\n\n**Simple Component Example: `UluButton`**\n\n<Canvas of={ButtonStories.Primary} />\n\n**Complex Component Example: `UluCard`**\n\n<Canvas of={CardStories.Default} />\n\n### Composables\n\nReusable, stateful logic that can be shared across components.\n\n- `useFacets`: A powerful composable for client-side filtering, searching, and sorting of data.\n- `usePagination`: Handles all the logic for paginating a list of items, including integration with Vue Router.\n- `useBreakpointManager`: A reactive interface to CSS breakpoints.\n- `useModifiers`: A utility for creating BEM-style modifier classes.\n- `useWindowResize`: A debounced window resize event listener.\n- `useRequiredInject`: A utility to ensure required dependencies are injected from plugins.\n\n### Plugins\n\nPlugins provide global functionality and APIs that can be accessed from anywhere in your application.\n\n- **`corePlugin` (Required)**: Manages global settings, primarily for the icon system.\n- **`breakpointsPlugin`**: Provides reactive information about the current CSS breakpoint (`uluIsMobile`, `uluBreakpointActive`).\n- **`modalsPlugin`**: A system for registering and triggering global modals (e.g., for settings or confirmation dialogs).\n- **`toastPlugin`**: A global API (`$uluToast`) for showing toast notifications.\n- **`popoversPlugin`**: Enables a simple `v-ulu-tooltip` directive for tooltips and provides the `UluPopover` component.\n\n**Example: Triggering a Toast Notification**\n```javascript\nimport { useToast } from '@ulu/frontend-vue';\n\nconst toast = useToast();\n\ntoast.add({\n  title: 'Success!',\n  description: 'Your profile has been updated.',\n  class: 'is-success'\n});\n```\n\n### Component Systems\n\nSystems are complex, multi-component features that solve a specific problem.\n\n- **Facets**: A complete system for faceted search, built around the `useFacets` composable. Includes components for search, sort, filters, and results display.\n- **Scroll Anchors**: A system for creating navigations that track the user's scroll position within a page.\n- **Skeleton**: A set of components for creating beautiful and effective loading states.\n- **Table Sticky**: A powerful table component with sticky headers and columns.\n- **Slider**: A flexible slideshow/carousel component.\n\n### Resolver\n\nResolver for [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components/tree/main]) is available to use like:\n\n```js\n// vite.config.js\n\nimport { defineConfig } from \"vite\";\nimport Components from \"unplugin-vue-components/vite\";\nimport { UluUnpluginResolver } from \"@ulu/frontend-vue/resolver\";\n\nexport default defineConfig({\n  plugins: [\n    // ...\n    Components({ \n      resolvers: [\n        UluUnpluginResolver()\n      ]\n    }),\n    // ...\n  ],\n  // ...\n});\n```\n\n### Vite Asset URLs\n\nWhen using components like `UluImage` and `UluImageSource`, you may want to pass relative asset paths directly as props (e.g. `<UluImage src=\"./assets/img.png\" />`) instead of manually importing them in your setup script. \n\nTo enable Vite to automatically resolve these paths, you can add our custom transform rules to the Vue plugin in your `vite.config.js`:\n\n*Note: this includes the defaults (img, source, video, ...) in addition to the Ulu specific components, since configuring this clears the defaults (it's not merged).*\n\n```js\n// vite.config.js\n\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport { uluTransformAssetUrls } from \"@ulu/frontend-vue/vite.js\";\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: {\n        transformAssetUrls: {\n          // \n          ...uluTransformAssetUrls\n        }\n      }\n    }),\n    // ...\n  ],\n  // ...\n});\n```"
     },
     "ExportsMap": {
-      "raw_markdown": "\nimport { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Overview/API Reference\" />\n\n# API Reference\n\nThis page provides a comprehensive map of all named exports from the `@ulu/frontend-vue` library. Use this as a quick reference to discover available components, composables, plugins, and utilities.\n\n## Components\n\nThese are the building blocks for your UI. They are imported as named exports.\n\n*   `UluAccordion`\n*   `UluAccordionGroup`\n*   `UluAction`\n*   `UluAdaptiveLayout`\n*   `UluAlert`\n*   `UluAnimateNumber`\n*   `UluBadge`\n*   `UluBadgeStack`\n*   `UluBreadcrumb`\n*   `UluButton`\n*   `UluButtonVerbose`\n*   `UluCallout`\n*   `UluCard`\n*   `UluCollapsible`\n*   `UluConditionalText`\n*   `UluConditionalWrapper`\n*   `UluDataGrid`\n*   `UluDataTable`\n*   `UluDefinitionList`\n*   `UluDefinitionListItem`\n*   `UluDropdown`\n*   `UluEmpty`\n*   `UluEmptyView`\n*   `UluExternalLink`\n*   `UluFacetsActiveFilters`\n*   `UluFacetsFilterAccordions`\n*   `UluFacetsFilterLists`\n*   `UluFacetsFilterPopovers`\n*   `UluFacetsFilterSelects`\n*   `UluFacetsHeaderLayout`\n*   `UluFacetsList`\n*   `UluFacetsResults`\n*   `UluFacetsSearch`\n*   `UluFacetsSidebarLayout`\n*   `UluFacetsSort`\n*   `UluFileDisplay`\n*   `UluForm`\n*   `UluFormActions`\n*   `UluFormCheckbox`\n*   `UluFormFieldset`\n*   `UluFormFile`\n*   `UluFormItem`\n*   `UluFormItemsInline`\n*   `UluFormLabel`\n*   `UluFormMessage`\n*   `UluFormRadio`\n*   `UluFormRequiredChar`\n*   `UluFormSelect`\n*   `UluFormText`\n*   `UluFormTextarea`\n*   `UluIcon`\n*   `UluImage`\n*   `UluImageSource`\n*   In Progress - `UluImageSlider`\n*   `UluList`\n*   `UluListItem`\n*   `UluCounterList`\n*   `UluMain`\n*   `UluMenu`\n*   `UluMenuStack`\n*   `UluModal`\n*   `UluNavStrip`\n*   `UluOverflowPopover`\n*   `UluPager`\n*   `UluPlaceholderImage`\n*   `UluPlaceholderText`\n*   `UluProgressBar`\n*   `UluProgressCircle`\n*   `UluRouteAnnouncer`\n*   `UluRule`\n*   `UluSanityRichText`\n*   `UluScrollAnchors`\n*   `UluScrollAnchorsHeadlessSection`\n*   `UluScrollAnchorsNav`\n*   `UluScrollAnchorsNavAnimated`\n*   `UluScrollAnchorsSection`\n*   `UluScrollSlider`\n*   `UluSearchForm`\n*   `UluSelectableMenu`\n*   `UluShowSkeleton`\n*   `UluSkeletonContent`\n*   `UluSkeletonMedia`\n*   `UluSkeletonText`\n*   `UluSkipLink`\n*   `UluSlider`\n*   `UluSpokeSpinner`\n*   `UluTab`\n*   `UluTabGroup`\n*   `UluTabList`\n*   `UluTabPanel`\n*   `UluTabPanels`\n*   `UluTable`\n*   `UluTableSticky`\n*   `UluTableStickyRows`\n*   `UluTableStickyTable`\n*   `UluTag`\n*   `UluTitleRail`\n\n---\n\n## Composables\n\nReusable, stateful logic that can be shared across components.\n\n*   `useBreakpointManager`\n*   `useDocumentTitle`\n*   `useFacets`\n*   `useIcon`\n*   `useModifiers`\n*   `usePagination`\n*   `useRequiredInject`\n*   `useScrollAnchorSection`\n*   `useScrollAnchorSections`\n*   `useScrollAnchors`\n*   `useTableData`\n*   `useToast`\n*   `useTooltip`\n*   `useTooltipFollow`\n*   `useUluFloating`\n*   `useWindowResize`\n\n---\n\n## Plugins\n\nPlugins provide global functionality and APIs.\n\n*   `breakpointsPlugin`\n*   `corePlugin`\n*   `modalsPlugin`\n*   `popoversPlugin`\n*   `toastPlugin`\n\n\n\n---\n\n## Utilities\n\nThe `utils` export is a namespace containing helper functions.\n\n*   `utils.dom`\n*   `utils.router`\n\n`\n*   `utils.router`\n"
+      "raw_markdown": "\nimport { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Overview/API Reference\" />\n\n# API Reference\n\nThis page provides a comprehensive map of all named exports from the `@ulu/frontend-vue` library. Use this as a quick reference to discover available components, composables, plugins, and utilities.\n\n## Components\n\nThese are the building blocks for your UI. They are imported as named exports.\n\n*   `UluAccordion`\n*   `UluAccordionGroup`\n*   `UluAction`\n*   `UluAdaptiveLayout`\n*   `UluAlert`\n*   `UluAnimateNumber`\n*   `UluBadge`\n*   `UluBadgeStack`\n*   `UluBreadcrumb`\n*   `UluButton`\n*   `UluButtonVerbose`\n*   `UluCallout`\n*   `UluCard`\n*   `UluCollapsible`\n*   `UluConditionalText`\n*   `UluConditionalWrapper`\n*   `UluDataGrid`\n*   `UluDataTable`\n*   `UluDefinitionList`\n*   `UluDefinitionListItem`\n*   `UluDropdown`\n*   `UluEmpty`\n*   `UluEmptyView`\n*   `UluExternalLink`\n*   `UluFacetsActiveFilters`\n*   `UluFacetsFilterAccordions`\n*   `UluFacetsFilterLists`\n*   `UluFacetsFilterPopovers`\n*   `UluFacetsFilterSelects`\n*   `UluFacetsHeaderLayout`\n*   `UluFacetsList`\n*   `UluFacetsResults`\n*   `UluFacetsSearch`\n*   `UluFacetsSidebarLayout`\n*   `UluFacetsSort`\n*   `UluFileDisplay`\n*   `UluForm`\n*   `UluFormActions`\n*   `UluFormCheckbox`\n*   `UluFormFieldset`\n*   `UluFormFile`\n*   `UluFormItem`\n*   `UluFormItemsInline`\n*   `UluFormLabel`\n*   `UluFormMessage`\n*   `UluFormRadio`\n*   `UluFormRequiredChar`\n*   `UluFormSelect`\n*   `UluFormText`\n*   `UluFormTextarea`\n*   `UluIcon`\n*   `UluImage`\n*   `UluImageSource`\n*   In Progress - `UluImageSlider`\n*   `UluList`\n*   `UluListItem`\n*   `UluCounterList`\n*   `UluMain`\n*   `UluMenu`\n*   `UluMenuStack`\n*   `UluModal`\n*   `UluNavStrip`\n*   `UluOverflowPopover`\n*   `UluPager`\n*   `UluPlaceholderImage`\n*   `UluPlaceholderText`\n*   `UluProgressBar`\n*   `UluProgressCircle`\n*   `UluRouteAnnouncer`\n*   `UluRule`\n*   `UluSanityRichText`\n*   `UluScrollAnchors`\n*   `UluScrollAnchorsHeadlessSection`\n*   `UluScrollAnchorsNav`\n*   `UluScrollAnchorsNavAnimated`\n*   `UluScrollAnchorsSection`\n*   `UluScrollSlider`\n*   `UluSearchForm`\n*   `UluSelectableMenu`\n*   `UluShowSkeleton`\n*   `UluSkeletonContent`\n*   `UluSkeletonMedia`\n*   `UluSkeletonText`\n*   `UluSkipLink`\n*   `UluSlider`\n*   `UluSpokeSpinner`\n*   `UluTab`\n*   `UluTabGroup`\n*   `UluTabList`\n*   `UluTabPanel`\n*   `UluTabPanels`\n*   `UluTable`\n*   `UluTableSticky`\n*   `UluTableStickyRows`\n*   `UluTableStickyTable`\n*   `UluTag`\n*   `UluTitleRail`\n*   `UluToast`\n*   `UluToastDisplay`\n\n---\n\n## Composables\n\nReusable, stateful logic that can be shared across components.\n\n*   `useBreakpointManager`\n*   `useDocumentTitle`\n*   `useFacets`\n*   `useIcon`\n*   `useModifiers`\n*   `usePagination`\n*   `useRequiredInject`\n*   `useScrollAnchorSection`\n*   `useScrollAnchorSections`\n*   `useScrollAnchors`\n*   `useTableData`\n*   `useToast`\n*   `useTooltip`\n*   `useTooltipFollow`\n*   `useUluFloating`\n*   `useWindowResize`\n\n---\n\n## Plugins\n\nPlugins provide global functionality and APIs.\n\n*   `breakpointsPlugin`\n*   `corePlugin`\n*   `modalsPlugin`\n*   `popoversPlugin`\n*   `toastPlugin`\n\n\n\n---\n\n## Utilities\n\nThe `utils` export is a namespace containing helper functions.\n\n*   `utils.dom`\n*   `utils.router`\n\n`\n*   `utils.router`\n"
     },
     "ChangeLog": {
       "raw_markdown": "import { Meta, Markdown } from '@storybook/addon-docs/blocks';\nimport CHANGELOG from '../CHANGELOG.md?raw';\n\n<Meta title=\"Overview/Change Log\" />\n\n<Markdown>\n{CHANGELOG}\n</Markdown>"
@@ -12274,6 +12274,9 @@
     "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"
     },
+    "facets": {
+      "raw_markdown": "# Faceted Search\n\nThis story demonstrates the `useFacets` composable and its associated components. It showcases how to set up a faceted search interface with automatic facet generation, searching, sorting, and filtering. For detailed configuration options, see the [`facetFields` API reference](#facetfields-api) below the example.\n\n```html\n<script setup>\n  import { ref } from 'vue';\n  import { useFacets } from './useFacets.js';\n  import UluFacetsFilterAccordions from './UluFacetsFilterAccordions.vue';\n  import UluFacetsResults from './UluFacetsResults.vue';\n  import UluFacetsSearch from './UluFacetsSearch.vue';\n  import UluFacetsSort from './UluFacetsSort.vue';\n  import UluFacetsSidebarLayout from './UluFacetsSidebarLayout.vue';\n  import { mockItems } from './_mock-data';\n\n  const allItems = ref(mockItems);\n\n  // 1. Define fields for automatic facet generation\n  const facetFields = [\n    { name: 'Category', uid: 'category', open: true, multiple: true },\n    { name: 'Author', uid: 'author', open: true },\n    { name: 'Year', uid: 'date', open: true, getValue: item => item.date.getFullYear() }\n  ];\n\n  // 2. Define any extra sort types\n  const extraSortTypes = {\n    newest: { text: 'Date (Newest)', sort: (items) => [...items].sort((a, b) => b.date - a.date) },\n    oldest: { text: 'Date (Oldest)', sort: (items) => [...items].sort((a, b) => a.date - b.date) }\n  };\n\n  // 3. Initialize the composable\n  const {\n    facets,\n    searchValue,\n    selectedSort,\n    sortTypes,\n    displayItems,\n    selectedFacets, // Use this to check if filters are active\n    handleFacetChange,\n    clearFilters\n  } = useFacets(allItems, {\n    facetFields,\n    extraSortTypes,\n    initialSortType: 'newest',\n    countMode: 'intuitive', // Show counts next to facet values\n    searchOptions: { keys: ['title', 'description', 'author'] }\n  });\n</script>\n\n<template>\n  <UluFacetsSidebarLayout>\n    <template #header>\n      <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee;\">\n        <h2>Found {{ displayItems.length }} items</h2>\n        <UluFacetsSort v-model=\"selectedSort\" :sort-types=\"sortTypes\" />\n      </div>\n    </template>\n    <template #sidebar>\n      <UluFacetsSearch v-model=\"searchValue\" placeholder=\"Search articles...\" />\n      <hr/>\n      <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n        <h3>Filters</h3>\n        <button v-if=\"selectedFacets.length > 0\" @click=\"clearFilters\" style=\"border: none; background: none; color: blue; cursor: pointer;\">Clear</button>\n      </div>\n      <UluFacetsFilterAccordions :facets=\"facets\" @facet-change=\"handleFacetChange\" :max-visible=\"5\" />\n    </template>\n    <template #main>\n      <UluFacetsResults :items=\"displayItems\">\n        <template #item=\"{ item }\">\n          <div style=\"border: 1px solid #eee; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;\">\n            <h3>{{ item.title }}</h3>\n            <p>{{ item.description }}</p>\n            <p><small><strong>Author:</strong> {{ Array.isArray(item.author) ? item.author.join(', ') : item.author }}</small></p>\n            <p><small><strong>Published on:</strong> {{ item.date.toLocaleDateString() }}</small></p>\n          </div>\n        </template>\n        <template #empty>\n          <div style=\"padding: 2rem; text-align: center;\">\n            <p>No matching items found. Try clearing some filters.</p>\n          </div>\n        </template>\n      </UluFacetsResults>\n    </template>\n  </UluFacetsSidebarLayout>\n</template>\n```\n\n<h3 id=\"facetfields-api\">facetFields API</h3>\n\nThe `useFacets` composable can automatically generate filter groups from a `facetFields` configuration array. Each object in the array defines a facet group and its behavior. Here are the available keys:\n\n<table>\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Type</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code>uid</code></td>\n      <td><code>String</code></td>\n      <td><strong>Required</strong></td>\n      <td>The property key on each item in your data array that holds the facet&#39;s value.</td>\n    </tr>\n    <tr>\n      <td><code>name</code></td>\n      <td><code>String</code></td>\n      <td><strong>Required</strong></td>\n      <td>The display name for the facet group, shown as a title in the UI.</td>\n    </tr>\n    <tr>\n      <td><code>multiple</code></td>\n      <td><code>Boolean</code></td>\n      <td><code>false</code></td>\n      <td>If <code>true</code>, allows multiple values to be selected (renders as checkboxes). If <code>false</code>,\n        only one value can be selected (renders as radio buttons).</td>\n    </tr>\n    <tr>\n      <td><code>open</code></td>\n      <td><code>Boolean</code></td>\n      <td><code>false</code></td>\n      <td>If <code>true</code>, the facet group will be expanded by default in the UI.</td>\n    </tr>\n    <tr>\n      <td><code>match</code></td>\n      <td><code>String</code></td>\n      <td><code>&#39;some&#39;</code></td>\n      <td>Only applies when <code>multiple: true</code>. If set to <code>&#39;all&#39;</code>, items must match\n        <strong>all</strong> selected values in the group (AND logic). The default is to match <strong>any</strong>\n        value (OR logic).</td>\n    </tr>\n    <tr>\n      <td><code>getValue</code></td>\n      <td><code>Function</code></td>\n      <td><code>item =&gt; item[uid]</code></td>\n      <td>A function that receives an item and returns the value for the facet. Useful for derived or nested values\n        (e.g., <code>item =&gt; item.date.getFullYear()</code>).</td>\n    </tr>\n    <tr>\n      <td><code>getLabel</code></td>\n      <td><code>Function</code></td>\n      <td><code>value =&gt; value</code></td>\n      <td>A function that receives a facet value and returns a formatted string for display. Useful for transforming\n        values into more readable labels.</td>\n    </tr>\n  </tbody>\n</table>"
+    },
     "useScrollAnchors": {
       "raw_markdown": "# useScrollAnchors\n\nThe main composable that contains the core \"engine\" for the Scroll Anchors system.\nIt encapsulates the `IntersectionObserver` logic to track sections and manage their active state.\nThis is intended for advanced use cases where a developer needs to build a custom provider\ncomponent instead of using the default `UluScrollAnchors`.\n\n## Usage\n\nThis composable is used to power a custom provider component. You would use it to provide the context to child components via Vue's `provide` function, using string-based keys.\n\n```html\n<script setup>\n  import { ref, computed, provide } from \"vue\";\n  import { useScrollAnchors } from './useScrollAnchors.js';\n\n  const props = defineProps({\n    firstItemActive: Boolean,\n    observerOptions: Object\n  });\n  const emit = defineEmits(['section-change']);\n  const componentEl = ref(null);\n  const sections = ref([]);\n\n  // Use the composable to handle the core logic\n  useScrollAnchors({ sections, props, emit, componentElRef: componentEl });\n\n  // Provide the state and registration functions to children\n  provide('uluScrollAnchorsSections', computed(() => sections.value));\n  provide('uluScrollAnchorsRegister', (section) => sections.value.push(section));\n  provide('uluScrollAnchorsUnregister', (sectionId) => {\n    const index = sections.value.findIndex(r => r.id === sectionId);\n    if (index > -1) sections.value.splice(index, 1);\n  });\n</script>\n\n<template>\n  <!-- Your custom wrapper, or no wrapper at all -->\n  <div ref=\"componentEl\">\n    <slot/>\n  </div>\n</template>\n```\n\n## Parameters\n\nThe `useScrollAnchors` composable accepts a single object with the following properties:\n\n- `sections` (Ref): A `ref` to the array of section objects that will be tracked.\n- `props` (Object): A props object containing `observerOptions` and `firstItemActive`.\n- `emit` (Function): The `emit` function from the host component, used to emit the `section-change` event.\n- `componentElRef` (Ref): A `ref` to an element within the component, used to find the nearest scrollable ancestor. This is not needed if `observerOptions.root` is set.\n\n## Returns\n\nThis composable does not return any values. It manages the observer and mutates the `active` state on the items within the `sections` array directly.\n"
     },
@@ -12283,9 +12286,6 @@
     "useScrollAnchorSection": {
       "raw_markdown": "# useScrollAnchorSection\n\nA composable that provides the core logic for a scroll anchor section, allowing components to register themselves with the `UluScrollAnchors` parent and react to their active state.\n\nThis composable is intended to be used within a Vue component's `<script setup>` block to manage the lifecycle and state of a scrollable section.\n\n## Usage\n\n```html\n<script setup>\nimport { useScrollAnchorSection } from './useScrollAnchorSection';\n\nconst props = defineProps({\n  title: {\n    type: String,\n    required: true\n  },\n  customTitleId: String,\n});\n\nconst { sectionRef, titleId, isActive, section } = useScrollAnchorSection(props);\n</script>\n\n<template>\n  <section :class=\"['my-custom-section', { 'is-active': isActive }]\" :ref=\"sectionRef\">\n    <h2 :id=\"titleId\">{{ title }}</h2>\n    <p>This section is {{ isActive ? 'active' : 'inactive' }}.</p>\n    <!-- More content here -->\n    <slot />\n  </section>\n</template>\n```\n\n## Parameters\n\nThe `useScrollAnchorSection` composable accepts a `props` object with the following properties:\n\n- `title` (String, required): The title of the section. Used for generating a default `titleId` and for display in navigation.\n- `customTitleId` (String, optional): A custom ID for the section's anchor. If not provided, one will be generated from the `title`.\n\n## Returns\n\nThe composable returns an object with the following reactive properties:\n\n- `sectionRef`: A ref that should be bound to the root HTML element of your section component. This element is observed by `UluScrollAnchors` to determine the section's visibility.\n- `titleId` (ComputedRef): The unique ID for the section's title, used for anchor links.\n- `isActive` (ComputedRef): A boolean indicating whether the section is currently active (in view).\n- `section` (Reactive): The full reactive section object registered with `UluScrollAnchors`, containing `id`, `title`, `titleId`, `element`, and `active` state.\n\n## Integration with `UluScrollAnchors`\n\nThis composable works in conjunction with the `UluScrollAnchors` component. When a component using `useScrollAnchorSection` is mounted within `UluScrollAnchors`, it automatically registers itself. `UluScrollAnchors` then tracks its visibility and updates the `isActive` state.\n"
     },
-    "facets": {
-      "raw_markdown": "# Faceted Search\n\nThis story demonstrates the `useFacets` composable and its associated components. It showcases how to set up a faceted search interface with automatic facet generation, searching, sorting, and filtering. For detailed configuration options, see the [`facetFields` API reference](#facetfields-api) below the example.\n\n```html\n<script setup>\n  import { ref } from 'vue';\n  import { useFacets } from './useFacets.js';\n  import UluFacetsFilterAccordions from './UluFacetsFilterAccordions.vue';\n  import UluFacetsResults from './UluFacetsResults.vue';\n  import UluFacetsSearch from './UluFacetsSearch.vue';\n  import UluFacetsSort from './UluFacetsSort.vue';\n  import UluFacetsSidebarLayout from './UluFacetsSidebarLayout.vue';\n  import { mockItems } from './_mock-data';\n\n  const allItems = ref(mockItems);\n\n  // 1. Define fields for automatic facet generation\n  const facetFields = [\n    { name: 'Category', uid: 'category', open: true, multiple: true },\n    { name: 'Author', uid: 'author', open: true },\n    { name: 'Year', uid: 'date', open: true, getValue: item => item.date.getFullYear() }\n  ];\n\n  // 2. Define any extra sort types\n  const extraSortTypes = {\n    newest: { text: 'Date (Newest)', sort: (items) => [...items].sort((a, b) => b.date - a.date) },\n    oldest: { text: 'Date (Oldest)', sort: (items) => [...items].sort((a, b) => a.date - b.date) }\n  };\n\n  // 3. Initialize the composable\n  const {\n    facets,\n    searchValue,\n    selectedSort,\n    sortTypes,\n    displayItems,\n    selectedFacets, // Use this to check if filters are active\n    handleFacetChange,\n    clearFilters\n  } = useFacets(allItems, {\n    facetFields,\n    extraSortTypes,\n    initialSortType: 'newest',\n    countMode: 'intuitive', // Show counts next to facet values\n    searchOptions: { keys: ['title', 'description', 'author'] }\n  });\n</script>\n\n<template>\n  <UluFacetsSidebarLayout>\n    <template #header>\n      <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee;\">\n        <h2>Found {{ displayItems.length }} items</h2>\n        <UluFacetsSort v-model=\"selectedSort\" :sort-types=\"sortTypes\" />\n      </div>\n    </template>\n    <template #sidebar>\n      <UluFacetsSearch v-model=\"searchValue\" placeholder=\"Search articles...\" />\n      <hr/>\n      <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n        <h3>Filters</h3>\n        <button v-if=\"selectedFacets.length > 0\" @click=\"clearFilters\" style=\"border: none; background: none; color: blue; cursor: pointer;\">Clear</button>\n      </div>\n      <UluFacetsFilterAccordions :facets=\"facets\" @facet-change=\"handleFacetChange\" :max-visible=\"5\" />\n    </template>\n    <template #main>\n      <UluFacetsResults :items=\"displayItems\">\n        <template #item=\"{ item }\">\n          <div style=\"border: 1px solid #eee; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;\">\n            <h3>{{ item.title }}</h3>\n            <p>{{ item.description }}</p>\n            <p><small><strong>Author:</strong> {{ Array.isArray(item.author) ? item.author.join(', ') : item.author }}</small></p>\n            <p><small><strong>Published on:</strong> {{ item.date.toLocaleDateString() }}</small></p>\n          </div>\n        </template>\n        <template #empty>\n          <div style=\"padding: 2rem; text-align: center;\">\n            <p>No matching items found. Try clearing some filters.</p>\n          </div>\n        </template>\n      </UluFacetsResults>\n    </template>\n  </UluFacetsSidebarLayout>\n</template>\n```\n\n<h3 id=\"facetfields-api\">facetFields API</h3>\n\nThe `useFacets` composable can automatically generate filter groups from a `facetFields` configuration array. Each object in the array defines a facet group and its behavior. Here are the available keys:\n\n<table>\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Type</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code>uid</code></td>\n      <td><code>String</code></td>\n      <td><strong>Required</strong></td>\n      <td>The property key on each item in your data array that holds the facet&#39;s value.</td>\n    </tr>\n    <tr>\n      <td><code>name</code></td>\n      <td><code>String</code></td>\n      <td><strong>Required</strong></td>\n      <td>The display name for the facet group, shown as a title in the UI.</td>\n    </tr>\n    <tr>\n      <td><code>multiple</code></td>\n      <td><code>Boolean</code></td>\n      <td><code>false</code></td>\n      <td>If <code>true</code>, allows multiple values to be selected (renders as checkboxes). If <code>false</code>,\n        only one value can be selected (renders as radio buttons).</td>\n    </tr>\n    <tr>\n      <td><code>open</code></td>\n      <td><code>Boolean</code></td>\n      <td><code>false</code></td>\n      <td>If <code>true</code>, the facet group will be expanded by default in the UI.</td>\n    </tr>\n    <tr>\n      <td><code>match</code></td>\n      <td><code>String</code></td>\n      <td><code>&#39;some&#39;</code></td>\n      <td>Only applies when <code>multiple: true</code>. If set to <code>&#39;all&#39;</code>, items must match\n        <strong>all</strong> selected values in the group (AND logic). The default is to match <strong>any</strong>\n        value (OR logic).</td>\n    </tr>\n    <tr>\n      <td><code>getValue</code></td>\n      <td><code>Function</code></td>\n      <td><code>item =&gt; item[uid]</code></td>\n      <td>A function that receives an item and returns the value for the facet. Useful for derived or nested values\n        (e.g., <code>item =&gt; item.date.getFullYear()</code>).</td>\n    </tr>\n    <tr>\n      <td><code>getLabel</code></td>\n      <td><code>Function</code></td>\n      <td><code>value =&gt; value</code></td>\n      <td>A function that receives a facet value and returns a formatted string for display. Useful for transforming\n        values into more readable labels.</td>\n    </tr>\n  </tbody>\n</table>"
-    },
     "jsdoc": [
       {
         "id": "module:vite",
@@ -12392,45 +12392,6 @@
         "order": 25,
         "level": 0
       },
-      {
-        "id": "plugins\nResponsible for exporting all plugins\n- Used in bundle exportsmodule:",
-        "longname": "plugins\nResponsible for exporting all plugins\n- Used in bundle exportsmodule:",
-        "name": "plugins\nResponsible for exporting all plugins\n- Used in bundle exports",
-        "kind": "module",
-        "meta": {
-          "lineno": 1,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins"
-        },
-        "order": 28,
-        "level": 0
-      },
-      {
-        "id": "module:components",
-        "longname": "module:components",
-        "name": "components",
-        "kind": "module",
-        "meta": {
-          "lineno": 1,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/components"
-        },
-        "order": 29,
-        "level": 0
-      },
-      {
-        "id": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exportsmodule:",
-        "longname": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exportsmodule:",
-        "name": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exports",
-        "kind": "module",
-        "meta": {
-          "lineno": 4,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/components"
-        },
-        "order": 30,
-        "level": 0
-      },
       {
         "id": "module:useWindowResize",
         "longname": "module:useWindowResize",
@@ -12441,7 +12402,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 31,
+        "order": 28,
         "level": 0
       },
       {
@@ -12454,7 +12415,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 34,
+        "order": 31,
         "level": 0
       },
       {
@@ -12467,7 +12428,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 38,
+        "order": 35,
         "level": 0
       },
       {
@@ -12480,7 +12441,7 @@
           "filename": "useRequiredInject.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 46,
+        "order": 43,
         "level": 0
       },
       {
@@ -12493,7 +12454,7 @@
           "filename": "usePagination.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 48,
+        "order": 45,
         "level": 0
       },
       {
@@ -12506,7 +12467,7 @@
           "filename": "useModifiers.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 50,
+        "order": 47,
         "level": 0
       },
       {
@@ -12519,7 +12480,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 52,
+        "order": 49,
         "level": 0
       },
       {
@@ -12532,7 +12493,7 @@
           "filename": "useDocumentTitle.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 55,
+        "order": 52,
         "level": 0
       },
       {
@@ -12545,7 +12506,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 57,
+        "order": 54,
         "level": 0
       },
       {
@@ -12558,6 +12519,45 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
+        "order": 59,
+        "level": 0
+      },
+      {
+        "id": "plugins\nResponsible for exporting all plugins\n- Used in bundle exportsmodule:",
+        "longname": "plugins\nResponsible for exporting all plugins\n- Used in bundle exportsmodule:",
+        "name": "plugins\nResponsible for exporting all plugins\n- Used in bundle exports",
+        "kind": "module",
+        "meta": {
+          "lineno": 1,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins"
+        },
+        "order": 60,
+        "level": 0
+      },
+      {
+        "id": "module:components",
+        "longname": "module:components",
+        "name": "components",
+        "kind": "module",
+        "meta": {
+          "lineno": 1,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/components"
+        },
+        "order": 61,
+        "level": 0
+      },
+      {
+        "id": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exportsmodule:",
+        "longname": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exportsmodule:",
+        "name": "components/index.js\nResponsible for exporting all components\n- Used in main plugin and bundle exports",
+        "kind": "module",
+        "meta": {
+          "lineno": 4,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/components"
+        },
         "order": 62,
         "level": 0
       },
@@ -13031,7 +13031,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 58
+        "order": 55
       },
       {
         "id": "module:useBreakpointManager~defaults.onReady",
@@ -13046,7 +13046,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 59
+        "order": 56
       },
       {
         "id": "module:useBreakpointManager~defaults.plugin",
@@ -13061,7 +13061,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 60
+        "order": 57
       },
       {
         "id": "toast.module:defaults--module.exports",
@@ -14641,7 +14641,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 33,
+        "order": 30,
         "level": 0
       },
       {
@@ -14695,7 +14695,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 37,
+        "order": 34,
         "level": 0
       },
       {
@@ -14732,7 +14732,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 39,
+        "order": 36,
         "level": 0
       },
       {
@@ -14764,7 +14764,7 @@
           "filename": "useRequiredInject.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 47,
+        "order": 44,
         "level": 0
       },
       {
@@ -14810,7 +14810,7 @@
           "filename": "usePagination.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 49,
+        "order": 46,
         "level": 0
       },
       {
@@ -14883,7 +14883,7 @@
           "filename": "useModifiers.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 51,
+        "order": 48,
         "level": 0
       },
       {
@@ -14909,7 +14909,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 53,
+        "order": 50,
         "level": 0
       },
       {
@@ -14979,7 +14979,7 @@
           "filename": "useDocumentTitle.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 56,
+        "order": 53,
         "level": 0
       },
       {
@@ -15047,7 +15047,7 @@
           "filename": "useBreakpointManager.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 61,
+        "order": 58,
         "level": 0
       },
       {
@@ -15485,7 +15485,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 45,
+        "order": 42,
         "level": 0
       },
       {
@@ -15598,7 +15598,7 @@
           "filename": "useWindowResize.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 32,
+        "order": 29,
         "level": 0
       },
       {
@@ -15615,7 +15615,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 40,
+        "order": 37,
         "level": 0
       },
       {
@@ -15632,7 +15632,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 41,
+        "order": 38,
         "level": 0
       },
       {
@@ -15649,7 +15649,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 42,
+        "order": 39,
         "level": 0
       },
       {
@@ -15666,7 +15666,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 43,
+        "order": 40,
         "level": 0
       },
       {
@@ -15683,7 +15683,7 @@
           "filename": "useTableData.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 44,
+        "order": 41,
         "level": 0
       },
       {
@@ -15723,7 +15723,7 @@
           "filename": "useIcon.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 54,
+        "order": 51,
         "level": 0
       },
       {
@@ -16177,7 +16177,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 35,
+        "order": 32,
         "level": 0
       },
       {
@@ -16264,7 +16264,7 @@
           "filename": "useUluFloating.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/composables"
         },
-        "order": 36,
+        "order": 33,
         "level": 0
       },
       {