@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VToolbar/VToolbarItems.mjs

@@ -1,15 +1,15 @@
+import { createVNode as _createVNode } from "vue";
 // Composables
 import { makeVariantProps } from "../../composables/variant.mjs";
 import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 import { toRef } from 'vue';
 export const VToolbarItems = defineComponent({
   name: 'VToolbarItems',
-  props: { ...makeVariantProps({
-      variant: 'contained-text'
-    })
-  },
+  props: makeVariantProps({
+    variant: 'text'
+  }),
 
   setup(props, _ref) {
     let {
@@ -18,15 +18,18 @@ export const VToolbarItems = defineComponent({
     provideDefaults({
       VBtn: {
         color: toRef(props, 'color'),
-        textColor: toRef(props, 'textColor'),
+        height: 'inherit',
         variant: toRef(props, 'variant')
       }
     });
-    return () => {
+    useRender(() => {
       var _slots$default;
 
-      return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots);
-    };
+      return _createVNode("div", {
+        "class": "v-toolbar-items"
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+    });
+    return {};
   }
 
 });

package/lib/components/VToolbar/VToolbarItems.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"names":["makeVariantProps","provideDefaults","defineComponent","toRef","VToolbarItems","name","props","variant","setup","slots","VBtn","color","textColor","default"],"mappings":"AAAA;SACSA,gB;SACAC,e,0CAET;;SACSC,e;AACT,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,aAAa,GAAGF,eAAe,CAAC;AAC3CG,EAAAA,IAAI,EAAE,eADqC;AAG3CC,EAAAA,KAAK,EAAE,EACL,GAAGN,gBAAgB,CAAC;AAAEO,MAAAA,OAAO,EAAE;AAAX,KAAD;AADd,GAHoC;;AAO3CC,EAAAA,KAAK,CAAEF,KAAF,QAAoB;AAAA,QAAX;AAAEG,MAAAA;AAAF,KAAW;AACvBR,IAAAA,eAAe,CAAC;AACdS,MAAAA,IAAI,EAAE;AACJC,QAAAA,KAAK,EAAER,KAAK,CAACG,KAAD,EAAQ,OAAR,CADR;AAEJM,QAAAA,SAAS,EAAET,KAAK,CAACG,KAAD,EAAQ,WAAR,CAFZ;AAGJC,QAAAA,OAAO,EAAEJ,KAAK,CAACG,KAAD,EAAQ,SAAR;AAHV;AADQ,KAAD,CAAf;AAQA,WAAO;AAAA;;AAAA,+BAAMG,KAAK,CAACI,OAAZ,qBAAM,oBAAAJ,KAAK,CAAX;AAAA,KAAP;AACD;;AAjB0C,CAAD,CAArC","sourcesContent":["// Composables\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { defineComponent } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VToolbarItems = defineComponent({\n  name: 'VToolbarItems',\n\n  props: {\n    ...makeVariantProps({ variant: 'contained-text' }),\n  },\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        textColor: toRef(props, 'textColor'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    return () => slots.default?.()\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"file":"VToolbarItems.mjs"}
+{"version":3,"file":"VToolbarItems.mjs","names":["makeVariantProps","provideDefaults","defineComponent","useRender","toRef","VToolbarItems","name","props","variant","setup","slots","VBtn","color","height","default"],"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"sourcesContent":["// Composables\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VToolbarItems = defineComponent({\n  name: 'VToolbarItems',\n\n  props: makeVariantProps({ variant: 'text' }),\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        height: 'inherit',\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => (\n      <div class=\"v-toolbar-items\">\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"mappings":";AAAA;SACSA,gB;SACAC,e,0CAET;;SACSC,e,EAAiBC,S;AAC1B,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,aAAa,GAAGH,eAAe,CAAC;EAC3CI,IAAI,EAAE,eADqC;EAG3CC,KAAK,EAAEP,gBAAgB,CAAC;IAAEQ,OAAO,EAAE;EAAX,CAAD,CAHoB;;EAK3CC,KAAK,CAAEF,KAAF,QAAoB;IAAA,IAAX;MAAEG;IAAF,CAAW;IACvBT,eAAe,CAAC;MACdU,IAAI,EAAE;QACJC,KAAK,EAAER,KAAK,CAACG,KAAD,EAAQ,OAAR,CADR;QAEJM,MAAM,EAAE,SAFJ;QAGJL,OAAO,EAAEJ,KAAK,CAACG,KAAD,EAAQ,SAAR;MAHV;IADQ,CAAD,CAAf;IAQAJ,SAAS,CAAC;MAAA;;MAAA;QAAA,SACG;MADH,sBAEJO,KAAK,CAACI,OAFF,qBAEJ,oBAAAJ,KAAK,CAFD;IAAA,CAAD,CAAT;IAMA,OAAO,EAAP;EACD;;AArB0C,CAAD,CAArC"}

package/lib/components/VToolbar/VToolbarTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VToolbar/VToolbarTitle.tsx"],"names":["makeTagProps","genericComponent","useRender","VToolbarTitle","name","props","text","String","setup","slots","hasText","default"],"mappings":";AAAA;SACSA,Y,qCAET;;SACSC,gB,EAAkBC,S,gCAE3B;;AAGA,OAAO,MAAMC,aAAa,GAAGF,gBAAgB,GAKxC;AACHG,EAAAA,IAAI,EAAE,eADH;AAGHC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEC,MADD;AAGL,OAAGP,YAAY;AAHV,GAHJ;;AASHQ,EAAAA,KAAK,CAAEH,KAAF,QAAoB;AAAA,QAAX;AAAEI,MAAAA;AAAF,KAAW;AACvBP,IAAAA,SAAS,CAAC,MAAM;AAAA;;AACd,YAAMQ,OAAO,GAAG,CAAC,EAAED,KAAK,CAACE,OAAN,IAAiBF,KAAK,CAACH,IAAvB,IAA+BD,KAAK,CAACC,IAAvC,CAAjB;AAEA;AAAA,iBACmB;AADnB;AAAA,wBAEMI,OAAO;AAAA,mBACI;AADJ,YAEHD,KAAK,CAACH,IAAN,GAAaG,KAAK,CAACH,IAAN,EAAb,GAA4BD,KAAK,CAACC,IAF/B,oBAIHG,KAAK,CAACE,OAJH,qBAIH,oBAAAF,KAAK,CAJF,EAFb;AAAA;AAWD,KAdQ,CAAT;AAgBA,WAAO,EAAP;AACD;;AA3BE,CALwC,CAAtC","sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\n\nexport const VToolbarTitle = genericComponent<new () => {\n  $slots: MakeSlots<{\n    default: []\n    text: []\n  }>\n}>()({\n  name: 'VToolbarTitle',\n\n  props: {\n    text: String,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    useRender(() => {\n      const hasText = !!(slots.default || slots.text || props.text)\n\n      return (\n        <props.tag class=\"v-toolbar-title\">\n          { hasText && (\n            <div class=\"v-toolbar-title__placeholder\">\n              { slots.text ? slots.text() : props.text }\n\n              { slots.default?.() }\n            </div>\n          ) }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VToolbarTitle = InstanceType<typeof VToolbarTitle>\n"],"file":"VToolbarTitle.mjs"}
+{"version":3,"file":"VToolbarTitle.mjs","names":["makeTagProps","genericComponent","useRender","VToolbarTitle","name","props","text","String","setup","slots","hasText","default"],"sources":["../../../src/components/VToolbar/VToolbarTitle.tsx"],"sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\n\nexport const VToolbarTitle = genericComponent<new () => {\n  $slots: MakeSlots<{\n    default: []\n    text: []\n  }>\n}>()({\n  name: 'VToolbarTitle',\n\n  props: {\n    text: String,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    useRender(() => {\n      const hasText = !!(slots.default || slots.text || props.text)\n\n      return (\n        <props.tag class=\"v-toolbar-title\">\n          { hasText && (\n            <div class=\"v-toolbar-title__placeholder\">\n              { slots.text ? slots.text() : props.text }\n\n              { slots.default?.() }\n            </div>\n          ) }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VToolbarTitle = InstanceType<typeof VToolbarTitle>\n"],"mappings":";AAAA;SACSA,Y,qCAET;;SACSC,gB,EAAkBC,S,gCAE3B;;AAGA,OAAO,MAAMC,aAAa,GAAGF,gBAAgB,GAKxC;EACHG,IAAI,EAAE,eADH;EAGHC,KAAK,EAAE;IACLC,IAAI,EAAEC,MADD;IAGL,GAAGP,YAAY;EAHV,CAHJ;;EASHQ,KAAK,CAAEH,KAAF,QAAoB;IAAA,IAAX;MAAEI;IAAF,CAAW;IACvBP,SAAS,CAAC,MAAM;MAAA;;MACd,MAAMQ,OAAO,GAAG,CAAC,EAAED,KAAK,CAACE,OAAN,IAAiBF,KAAK,CAACH,IAAvB,IAA+BD,KAAK,CAACC,IAAvC,CAAjB;MAEA;QAAA,SACmB;MADnB;QAAA,gBAEMI,OAAO;UAAA,SACI;QADJ,IAEHD,KAAK,CAACH,IAAN,GAAaG,KAAK,CAACH,IAAN,EAAb,GAA4BD,KAAK,CAACC,IAF/B,oBAIHG,KAAK,CAACE,OAJH,qBAIH,oBAAAF,KAAK,CAJF,EAFb;MAAA;IAWD,CAdQ,CAAT;IAgBA,OAAO,EAAP;EACD;;AA3BE,CALwC,CAAtC"}

package/lib/components/VToolbar/_variables.scss

@@ -1,27 +1,31 @@
 @use "sass:map";
+@use '../../styles/settings';
 @use "../../styles/settings/variables";
 @use "../../styles/tools/functions";
 
+// VToolbar
 $toolbar-background: rgb(var(--v-theme-on-surface-variant)) !default;
 $toolbar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
-$toolbar-border-radius: 0 !default;
+$toolbar-border-color: settings.$border-color-root !default;
+$toolbar-border-radius: map.get(settings.$rounded, 0) !default;
+$toolbar-border-style: settings.$border-style-root !default;
+$toolbar-border-thin-width: thin !default;
+$toolbar-border-width: 0 !default;
 $toolbar-btn-icon-size: 48px !default;
 $toolbar-collapsed-border-radius: 24px !default;
 $toolbar-collapsed-max-width: 112px !default;
 $toolbar-content-padding-x: 16px !default;
 $toolbar-content-padding-y: 4px !default;
-$toolbar-density: ( 'default': 0, 'comfortable': -1, 'compact': -2, 'prominent': -3 ) !default;
 $toolbar-elevation: 0 !default;
 $toolbar-flat-elevation: 0 !default;
-$toolbar-padding-end: 16px !default;
-$toolbar-padding-start: 16px !default;
-$toolbar-padding: 16px !default;
-$toolbar-prepend-btn-margin-start: -12px !default;
-$toolbar-append-btn-margin-end: -12px !default;
+$toolbar-flex: none !default;
+$toolbar-prepend-btn-margin-start: 10px !default;
+$toolbar-append-btn-margin-end: 10px !default;
 $toolbar-rounded-border-radius: variables.$border-radius-root !default;
 $toolbar-transition: .2s variables.$standard-easing !default;
 
-$toolbar-title-padding: 20px !default;
+// VToolbarTitle
+$toolbar-title-margin: 16px !default;
 $toolbar-title-extended-padding: 56px !default;
 $toolbar-title-font-size: 1.25rem !default;
 $toolbar-title-font-weight: 400 !default;
@@ -34,6 +38,14 @@ $toolbar-prominent-title-letter-spacing: 0 !default;
 $toolbar-prominent-title-line-height: 2.25rem !default;
 $toolbar-prominent-title-text-transform: none !default;
 
+// Lists
+$toolbar-border: (
+  $toolbar-border-color,
+  $toolbar-border-style,
+  $toolbar-border-width,
+  $toolbar-border-thin-width
+) !default;
+
 $toolbar-title-typography: (
   $toolbar-title-font-size,
   $toolbar-title-font-weight,

package/lib/components/VToolbar/index.d.ts

@@ -0,0 +1,414 @@
+import * as vue from 'vue';
+import { VNodeChild, ExtractPropTypes, PropType } from 'vue';
+
+declare type SlotsToProps<T extends Record<string, Slot>> = {
+    $children: () => (T['default'] | VNodeChild | {
+        [K in keyof T]?: T[K];
+    });
+    'v-slots': new () => {
+        [K in keyof T]?: T[K] | false;
+    };
+};
+declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
+declare type MakeSlots<T extends Record<string, any[]>> = {
+    [K in keyof T]?: Slot<T[K]>;
+};
+
+declare const VToolbar: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            flat: boolean;
+            absolute: boolean;
+            height: string | number;
+            tag: string;
+            collapse: boolean;
+            rounded: string | number | boolean;
+            density: "default" | "compact" | "prominent" | "comfortable" | null;
+            extended: boolean;
+            extensionHeight: string | number;
+            floating: boolean;
+        }> & Omit<Readonly<ExtractPropTypes<{
+            theme: StringConstructor;
+            tag: Omit<{
+                type: StringConstructor;
+                default: string;
+            }, "type" | "default"> & {
+                type: PropType<string>;
+                default: string;
+            };
+            rounded: {
+                type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            elevation: {
+                type: (StringConstructor | NumberConstructor)[];
+                validator(v: any): boolean;
+            };
+            border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+            absolute: BooleanConstructor;
+            collapse: BooleanConstructor;
+            color: StringConstructor;
+            density: {
+                type: PropType<"default" | "compact" | "prominent" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            extended: BooleanConstructor;
+            extensionHeight: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            flat: BooleanConstructor;
+            floating: BooleanConstructor;
+            height: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            image: StringConstructor;
+            title: StringConstructor;
+        } & SlotsToProps<MakeSlots<{
+            default: [];
+            image: [];
+            prepend: [];
+            append: [];
+            title: [];
+            extension: [];
+        }>>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "flat" | "absolute" | "height" | "tag" | "collapse" | "rounded" | "density" | "extended" | "extensionHeight" | "floating">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<ExtractPropTypes<{
+            theme: StringConstructor;
+            tag: Omit<{
+                type: StringConstructor;
+                default: string;
+            }, "type" | "default"> & {
+                type: PropType<string>;
+                default: string;
+            };
+            rounded: {
+                type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            elevation: {
+                type: (StringConstructor | NumberConstructor)[];
+                validator(v: any): boolean;
+            };
+            border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+            absolute: BooleanConstructor;
+            collapse: BooleanConstructor;
+            color: StringConstructor;
+            density: {
+                type: PropType<"default" | "compact" | "prominent" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            extended: BooleanConstructor;
+            extensionHeight: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            flat: BooleanConstructor;
+            floating: BooleanConstructor;
+            height: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            image: StringConstructor;
+            title: StringConstructor;
+        } & SlotsToProps<MakeSlots<{
+            default: [];
+            image: [];
+            prepend: [];
+            append: [];
+            title: [];
+            extension: [];
+        }>>>>, {
+            contentHeight: vue.ComputedRef<number>;
+            extensionHeight: vue.ComputedRef<number>;
+        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            flat: boolean;
+            absolute: boolean;
+            height: string | number;
+            tag: string;
+            collapse: boolean;
+            rounded: string | number | boolean;
+            density: "default" | "compact" | "prominent" | "comfortable" | null;
+            extended: boolean;
+            extensionHeight: string | number;
+            floating: boolean;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<ExtractPropTypes<{
+        theme: StringConstructor;
+        tag: Omit<{
+            type: StringConstructor;
+            default: string;
+        }, "type" | "default"> & {
+            type: PropType<string>;
+            default: string;
+        };
+        rounded: {
+            type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        elevation: {
+            type: (StringConstructor | NumberConstructor)[];
+            validator(v: any): boolean;
+        };
+        border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        absolute: BooleanConstructor;
+        collapse: BooleanConstructor;
+        color: StringConstructor;
+        density: {
+            type: PropType<"default" | "compact" | "prominent" | "comfortable" | null>;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        extended: BooleanConstructor;
+        extensionHeight: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        flat: BooleanConstructor;
+        floating: BooleanConstructor;
+        height: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        image: StringConstructor;
+        title: StringConstructor;
+    } & SlotsToProps<MakeSlots<{
+        default: [];
+        image: [];
+        prepend: [];
+        append: [];
+        title: [];
+        extension: [];
+    }>>>> & vue.ShallowUnwrapRef<{
+        contentHeight: vue.ComputedRef<number>;
+        extensionHeight: vue.ComputedRef<number>;
+    }> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    absolute: BooleanConstructor;
+    collapse: BooleanConstructor;
+    color: StringConstructor;
+    density: {
+        type: PropType<"default" | "compact" | "prominent" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    extended: BooleanConstructor;
+    extensionHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    flat: BooleanConstructor;
+    floating: BooleanConstructor;
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    image: StringConstructor;
+    title: StringConstructor;
+} & SlotsToProps<MakeSlots<{
+    default: [];
+    image: [];
+    prepend: [];
+    append: [];
+    title: [];
+    extension: [];
+}>>>>, {
+    contentHeight: vue.ComputedRef<number>;
+    extensionHeight: vue.ComputedRef<number>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    flat: boolean;
+    absolute: boolean;
+    height: string | number;
+    tag: string;
+    collapse: boolean;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "prominent" | "comfortable" | null;
+    extended: boolean;
+    extensionHeight: string | number;
+    floating: boolean;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    $slots: MakeSlots<{
+        default: [];
+        image: [];
+        prepend: [];
+        append: [];
+        title: [];
+        extension: [];
+    }>;
+});
+declare type VToolbar = InstanceType<typeof VToolbar>;
+
+declare const VToolbarTitle: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            tag: string;
+        }> & Omit<Readonly<vue.ExtractPropTypes<{
+            tag: {
+                type: StringConstructor;
+                default: string;
+            };
+            text: StringConstructor;
+        } & SlotsToProps<MakeSlots<{
+            default: [];
+            text: [];
+        }>>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "tag">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+            tag: {
+                type: StringConstructor;
+                default: string;
+            };
+            text: StringConstructor;
+        } & SlotsToProps<MakeSlots<{
+            default: [];
+            text: [];
+        }>>>>, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            tag: string;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        text: StringConstructor;
+    } & SlotsToProps<MakeSlots<{
+        default: [];
+        text: [];
+    }>>>> & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: StringConstructor;
+} & SlotsToProps<MakeSlots<{
+    default: [];
+    text: [];
+}>>>>, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    tag: string;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    $slots: MakeSlots<{
+        default: [];
+        text: [];
+    }>;
+});
+declare type VToolbarTitle = InstanceType<typeof VToolbarTitle>;
+
+declare const VToolbarItems: vue.DefineComponent<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+}>>, {
+    variant: string;
+}>;
+declare type VToolbarItems = InstanceType<typeof VToolbarItems>;
+
+export { VToolbar, VToolbarItems, VToolbarTitle };

package/lib/components/VToolbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VToolbar/index.ts"],"names":["VToolbar","VToolbarTitle","VToolbarItems"],"mappings":"SAASA,Q;SACAC,a;SACAC,a","sourcesContent":["export { VToolbar } from './VToolbar'\nexport { VToolbarTitle } from './VToolbarTitle'\nexport { VToolbarItems } from './VToolbarItems'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VToolbar","VToolbarTitle","VToolbarItems"],"sources":["../../../src/components/VToolbar/index.ts"],"sourcesContent":["export { VToolbar } from './VToolbar'\nexport { VToolbarTitle } from './VToolbarTitle'\nexport { VToolbarItems } from './VToolbarItems'\n"],"mappings":"SAASA,Q;SACAC,a;SACAC,a"}

package/lib/components/VTooltip/VTooltip.mjs

@@ -4,11 +4,13 @@ import "./VTooltip.css"; // Components
 
 import { VOverlay } from "../VOverlay/index.mjs"; // Composables
 
+import { makeTransitionProps } from "../../composables/transition.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
-import { makeTransitionProps } from "../../composables/transition.mjs"; // Utilities
+import { useScopeId } from "../../composables/scopeId.mjs";
+import { forwardRefs } from "../../composables/forwardRefs.mjs"; // Utilities
 
-import { computed } from 'vue';
-import { genericComponent, getUid } from "../../util/index.mjs"; // Types
+import { computed, ref } from 'vue';
+import { genericComponent, getUid, useRender } from "../../util/index.mjs"; // Types
 
 export const VTooltip = genericComponent()({
   name: 'VTooltip',
@@ -17,7 +19,7 @@ export const VTooltip = genericComponent()({
     id: String,
     modelValue: Boolean,
     text: String,
-    anchor: {
+    location: {
       type: String,
       default: 'end'
     },
@@ -39,54 +41,59 @@ export const VTooltip = genericComponent()({
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
+    const {
+      scopeId
+    } = useScopeId();
     const uid = getUid();
     const id = computed(() => props.id || `v-tooltip-${uid}`);
-    const anchor = computed(() => {
-      return props.anchor.split(' ').length > 1 ? props.anchor : props.anchor + ' center';
+    const overlay = ref();
+    const location = computed(() => {
+      return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
     });
     const origin = computed(() => {
-      return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.anchor.split(' ').length > 1 ? props.origin : props.origin + ' center';
+      return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
     });
     const transition = computed(() => {
       if (props.transition) return props.transition;
       return isActive.value ? 'scale-transition' : 'fade-transition';
     });
-    return () => {
-      return _createVNode(VOverlay, _mergeProps({
-        "modelValue": isActive.value,
-        "onUpdate:modelValue": $event => isActive.value = $event,
-        "class": ['v-tooltip'],
-        "id": id.value,
-        "transition": transition.value,
-        "absolute": true,
-        "positionStrategy": "connected",
-        "scrollStrategy": "reposition",
-        "anchor": anchor.value,
-        "origin": origin.value,
-        "min-width": 0,
-        "offset": 10,
-        "scrim": false,
-        "persistent": true,
-        "open-on-click": false,
-        "open-on-hover": true,
-        "role": "tooltip",
-        "eager": true,
-        "activatorProps": {
-          'aria-describedby': id.value
-        }
-      }, attrs), {
-        activator: slots.activator,
-        default: function () {
-          var _slots$default, _slots$default2;
-
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
+    useRender(() => _createVNode(VOverlay, _mergeProps({
+      "modelValue": isActive.value,
+      "onUpdate:modelValue": $event => isActive.value = $event,
+      "ref": overlay,
+      "class": ['v-tooltip'],
+      "id": id.value,
+      "transition": transition.value,
+      "absolute": true,
+      "locationStrategy": "connected",
+      "scrollStrategy": "reposition",
+      "location": location.value,
+      "origin": origin.value,
+      "min-width": 0,
+      "offset": 10,
+      "scrim": false,
+      "persistent": true,
+      "open-on-click": false,
+      "open-on-hover": true,
+      "close-on-back": false,
+      "role": "tooltip",
+      "eager": true,
+      "activatorProps": {
+        'aria-describedby': id.value
+      }
+    }, scopeId, attrs), {
+      activator: slots.activator,
+      default: function () {
+        var _slots$default;
 
-          return (_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots, ...args)) != null ? _slots$default : props.text;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
         }
-      });
-    };
+
+        return ((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, ...args)) ?? props.text;
+      }
+    }));
+    return forwardRefs({}, overlay);
   }
 
 });