@ulu/frontend-vue 0.6.8 → 0.6.9

package/dist/components/collapsible/UluTab.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluTab.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTab.vue"],"names":[],"mappings":"AAKA;wBAsEqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AATjC,6SAMG"}
+{"version":3,"file":"UluTab.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTab.vue"],"names":[],"mappings":"AAKA;wBAyEqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AATjC,6SAMG"}

package/dist/components/collapsible/UluTab.vue.js

@@ -1,11 +1,11 @@
-import { createBlock as t, openBlock as o, unref as a, withCtx as l, renderSlot as n, normalizeProps as u, guardReactiveProps as p } from "vue";
-import { Tab as s } from "@headlessui/vue";
+import { createBlock as t, openBlock as a, unref as o, withCtx as s, renderSlot as l, normalizeProps as _, guardReactiveProps as c } from "vue";
+import { Tab as n } from "@headlessui/vue";
 const i = {
   __name: "UluTab",
-  setup(c) {
-    return (e, _) => (o(), t(a(s), null, {
-      default: l((r) => [
-        n(e.$slots, "default", u(p(r)))
+  setup(p) {
+    return (e, u) => (a(), t(o(n), { class: "tabs__tab" }, {
+      default: s((r) => [
+        l(e.$slots, "default", _(c(r)))
       ]),
       _: 3
     }));

package/dist/components/collapsible/UluTabGroup.vue.d.ts

@@ -5,10 +5,14 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     vertical: boolean;
+    sticky: boolean;
+    transparent: boolean;
     modifiers?: string | unknown[] | undefined;
     defaultIndex?: number | undefined;
     $props: {
         readonly vertical?: boolean | undefined;
+        readonly sticky?: boolean | undefined;
+        readonly transparent?: boolean | undefined;
         readonly modifiers?: string | unknown[] | undefined;
         readonly defaultIndex?: number | undefined;
     };

package/dist/components/collapsible/UluTabGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluTabGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTabGroup.vue"],"names":[],"mappings":"AAoBA;wBAmJqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;2OAOG"}
+{"version":3,"file":"UluTabGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTabGroup.vue"],"names":[],"mappings":"AAeA;wBA2KqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;;;;;2OAOG"}

package/dist/components/collapsible/UluTabGroup.vue.js

@@ -1,7 +1,7 @@
-import { createBlock as l, openBlock as i, unref as t, withCtx as n, createElementVNode as d, mergeProps as c, renderSlot as u, normalizeProps as f, guardReactiveProps as m } from "vue";
-import { TabGroup as p } from "@headlessui/vue";
-import { useModifiers as v } from "../../composables/useModifiers.js";
-const h = /* @__PURE__ */ Object.assign({
+import { computed as n, createBlock as i, openBlock as l, unref as a, withCtx as c, createElementVNode as d, mergeProps as u, renderSlot as f, normalizeProps as p, guardReactiveProps as m } from "vue";
+import { TabGroup as v } from "@headlessui/vue";
+import { useModifiers as b } from "../../composables/useModifiers.js";
+const y = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "UluTabGroup",
@@ -14,27 +14,38 @@ const h = /* @__PURE__ */ Object.assign({
      * Whether or not to use vertical layout
      */
     vertical: Boolean,
+    /**
+     * Whether or not to use sticky modifier (tablist)
+     */
+    sticky: Boolean,
+    /**
+     * Whether or not to use transparent modifier (tab panels)
+     */
+    transparent: Boolean,
     /**
      * Class modifiers (ie. 'transparent', 'secondary', etc)
      */
     modifiers: [String, Array]
   },
-  setup(e) {
-    const a = e, { resolvedModifiers: s } = v({ props: a, baseClass: "tabs" });
-    return (r, b) => (i(), l(t(p), {
-      defaultIndex: e.defaultIndex,
-      vertical: e.vertical
+  setup(t) {
+    const e = t, { resolvedModifiers: s } = b({
+      props: e,
+      baseClass: "tabs",
+      internal: n(() => ({
+        vertical: e.vertical,
+        sticky: e.sticky,
+        transparent: e.transparent
+      }))
+    });
+    return (r, k) => (l(), i(a(v), {
+      defaultIndex: t.defaultIndex,
+      vertical: t.vertical
     }, {
-      default: n((o) => [
-        d("div", c(r.$attrs, {
-          class: ["tabs", [
-            t(s),
-            {
-              "tabs--vertical": e.vertical
-            }
-          ]]
+      default: c((o) => [
+        d("div", u(r.$attrs, {
+          class: ["tabs", a(s)]
         }), [
-          u(r.$slots, "default", f(m(o)))
+          f(r.$slots, "default", p(m(o)))
         ], 16)
       ]),
       _: 3
@@ -42,5 +53,5 @@ const h = /* @__PURE__ */ Object.assign({
   }
 });
 export {
-  h as default
+  y as default
 };

package/dist/components/collapsible/UluTabPanel.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluTabPanel.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTabPanel.vue"],"names":[],"mappings":"AAKA;wBAsEqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AATjC,6SAMG"}
+{"version":3,"file":"UluTabPanel.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTabPanel.vue"],"names":[],"mappings":"AAKA;wBAyEqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AATjC,6SAMG"}

package/dist/components/collapsible/UluTabPanel.vue.js

@@ -1,11 +1,11 @@
-import { createBlock as t, openBlock as a, unref as o, withCtx as l, renderSlot as n, normalizeProps as u, guardReactiveProps as p } from "vue";
-import { TabPanel as s } from "@headlessui/vue";
+import { createBlock as r, openBlock as t, unref as o, withCtx as l, renderSlot as n, normalizeProps as s, guardReactiveProps as p } from "vue";
+import { TabPanel as _ } from "@headlessui/vue";
 const i = {
   __name: "UluTabPanel",
   setup(c) {
-    return (e, _) => (a(), t(o(s), null, {
-      default: l((r) => [
-        n(e.$slots, "default", u(p(r)))
+    return (e, u) => (t(), r(o(_), { class: "tabs__tabpanel" }, {
+      default: l((a) => [
+        n(e.$slots, "default", s(p(a)))
       ]),
       _: 3
     }));

package/dist/components/elements/UluButton.vue.d.ts

@@ -5,13 +5,13 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     iconOnly: boolean;
+    transparent: boolean;
     iconBefore: boolean;
     primary: boolean;
     secondary: boolean;
     small: boolean;
     large: boolean;
     outline: boolean;
-    transparent: boolean;
     noMargin: boolean;
     type?: string | undefined;
     size?: string | undefined;
@@ -26,13 +26,13 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     ariaLabel?: string | undefined;
     $props: {
         readonly iconOnly?: boolean | undefined;
+        readonly transparent?: boolean | undefined;
         readonly iconBefore?: boolean | undefined;
         readonly primary?: boolean | undefined;
         readonly secondary?: boolean | undefined;
         readonly small?: boolean | undefined;
         readonly large?: boolean | undefined;
         readonly outline?: boolean | undefined;
-        readonly transparent?: boolean | undefined;
         readonly noMargin?: boolean | undefined;
         readonly type?: string | undefined;
         readonly size?: string | undefined;

package/dist/mcp-data.json

@@ -211,34 +211,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 +434,34 @@
       }
     ],
     "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": [],
     "UluTableSticky": [
       {
         "title": "Default",
@@ -3444,6 +3444,16 @@
           "type": "boolean",
           "description": "Whether or not to use vertical layout"
         },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "description": "Whether or not to use sticky modifier (tablist)"
+        },
+        {
+          "name": "transparent",
+          "type": "boolean",
+          "description": "Whether or not to use transparent modifier (tab panels)"
+        },
         {
           "name": "modifiers",
           "type": "string|array",
@@ -9565,6 +9575,20 @@
               "name": "boolean"
             }
           },
+          {
+            "name": "sticky",
+            "description": "Whether or not to use sticky modifier (tablist)",
+            "type": {
+              "name": "boolean"
+            }
+          },
+          {
+            "name": "transparent",
+            "description": "Whether or not to use transparent modifier (tab panels)",
+            "type": {
+              "name": "boolean"
+            }
+          },
           {
             "name": "modifiers",
             "description": "Class modifiers (ie. 'transparent', 'secondary', etc)",
@@ -12204,12 +12228,12 @@
     "useBreakpointManager": {
       "raw_markdown": "# useBreakpointManager\n\nComposable for adding breakpoint manager and related breakpoint info (via breakpoint manager from `@ulu/frontend/js/ui/breakpoints.js > BreakpointManager`).\n\n**Note:** Using the composable is only necessary for unique situations. For basic breakpoint setup use the `breakpointsPlugin`. Which uses this composable.\n\n## Options for this composable\n\n```js\nconst defaults = {\n  /**\n   * Set an initial value (value in mounted, SSR)\n   */\n  initialValue: null,\n  /**\n   * Function called after init (passed manager)\n   */\n  onReady: null,\n  /**\n   * Options sent to CssBreakpoints library (ulu/frontend/js/breakpoints <BreakpointManager>)\n   */\n  plugin: {\n    customProperty: \"--breakpoint\"\n  }\n}\n```\n\n## Example Usage\n\n```html\n<script setup>\n  import { ref, computed, provide } from \"vue\";\n  import { useBreakpointManager } from \"./useBreakpointManager.js\";\n\n  const isMobile = ref(false);\n\n  // Example using the onReady callback to set reactive value isMobile\n  // - In this situation isMobile is being used as a primary change in  \n  //   the applications layout \n  const options = { \n    onReady(manager) {\n      manager.at(\"small\").max(() => isMobile.value = true);\n      manager.at(\"large\").min(() => isMobile.value = false);\n    }\n  };\n\n  // Composable returns the following\n  const { \n    /**\n     * Reference to underlying BreakpointManager class\n    */\n    breakpointManager, \n    /**\n     * Active breakpoint name\n    */\n    breakpointActive, \n    /**\n     * Current resizeDirection (\"up\"|\"down\"|null)\n    */\n    breakpointDirection \n  } = useBreakpointManager(options);\n\n\n  // Allowing all components to access these values\n  provide(\"uluBreakpointActive\", computed(() => breakpointActive));\n  provide(\"uluBreakpointDirection\", computed(() => breakpointDirection));\n  provide(\"uluBreakpointManager\", computed(() => breakpointManager));\n  provide(\"uluIsMobile\", computed(() => isMobile));\n\n</script>\n```"
     },
-    "core": {
-      "raw_markdown": "# Core Plugin\n\n## Purpose\n\nThe Core Plugin is the central, **required** plugin for the `@ulu/frontend-vue` library. Its primary purpose is to establish a single, reactive source of truth for configuration settings that are shared across multiple components. \n\nBy using Vue's `provide`/`inject` system, this plugin ensures that all components within your application access the same configuration, preventing inconsistencies that can arise from separate module imports.\n\n## Installation\n\nTo use this library, you must register the `corePlugin` on your Vue app instance. You can also pass an options object to override the default settings.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { corePlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the core plugin\napp.use(corePlugin, {\n  // Optional: override general settings\n  fontAwesomeStatic: true,\n\n  // Optional: override specific icons safely\n  iconsByType: {\n    danger: 'my-custom-danger-icon',\n    close: 'my-custom-close-icon'\n  }\n});\n\napp.mount('#app');\n```\n\n## API Reference\n\nThe plugin provides its API to your application in two ways:\n\n-   **Composition API:** `inject('uluCore')`\n-   **Options API:** `this.$uluCore`\n\nThe API object contains the following methods:\n\n- `getSettings()`: Returns the full reactive settings object.\n- `getSetting(key)`: Retrieves a single setting by its key (e.g., `'fontAwesomeStatic'`).\n- `updateSetting(key, value)`: Updates a single setting.\n- `updateSettings(changes)`: Merges an object of changes into the settings.\n- `getDefaultSettings()`: Returns a non-reactive copy of the original default settings.\n- `getIcon(type)`: Retrieves a specific icon class string by its semantic type (e.g., `'danger'`, `'close'`).\n- `setIcon(type, definition)`: Safely sets or overrides a single icon definition.\n\n### Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\nimport { inject, onMounted } from 'vue';\n\nconst uluCore = inject('uluCore');\n\nonMounted(() => {\n  const icons = uluCore.getSetting('iconsByType');\n  console.log('Danger Icon:', icons.danger);\n\n  // Example of updating a single icon dynamically\n  uluCore.setIcon('success', 'my-awesome-success-icon');\n});\n</script>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>\n```\n\n"
-    },
     "modals": {
       "raw_markdown": "import { Canvas } from '@storybook/addon-docs/blocks';\nimport * as ModalStories from '../../components/collapsible/UluModal.stories.js';\n\n# Modals\n\nModals plugin allows configuring app-wide modals that are triggered by the global API. Register your modals when you install the plugin then interact with them using the global API.\n\n## Registering your app-wide modals\n\nCreate the modal component file like:\n\n```html\n<template>\n  <UluModal>\n    User setting modal…\n  </UluModal>\n</template>\n```\n\n\nExample ./scr/modals.js\n\n```js\nimport { defineAsyncComponent } from \"vue\";\n\nexport default [\n  {\n    name: \"settings\",\n    component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n  }\n]\n```\n\n## Installing the plugin\n\nExample ./src/main.js\n\n```js\nimport UluModals from \"@ulu/frontend-vue/plugins/modals/index.js\";\nimport modals from \"./src/modals.js\";\n\n//...\n\napp.use(UluModals, { modals });\n\n```\n\n## Using Global API\n\n```js\n\n// Open a app-wide modal\nthis.$uluModals.open({ exampleProp: value });\n\n// Close app-wide modal \nthis.$uluModals.close();\n\n// Add modals after post-install\nthis.$uluModals.add({\n  name: \"settings\",\n  component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n});\n\n// Remove a modal from the registry\nthis.$uluModals.remove(\"settings\");\n\n// Get Modal from registry (not usually needed)\nconst settingsModal = this.$uluModals.get(\"settings\");\n// console.log(settingsModal.name) ==> \"settings\"\n```\n\n## Using Composition API (via composable)\n\nComposable is used get access to modals API (through inject)\n\n```html\n\n<template>\n  <button @click=\"showSettingsModal\">My Settings</button>\n</template>\n\n<script setup>\n  import { useModals } from \"./useModals\";\n\n  const modals = useModals();\n  const showSettingsModal = () => {\n    console.log(\"This is opening via uluModals composable\");\n    modals.open(\"settings\");\n  };\n</script>\n\n```\n\n## Standalone Modal Component\n\nThe `UluModal` **component is independent of this plugin.** The plugin is simply a convenient way to manage global modals (for things like a settings dialog) that need to be opened from anywhere in your application.\n\nYou can use `UluModal` as the component that the plugin displays, or you can use it on its own for any case where you are managing the state locally within a component and don't need a global API.\n\nHere is a demonstration of the standalone `UluModal` component:\n\n<Canvas of={ModalStories.Default} />"
     },
+    "core": {
+      "raw_markdown": "# Core Plugin\n\n## Purpose\n\nThe Core Plugin is the central, **required** plugin for the `@ulu/frontend-vue` library. Its primary purpose is to establish a single, reactive source of truth for configuration settings that are shared across multiple components. \n\nBy using Vue's `provide`/`inject` system, this plugin ensures that all components within your application access the same configuration, preventing inconsistencies that can arise from separate module imports.\n\n## Installation\n\nTo use this library, you must register the `corePlugin` on your Vue app instance. You can also pass an options object to override the default settings.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { corePlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the core plugin\napp.use(corePlugin, {\n  // Optional: override general settings\n  fontAwesomeStatic: true,\n\n  // Optional: override specific icons safely\n  iconsByType: {\n    danger: 'my-custom-danger-icon',\n    close: 'my-custom-close-icon'\n  }\n});\n\napp.mount('#app');\n```\n\n## API Reference\n\nThe plugin provides its API to your application in two ways:\n\n-   **Composition API:** `inject('uluCore')`\n-   **Options API:** `this.$uluCore`\n\nThe API object contains the following methods:\n\n- `getSettings()`: Returns the full reactive settings object.\n- `getSetting(key)`: Retrieves a single setting by its key (e.g., `'fontAwesomeStatic'`).\n- `updateSetting(key, value)`: Updates a single setting.\n- `updateSettings(changes)`: Merges an object of changes into the settings.\n- `getDefaultSettings()`: Returns a non-reactive copy of the original default settings.\n- `getIcon(type)`: Retrieves a specific icon class string by its semantic type (e.g., `'danger'`, `'close'`).\n- `setIcon(type, definition)`: Safely sets or overrides a single icon definition.\n\n### Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\nimport { inject, onMounted } from 'vue';\n\nconst uluCore = inject('uluCore');\n\nonMounted(() => {\n  const icons = uluCore.getSetting('iconsByType');\n  console.log('Danger Icon:', icons.danger);\n\n  // Example of updating a single icon dynamically\n  uluCore.setIcon('success', 'my-awesome-success-icon');\n});\n</script>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>\n```\n\n"
+    },
     "breakpoints": {
       "raw_markdown": "# Breakpoints Plugin\n\n## Purpose\n\nThe Breakpoints Plugin provides app-wide, reactive breakpoint information to your Vue components. It is a lightweight wrapper around the `useBreakpointManager` composable, ensuring that resize events and active breakpoint states are tracked centrally and distributed efficiently via Vue's `provide`/`inject` system.\n\nBy installing this plugin, any component in your application can instantly know the current breakpoint, whether the device is considered \"mobile,\" and the direction the window was just resized.\n\n## Installation\n\nRegister the `breakpointsPlugin` on your Vue app instance.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { breakpointsPlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the breakpoints plugin\napp.use(breakpointsPlugin, {\n  // Optional: Change which breakpoint triggers the 'isMobile' flag (default is 'small')\n  breakpointMobile: 'small',\n  \n  // Optional: Pass options directly to the underlying useBreakpointManager\n  managerOptions: {\n    // onReady(manager) { ... }\n  }\n});\n\napp.mount('#app');\n```\n\n## Provided Injections\n\nThe plugin does not attach methods to the Vue instance. Instead, it provides reactive `computed` refs that you can inject into any component.\n\n- **`uluIsMobile`**: `ComputedRef<Boolean>` - True if the current active breakpoint is less than or equal to the configured `breakpointMobile` (defaults to `'small'`).\n- **`uluBreakpointActive`**: `ComputedRef<String>` - The name of the currently active breakpoint (e.g., `'small'`, `'medium'`, `'large'`).\n- **`uluBreakpointDirection`**: `ComputedRef<Number>` - Indicates the resize direction (`1` for growing larger, `-1` for shrinking smaller, `0` for initialization).\n- **`uluBreakpointManager`**: `ComputedRef<Object>` - The underlying vanilla JS BreakpointManager instance, allowing advanced programmatic subscriptions if needed.\n\n## Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\n  import { inject } from 'vue';\n\n  const isMobile = inject('uluIsMobile');\n  const currentBreakpoint = inject('uluBreakpointActive');\n</script>\n\n<template>\n  <div>\n    <p v-if=\"isMobile\">You are on a mobile device!</p>\n    <p>Current Breakpoint: {{ currentBreakpoint }}</p>\n  </div>\n</template>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>\n```\n\n## Why use the Plugin vs the Composable?\n\nWhile you can import and use `useBreakpointManager()` directly in individual components, registering the Breakpoints Plugin ensures that the vanilla JS `BreakpointManager` is only instantiated once. This centralizes the resize event listeners, significantly improving performance across large applications with many responsive components.\n"
     },
@@ -12282,6 +12306,19 @@
         "order": 5,
         "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": 6,
+        "level": 0
+      },
       {
         "id": "utils.module:router",
         "longname": "utils.module:router",
@@ -12292,7 +12329,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 6,
+        "order": 7,
         "level": 0
       },
       {
@@ -12305,7 +12342,7 @@
           "filename": "props.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 21,
+        "order": 22,
         "level": 0
       },
       {
@@ -12318,7 +12355,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 24,
+        "order": 25,
         "level": 0
       },
       {
@@ -12331,20 +12368,7 @@
           "filename": "dom.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "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,
+        "order": 26,
         "level": 0
       },
       {
@@ -13810,7 +13834,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 7,
+        "order": 8,
         "level": 0
       },
       {
@@ -13874,7 +13898,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 9,
+        "order": 10,
         "level": 0
       },
       {
@@ -13911,7 +13935,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 10,
+        "order": 11,
         "level": 0
       },
       {
@@ -13984,7 +14008,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 11,
+        "order": 12,
         "level": 0
       },
       {
@@ -14021,7 +14045,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 12,
+        "order": 13,
         "level": 0
       },
       {
@@ -14094,7 +14118,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 13,
+        "order": 14,
         "level": 0
       },
       {
@@ -14131,7 +14155,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 14,
+        "order": 15,
         "level": 0
       },
       {
@@ -14167,7 +14191,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 15,
+        "order": 16,
         "level": 0
       },
       {
@@ -14203,7 +14227,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 16,
+        "order": 17,
         "level": 0
       },
       {
@@ -14241,7 +14265,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 17,
+        "order": 18,
         "level": 0
       },
       {
@@ -14288,7 +14312,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 18,
+        "order": 19,
         "level": 0
       },
       {
@@ -14361,7 +14385,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 19,
+        "order": 20,
         "level": 0
       },
       {
@@ -14398,7 +14422,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 20,
+        "order": 21,
         "level": 0
       },
       {
@@ -14435,7 +14459,7 @@
           "filename": "props.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 22,
+        "order": 23,
         "level": 0
       },
       {
@@ -14480,7 +14504,7 @@
           "filename": "props.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 23,
+        "order": 24,
         "level": 0
       },
       {
@@ -14518,7 +14542,7 @@
           "filename": "dom.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 26,
+        "order": 27,
         "level": 0
       },
       {
@@ -14557,7 +14581,7 @@
           "filename": "dom.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 27,
+        "order": 28,
         "level": 0
       },
       {
@@ -16099,7 +16123,7 @@
           "filename": "router.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/utils"
         },
-        "order": 8,
+        "order": 9,
         "level": 0
       },
       {

package/lib/components/collapsible/UluTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <Tab v-slot="slotProps">
+  <Tab class="tabs__tab" v-slot="slotProps">
     <slot v-bind="slotProps"/>
   </Tab>
 </template>

package/lib/components/collapsible/UluTabGroup.vue

@@ -7,12 +7,7 @@
     <div 
       v-bind="$attrs"
       class="tabs" 
-      :class="[
-        resolvedModifiers,
-        {
-         'tabs--vertical' : vertical 
-        }
-      ]"
+      :class="resolvedModifiers"
     >
       <slot v-bind="slotProps"/>
     </div>
@@ -20,6 +15,7 @@
 </template>
 
 <script setup>
+  import { computed } from "vue";
   import { TabGroup } from "@headlessui/vue";
   import { useModifiers } from "../../composables/useModifiers.js";
 
@@ -36,11 +32,27 @@
      * Whether or not to use vertical layout
      */
     vertical: Boolean,
+    /**
+     * Whether or not to use sticky modifier (tablist)
+     */
+    sticky: Boolean,
+    /**
+     * Whether or not to use transparent modifier (tab panels)
+     */
+    transparent: Boolean,
     /**
      * Class modifiers (ie. 'transparent', 'secondary', etc)
      */
     modifiers: [String, Array]
   });
 
-  const { resolvedModifiers } = useModifiers({ props, baseClass: "tabs" });
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "tabs",
+    internal: computed(() => ({
+      "vertical" : props.vertical,
+      "sticky" : props.sticky,
+      "transparent" : props.transparent
+    }))
+  });
 </script>

package/lib/components/collapsible/UluTabPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <TabPanel v-slot="slotProps">
+  <TabPanel v-slot="slotProps" class="tabs__tabpanel">
     <slot v-bind="slotProps"/>
   </TabPanel>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [