@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VToolbar/VToolbar.mjs

@@ -1,151 +1,145 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VToolbar.sass"; // Extensions
-
-import VSheet from "../VSheet/VSheet.mjs"; // Components
-
-import VImg from "../VImg/VImg.mjs"; // Utilities
-
-import { convertToUnit, getSlot } from "../../util/helpers.mjs";
-import { breaking } from "../../util/console.mjs"; // Types
-
-/* @vue/component */
-export default VSheet.extend({
-  name: 'v-toolbar',
-  props: {
-    absolute: Boolean,
-    bottom: Boolean,
-    collapse: Boolean,
-    dense: Boolean,
-    extended: Boolean,
-    extensionHeight: {
-      default: 48,
-      type: [Number, String]
-    },
-    flat: Boolean,
-    floating: Boolean,
-    prominent: Boolean,
-    short: Boolean,
-    src: {
-      type: [String, Object],
-      default: ''
-    },
-    tag: {
-      type: String,
-      default: 'header'
-    }
+import "./VToolbar.css"; // Components
+
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VImg } from "../VImg/index.mjs";
+import { VToolbarTitle } from "./VToolbarTitle.mjs"; // Composables
+
+import { makeBorderProps, useBorder } from "../../composables/border.mjs";
+import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { useForwardRef } from "../../composables/forwardRef.mjs"; // Utilities
+
+import { computed, toRef } from 'vue';
+import { convertToUnit, genericComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
+
+import { provideDefaults } from "../../composables/defaults.mjs";
+const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'];
+export const makeVToolbarProps = propsFactory({
+  absolute: Boolean,
+  collapse: Boolean,
+  color: String,
+  density: {
+    type: String,
+    default: 'default',
+    validator: v => allowedDensities.includes(v)
   },
-  data: () => ({
-    isExtended: false
-  }),
-  computed: {
-    computedHeight() {
-      const height = this.computedContentHeight;
-      if (!this.isExtended) return height;
-      const extensionHeight = parseInt(this.extensionHeight);
-      return this.isCollapsed ? height : height + (!isNaN(extensionHeight) ? extensionHeight : 0);
-    },
-
-    computedContentHeight() {
-      if (this.height) return parseInt(this.height);
-      if (this.isProminent && this.dense) return 96;
-      if (this.isProminent && this.short) return 112;
-      if (this.isProminent) return 128;
-      if (this.dense) return 48;
-      if (this.short || this.$vuetify.breakpoint.smAndDown) return 56;
-      return 64;
-    },
-
-    classes() {
-      return { ...VSheet.options.computed.classes.call(this),
-        'v-toolbar': true,
-        'v-toolbar--absolute': this.absolute,
-        'v-toolbar--bottom': this.bottom,
-        'v-toolbar--collapse': this.collapse,
-        'v-toolbar--collapsed': this.isCollapsed,
-        'v-toolbar--dense': this.dense,
-        'v-toolbar--extended': this.isExtended,
-        'v-toolbar--flat': this.flat,
-        'v-toolbar--floating': this.floating,
-        'v-toolbar--prominent': this.isProminent
-      };
-    },
-
-    isCollapsed() {
-      return this.collapse;
-    },
-
-    isProminent() {
-      return this.prominent;
-    },
-
-    styles() {
-      return { ...this.measurableStyles,
-        height: convertToUnit(this.computedHeight)
-      };
-    }
-
+  extended: Boolean,
+  extensionHeight: {
+    type: [Number, String],
+    default: 48
   },
-
-  created() {
-    const breakingProps = [['app', '<v-app-bar app>'], ['manual-scroll', '<v-app-bar :value="false">'], ['clipped-left', '<v-app-bar clipped-left>'], ['clipped-right', '<v-app-bar clipped-right>'], ['inverted-scroll', '<v-app-bar inverted-scroll>'], ['scroll-off-screen', '<v-app-bar scroll-off-screen>'], ['scroll-target', '<v-app-bar scroll-target>'], ['scroll-threshold', '<v-app-bar scroll-threshold>'], ['card', '<v-app-bar flat>']];
-    /* istanbul ignore next */
-
-    breakingProps.forEach(([original, replacement]) => {
-      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this);
-    });
+  flat: Boolean,
+  floating: Boolean,
+  height: {
+    type: [Number, String],
+    default: 56
   },
-
-  methods: {
-    genBackground() {
-      const props = {
-        height: convertToUnit(this.computedHeight),
-        src: this.src
-      };
-      const image = this.$scopedSlots.img ? this.$scopedSlots.img({
-        props
-      }) : this.$createElement(VImg, {
-        props
+  image: String,
+  title: String,
+  ...makeBorderProps(),
+  ...makeElevationProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps({
+    tag: 'header'
+  }),
+  ...makeThemeProps()
+}, 'v-toolbar');
+export const VToolbar = genericComponent()({
+  name: 'VToolbar',
+  props: makeVToolbarProps(),
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
+    const isExtended = computed(() => !!(props.extended || slots.extension));
+    const contentHeight = computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
+    const extensionHeight = computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
+    provideDefaults({
+      VBtn: {
+        flat: true,
+        variant: 'text'
+      }
+    });
+    useRender(() => {
+      var _slots$image, _slots$prepend, _slots$default, _slots$append, _slots$extension;
+
+      const hasTitle = !!(props.title || slots.title);
+      const hasImage = !!(slots.image || props.image);
+      return _createVNode(props.tag, {
+        "class": ['v-toolbar', {
+          'v-toolbar--absolute': props.absolute,
+          'v-toolbar--collapse': props.collapse,
+          'v-toolbar--flat': props.flat,
+          'v-toolbar--floating': props.floating,
+          [`v-toolbar--density-${props.density}`]: true
+        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value],
+        "style": [backgroundColorStyles.value]
+      }, {
+        default: () => [hasImage && _createVNode("div", {
+          "class": "v-toolbar__image"
+        }, [_createVNode(VDefaultsProvider, {
+          "defaults": {
+            VImg: {
+              cover: true,
+              src: props.image
+            }
+          },
+          "scoped": true
+        }, {
+          default: () => [slots.image ? (_slots$image = slots.image) == null ? void 0 : _slots$image.call(slots) : _createVNode(VImg, null, null)]
+        })]), _createVNode("div", {
+          "class": "v-toolbar__content",
+          "style": {
+            height: convertToUnit(contentHeight.value)
+          }
+        }, [slots.prepend && _createVNode("div", {
+          "class": "v-toolbar__prepend"
+        }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), hasTitle && _createVNode(VToolbarTitle, {
+          "text": props.title
+        }, {
+          text: slots.title
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && _createVNode("div", {
+          "class": "v-toolbar__append"
+        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), isExtended.value && _createVNode("div", {
+          "class": "v-toolbar__extension",
+          "style": {
+            height: convertToUnit(extensionHeight.value)
+          }
+        }, [(_slots$extension = slots.extension) == null ? void 0 : _slots$extension.call(slots)])]
       });
-      return this.$createElement('div', {
-        staticClass: 'v-toolbar__image'
-      }, [image]);
-    },
-
-    genContent() {
-      return this.$createElement('div', {
-        staticClass: 'v-toolbar__content',
-        style: {
-          height: convertToUnit(this.computedContentHeight)
-        }
-      }, getSlot(this));
-    },
-
-    genExtension() {
-      return this.$createElement('div', {
-        staticClass: 'v-toolbar__extension',
-        style: {
-          height: convertToUnit(this.extensionHeight)
-        }
-      }, getSlot(this, 'extension'));
-    }
-
-  },
-
-  render(h) {
-    this.isExtended = this.extended || !!this.$scopedSlots.extension;
-    const children = [this.genContent()];
-    const data = this.setBackgroundColor(this.color, {
-      class: this.classes,
-      style: this.styles,
-      on: this.$listeners
     });
-    if (this.isExtended) children.push(this.genExtension());
-    if (this.src || this.$scopedSlots.img) children.unshift(this.genBackground());
-    return h(this.tag, data, children);
+    return useForwardRef({
+      contentHeight,
+      extensionHeight
+    });
   }
 
 });
+export function filterToolbarProps(props) {
+  var _VToolbar$props;
+
+  return pick(props, Object.keys((_VToolbar$props = VToolbar == null ? void 0 : VToolbar.props) != null ? _VToolbar$props : {}));
+}
 //# sourceMappingURL=VToolbar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VToolbar/VToolbar.ts"],"names":["VSheet","VImg","convertToUnit","getSlot","breaking","extend","name","props","absolute","Boolean","bottom","collapse","dense","extended","extensionHeight","default","type","Number","String","flat","floating","prominent","short","src","Object","tag","data","isExtended","computed","computedHeight","height","computedContentHeight","parseInt","isCollapsed","isNaN","isProminent","$vuetify","breakpoint","smAndDown","classes","options","call","styles","measurableStyles","created","breakingProps","forEach","original","replacement","$attrs","hasOwnProperty","methods","genBackground","image","$scopedSlots","img","$createElement","staticClass","genContent","style","genExtension","render","h","extension","children","setBackgroundColor","color","class","on","$listeners","push","unshift"],"mappings":"AAAA;;AACA;AAEA;AACA,yB,CAEA;;OACOA,M,8BAEP;;OACOC,I,0BAEP;;SACSC,a,EAAeC,O;SACfC,Q,kCAET;;AAGA;AACA,eAAeJ,MAAM,CAACK,MAAP,CAAc;AAC3BC,EAAAA,IAAI,EAAE,WADqB;AAG3BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,MAAM,EAAED,OAFH;AAGLE,IAAAA,QAAQ,EAAEF,OAHL;AAILG,IAAAA,KAAK,EAAEH,OAJF;AAKLI,IAAAA,QAAQ,EAAEJ,OALL;AAMLK,IAAAA,eAAe,EAAE;AACfC,MAAAA,OAAO,EAAE,EADM;AAEfC,MAAAA,IAAI,EAAE,CAACC,MAAD,EAASC,MAAT;AAFS,KANZ;AAULC,IAAAA,IAAI,EAAEV,OAVD;AAWLW,IAAAA,QAAQ,EAAEX,OAXL;AAYLY,IAAAA,SAAS,EAAEZ,OAZN;AAaLa,IAAAA,KAAK,EAAEb,OAbF;AAcLc,IAAAA,GAAG,EAAE;AACHP,MAAAA,IAAI,EAAE,CAACE,MAAD,EAASM,MAAT,CADH;AAEHT,MAAAA,OAAO,EAAE;AAFN,KAdA;AAkBLU,IAAAA,GAAG,EAAE;AACHT,MAAAA,IAAI,EAAEE,MADH;AAEHH,MAAAA,OAAO,EAAE;AAFN;AAlBA,GAHoB;AA2B3BW,EAAAA,IAAI,EAAE,OAAO;AACXC,IAAAA,UAAU,EAAE;AADD,GAAP,CA3BqB;AA+B3BC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,cAAc,GAAY;AACxB,YAAMC,MAAM,GAAG,KAAKC,qBAApB;AAEA,UAAI,CAAC,KAAKJ,UAAV,EAAsB,OAAOG,MAAP;AAEtB,YAAMhB,eAAe,GAAGkB,QAAQ,CAAC,KAAKlB,eAAN,CAAhC;AAEA,aAAO,KAAKmB,WAAL,GACHH,MADG,GAEHA,MAAM,IAAI,CAACI,KAAK,CAACpB,eAAD,CAAN,GAA0BA,eAA1B,GAA4C,CAAhD,CAFV;AAGD,KAXO;;AAYRiB,IAAAA,qBAAqB,GAAY;AAC/B,UAAI,KAAKD,MAAT,EAAiB,OAAOE,QAAQ,CAAC,KAAKF,MAAN,CAAf;AACjB,UAAI,KAAKK,WAAL,IAAoB,KAAKvB,KAA7B,EAAoC,OAAO,EAAP;AACpC,UAAI,KAAKuB,WAAL,IAAoB,KAAKb,KAA7B,EAAoC,OAAO,GAAP;AACpC,UAAI,KAAKa,WAAT,EAAsB,OAAO,GAAP;AACtB,UAAI,KAAKvB,KAAT,EAAgB,OAAO,EAAP;AAChB,UAAI,KAAKU,KAAL,IAAc,KAAKc,QAAL,CAAcC,UAAd,CAAyBC,SAA3C,EAAsD,OAAO,EAAP;AACtD,aAAO,EAAP;AACD,KApBO;;AAqBRC,IAAAA,OAAO,GAAY;AACjB,aAAO,EACL,GAAGvC,MAAM,CAACwC,OAAP,CAAeZ,QAAf,CAAwBW,OAAxB,CAAgCE,IAAhC,CAAqC,IAArC,CADE;AAEL,qBAAa,IAFR;AAGL,+BAAuB,KAAKjC,QAHvB;AAIL,6BAAqB,KAAKE,MAJrB;AAKL,+BAAuB,KAAKC,QALvB;AAML,gCAAwB,KAAKsB,WANxB;AAOL,4BAAoB,KAAKrB,KAPpB;AAQL,+BAAuB,KAAKe,UARvB;AASL,2BAAmB,KAAKR,IATnB;AAUL,+BAAuB,KAAKC,QAVvB;AAWL,gCAAwB,KAAKe;AAXxB,OAAP;AAaD,KAnCO;;AAoCRF,IAAAA,WAAW,GAAa;AACtB,aAAO,KAAKtB,QAAZ;AACD,KAtCO;;AAuCRwB,IAAAA,WAAW,GAAa;AACtB,aAAO,KAAKd,SAAZ;AACD,KAzCO;;AA0CRqB,IAAAA,MAAM,GAAY;AAChB,aAAO,EACL,GAAG,KAAKC,gBADH;AAELb,QAAAA,MAAM,EAAE5B,aAAa,CAAC,KAAK2B,cAAN;AAFhB,OAAP;AAID;;AA/CO,GA/BiB;;AAiF3Be,EAAAA,OAAO,GAAI;AACT,UAAMC,aAAa,GAAG,CACpB,CAAC,KAAD,EAAQ,iBAAR,CADoB,EAEpB,CAAC,eAAD,EAAkB,4BAAlB,CAFoB,EAGpB,CAAC,cAAD,EAAiB,0BAAjB,CAHoB,EAIpB,CAAC,eAAD,EAAkB,2BAAlB,CAJoB,EAKpB,CAAC,iBAAD,EAAoB,6BAApB,CALoB,EAMpB,CAAC,mBAAD,EAAsB,+BAAtB,CANoB,EAOpB,CAAC,eAAD,EAAkB,2BAAlB,CAPoB,EAQpB,CAAC,kBAAD,EAAqB,8BAArB,CARoB,EASpB,CAAC,MAAD,EAAS,kBAAT,CAToB,CAAtB;AAYA;;AACAA,IAAAA,aAAa,CAACC,OAAd,CAAsB,CAAC,CAACC,QAAD,EAAWC,WAAX,CAAD,KAA6B;AACjD,UAAI,KAAKC,MAAL,CAAYC,cAAZ,CAA2BH,QAA3B,CAAJ,EAA0C3C,QAAQ,CAAC2C,QAAD,EAAWC,WAAX,EAAwB,IAAxB,CAAR;AAC3C,KAFD;AAGD,GAlG0B;;AAoG3BG,EAAAA,OAAO,EAAE;AACPC,IAAAA,aAAa,GAAI;AACf,YAAM7C,KAAK,GAAG;AACZuB,QAAAA,MAAM,EAAE5B,aAAa,CAAC,KAAK2B,cAAN,CADT;AAEZN,QAAAA,GAAG,EAAE,KAAKA;AAFE,OAAd;AAKA,YAAM8B,KAAK,GAAG,KAAKC,YAAL,CAAkBC,GAAlB,GACV,KAAKD,YAAL,CAAkBC,GAAlB,CAAsB;AAAEhD,QAAAA;AAAF,OAAtB,CADU,GAEV,KAAKiD,cAAL,CAAoBvD,IAApB,EAA0B;AAAEM,QAAAA;AAAF,OAA1B,CAFJ;AAIA,aAAO,KAAKiD,cAAL,CAAoB,KAApB,EAA2B;AAChCC,QAAAA,WAAW,EAAE;AADmB,OAA3B,EAEJ,CAACJ,KAAD,CAFI,CAAP;AAGD,KAdM;;AAePK,IAAAA,UAAU,GAAI;AACZ,aAAO,KAAKF,cAAL,CAAoB,KAApB,EAA2B;AAChCC,QAAAA,WAAW,EAAE,oBADmB;AAEhCE,QAAAA,KAAK,EAAE;AACL7B,UAAAA,MAAM,EAAE5B,aAAa,CAAC,KAAK6B,qBAAN;AADhB;AAFyB,OAA3B,EAKJ5B,OAAO,CAAC,IAAD,CALH,CAAP;AAMD,KAtBM;;AAuBPyD,IAAAA,YAAY,GAAI;AACd,aAAO,KAAKJ,cAAL,CAAoB,KAApB,EAA2B;AAChCC,QAAAA,WAAW,EAAE,sBADmB;AAEhCE,QAAAA,KAAK,EAAE;AACL7B,UAAAA,MAAM,EAAE5B,aAAa,CAAC,KAAKY,eAAN;AADhB;AAFyB,OAA3B,EAKJX,OAAO,CAAC,IAAD,EAAO,WAAP,CALH,CAAP;AAMD;;AA9BM,GApGkB;;AAqI3B0D,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,SAAKnC,UAAL,GAAkB,KAAKd,QAAL,IAAiB,CAAC,CAAC,KAAKyC,YAAL,CAAkBS,SAAvD;AAEA,UAAMC,QAAQ,GAAG,CAAC,KAAKN,UAAL,EAAD,CAAjB;AACA,UAAMhC,IAAI,GAAG,KAAKuC,kBAAL,CAAwB,KAAKC,KAA7B,EAAoC;AAC/CC,MAAAA,KAAK,EAAE,KAAK5B,OADmC;AAE/CoB,MAAAA,KAAK,EAAE,KAAKjB,MAFmC;AAG/C0B,MAAAA,EAAE,EAAE,KAAKC;AAHsC,KAApC,CAAb;AAMA,QAAI,KAAK1C,UAAT,EAAqBqC,QAAQ,CAACM,IAAT,CAAc,KAAKV,YAAL,EAAd;AACrB,QAAI,KAAKrC,GAAL,IAAY,KAAK+B,YAAL,CAAkBC,GAAlC,EAAuCS,QAAQ,CAACO,OAAT,CAAiB,KAAKnB,aAAL,EAAjB;AAEvC,WAAOU,CAAC,CAAC,KAAKrC,GAAN,EAAWC,IAAX,EAAiBsC,QAAjB,CAAR;AACD;;AAnJ0B,CAAd,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VToolbar.sass'\n\n// Extensions\nimport VSheet from '../VSheet/VSheet'\n\n// Components\nimport VImg, { srcObject } from '../VImg/VImg'\n\n// Utilities\nimport { convertToUnit, getSlot } from '../../util/helpers'\nimport { breaking } from '../../util/console'\n\n// Types\nimport { VNode, PropType } from 'vue'\n\n/* @vue/component */\nexport default VSheet.extend({\n  name: 'v-toolbar',\n\n  props: {\n    absolute: Boolean,\n    bottom: Boolean,\n    collapse: Boolean,\n    dense: Boolean,\n    extended: Boolean,\n    extensionHeight: {\n      default: 48,\n      type: [Number, String],\n    },\n    flat: Boolean,\n    floating: Boolean,\n    prominent: Boolean,\n    short: Boolean,\n    src: {\n      type: [String, Object] as PropType<string | srcObject>,\n      default: '',\n    },\n    tag: {\n      type: String,\n      default: 'header',\n    },\n  },\n\n  data: () => ({\n    isExtended: false,\n  }),\n\n  computed: {\n    computedHeight (): number {\n      const height = this.computedContentHeight\n\n      if (!this.isExtended) return height\n\n      const extensionHeight = parseInt(this.extensionHeight)\n\n      return this.isCollapsed\n        ? height\n        : height + (!isNaN(extensionHeight) ? extensionHeight : 0)\n    },\n    computedContentHeight (): number {\n      if (this.height) return parseInt(this.height)\n      if (this.isProminent && this.dense) return 96\n      if (this.isProminent && this.short) return 112\n      if (this.isProminent) return 128\n      if (this.dense) return 48\n      if (this.short || this.$vuetify.breakpoint.smAndDown) return 56\n      return 64\n    },\n    classes (): object {\n      return {\n        ...VSheet.options.computed.classes.call(this),\n        'v-toolbar': true,\n        'v-toolbar--absolute': this.absolute,\n        'v-toolbar--bottom': this.bottom,\n        'v-toolbar--collapse': this.collapse,\n        'v-toolbar--collapsed': this.isCollapsed,\n        'v-toolbar--dense': this.dense,\n        'v-toolbar--extended': this.isExtended,\n        'v-toolbar--flat': this.flat,\n        'v-toolbar--floating': this.floating,\n        'v-toolbar--prominent': this.isProminent,\n      }\n    },\n    isCollapsed (): boolean {\n      return this.collapse\n    },\n    isProminent (): boolean {\n      return this.prominent\n    },\n    styles (): object {\n      return {\n        ...this.measurableStyles,\n        height: convertToUnit(this.computedHeight),\n      }\n    },\n  },\n\n  created () {\n    const breakingProps = [\n      ['app', '<v-app-bar app>'],\n      ['manual-scroll', '<v-app-bar :value=\"false\">'],\n      ['clipped-left', '<v-app-bar clipped-left>'],\n      ['clipped-right', '<v-app-bar clipped-right>'],\n      ['inverted-scroll', '<v-app-bar inverted-scroll>'],\n      ['scroll-off-screen', '<v-app-bar scroll-off-screen>'],\n      ['scroll-target', '<v-app-bar scroll-target>'],\n      ['scroll-threshold', '<v-app-bar scroll-threshold>'],\n      ['card', '<v-app-bar flat>'],\n    ]\n\n    /* istanbul ignore next */\n    breakingProps.forEach(([original, replacement]) => {\n      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)\n    })\n  },\n\n  methods: {\n    genBackground () {\n      const props = {\n        height: convertToUnit(this.computedHeight),\n        src: this.src,\n      }\n\n      const image = this.$scopedSlots.img\n        ? this.$scopedSlots.img({ props })\n        : this.$createElement(VImg, { props })\n\n      return this.$createElement('div', {\n        staticClass: 'v-toolbar__image',\n      }, [image])\n    },\n    genContent () {\n      return this.$createElement('div', {\n        staticClass: 'v-toolbar__content',\n        style: {\n          height: convertToUnit(this.computedContentHeight),\n        },\n      }, getSlot(this))\n    },\n    genExtension () {\n      return this.$createElement('div', {\n        staticClass: 'v-toolbar__extension',\n        style: {\n          height: convertToUnit(this.extensionHeight),\n        },\n      }, getSlot(this, 'extension'))\n    },\n  },\n\n  render (h): VNode {\n    this.isExtended = this.extended || !!this.$scopedSlots.extension\n\n    const children = [this.genContent()]\n    const data = this.setBackgroundColor(this.color, {\n      class: this.classes,\n      style: this.styles,\n      on: this.$listeners,\n    })\n\n    if (this.isExtended) children.push(this.genExtension())\n    if (this.src || this.$scopedSlots.img) children.unshift(this.genBackground())\n\n    return h(this.tag, data, children)\n  },\n})\n"],"file":"VToolbar.mjs"}
+{"version":3,"sources":["../../../src/components/VToolbar/VToolbar.tsx"],"names":["VDefaultsProvider","VImg","VToolbarTitle","makeBorderProps","useBorder","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useForwardRef","computed","toRef","convertToUnit","genericComponent","pick","propsFactory","useRender","provideDefaults","allowedDensities","makeVToolbarProps","absolute","Boolean","collapse","color","String","density","type","default","validator","v","includes","extended","extensionHeight","Number","flat","floating","height","image","title","tag","VToolbar","name","props","setup","slots","borderClasses","elevationClasses","roundedClasses","themeClasses","backgroundColorClasses","backgroundColorStyles","isExtended","extension","contentHeight","parseInt","value","VBtn","variant","hasTitle","hasImage","cover","src","prepend","text","append","filterToolbarProps","Object","keys"],"mappings":";AAAA;AACA,wB,CAEA;;SACSA,iB;SACAC,I;SACAC,a,+BAET;;SACSC,e,EAAiBC,S;SACjBC,kB,EAAoBC,Y;SACpBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,kB;SACAC,a,4CAET;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,a,EAAeC,gB,EAAkBC,I,EAAMC,Y,EAAcC,S,gCAE9D;;SAGSC,e;AAIT,MAAMC,gBAAgB,GAAG,CAAC,IAAD,EAAO,WAAP,EAAoB,SAApB,EAA+B,aAA/B,EAA8C,SAA9C,CAAzB;AAEA,OAAO,MAAMC,iBAAiB,GAAGJ,YAAY,CAAC;AAC5CK,EAAAA,QAAQ,EAAEC,OADkC;AAE5CC,EAAAA,QAAQ,EAAED,OAFkC;AAG5CE,EAAAA,KAAK,EAAEC,MAHqC;AAI5CC,EAAAA,OAAO,EAAE;AACPC,IAAAA,IAAI,EAAEF,MADC;AAEPG,IAAAA,OAAO,EAAE,SAFF;AAGPC,IAAAA,SAAS,EAAGC,CAAD,IAAYX,gBAAgB,CAACY,QAAjB,CAA0BD,CAA1B;AAHhB,GAJmC;AAS5CE,EAAAA,QAAQ,EAAEV,OATkC;AAU5CW,EAAAA,eAAe,EAAE;AACfN,IAAAA,IAAI,EAAE,CAACO,MAAD,EAAST,MAAT,CADS;AAEfG,IAAAA,OAAO,EAAE;AAFM,GAV2B;AAc5CO,EAAAA,IAAI,EAAEb,OAdsC;AAe5Cc,EAAAA,QAAQ,EAAEd,OAfkC;AAgB5Ce,EAAAA,MAAM,EAAE;AACNV,IAAAA,IAAI,EAAE,CAACO,MAAD,EAAST,MAAT,CADA;AAENG,IAAAA,OAAO,EAAE;AAFH,GAhBoC;AAoB5CU,EAAAA,KAAK,EAAEb,MApBqC;AAqB5Cc,EAAAA,KAAK,EAAEd,MArBqC;AAuB5C,KAAGzB,eAAe,EAvB0B;AAwB5C,KAAGE,kBAAkB,EAxBuB;AAyB5C,KAAGE,gBAAgB,EAzByB;AA0B5C,KAAGE,YAAY,CAAC;AAAEkC,IAAAA,GAAG,EAAE;AAAP,GAAD,CA1B6B;AA2B5C,KAAGjC,cAAc;AA3B2B,CAAD,EA4B1C,WA5B0C,CAAtC;AA8BP,OAAO,MAAMkC,QAAQ,GAAG3B,gBAAgB,GASnC;AACH4B,EAAAA,IAAI,EAAE,UADH;AAGHC,EAAAA,KAAK,EAAEvB,iBAAiB,EAHrB;;AAKHwB,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAoB7C,SAAS,CAAC0C,KAAD,CAAnC;AACA,UAAM;AAAEI,MAAAA;AAAF,QAAuB5C,YAAY,CAACwC,KAAD,CAAzC;AACA,UAAM;AAAEK,MAAAA;AAAF,QAAqB3C,UAAU,CAACsC,KAAD,CAArC;AACA,UAAM;AAAEM,MAAAA;AAAF,QAAmBzC,YAAY,CAACmC,KAAD,CAArC;AACA,UAAM;AAAEO,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoD1C,kBAAkB,CAACG,KAAK,CAAC+B,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAMS,UAAU,GAAGzC,QAAQ,CAAC,MAAO,CAAC,EAAEgC,KAAK,CAACX,QAAN,IAAkBa,KAAK,CAACQ,SAA1B,CAAT,CAA3B;AACA,UAAMC,aAAa,GAAG3C,QAAQ,CAAC,MAAM4C,QAAQ,CAC3CrB,MAAM,CAACS,KAAK,CAACN,MAAP,CAAN,IACCM,KAAK,CAACjB,OAAN,KAAkB,WAAlB,GAAgCQ,MAAM,CAACS,KAAK,CAACN,MAAP,CAAtC,GAAuD,CADxD,KAECM,KAAK,CAACjB,OAAN,KAAkB,aAAlB,GAAkC,CAAlC,GAAsC,CAFvC,KAGCiB,KAAK,CAACjB,OAAN,KAAkB,SAAlB,GAA8B,EAA9B,GAAmC,CAHpC,CAD2C,EAK1C,EAL0C,CAAf,CAA9B;AAMA,UAAMO,eAAe,GAAGtB,QAAQ,CAAC,MAAMyC,UAAU,CAACI,KAAX,GACnCD,QAAQ,CACRrB,MAAM,CAACS,KAAK,CAACV,eAAP,CAAN,IACCU,KAAK,CAACjB,OAAN,KAAkB,WAAlB,GAAgCQ,MAAM,CAACS,KAAK,CAACV,eAAP,CAAtC,GAAgE,CADjE,KAECU,KAAK,CAACjB,OAAN,KAAkB,aAAlB,GAAkC,CAAlC,GAAsC,CAFvC,KAGCiB,KAAK,CAACjB,OAAN,KAAkB,SAAlB,GAA8B,CAA9B,GAAkC,CAHnC,CADQ,EAKP,EALO,CAD2B,GAOnC,CAP4B,CAAhC;AAUAR,IAAAA,eAAe,CAAC;AACduC,MAAAA,IAAI,EAAE;AACJtB,QAAAA,IAAI,EAAE,IADF;AAEJuB,QAAAA,OAAO,EAAE;AAFL;AADQ,KAAD,CAAf;AAOAzC,IAAAA,SAAS,CAAC,MAAM;AAAA;;AACd,YAAM0C,QAAQ,GAAG,CAAC,EAAEhB,KAAK,CAACJ,KAAN,IAAeM,KAAK,CAACN,KAAvB,CAAlB;AACA,YAAMqB,QAAQ,GAAG,CAAC,EAAEf,KAAK,CAACP,KAAN,IAAeK,KAAK,CAACL,KAAvB,CAAlB;AAEA;AAAA,iBAEW,CACL,WADK,EAEL;AACE,iCAAuBK,KAAK,CAACtB,QAD/B;AAEE,iCAAuBsB,KAAK,CAACpB,QAF/B;AAGE,6BAAmBoB,KAAK,CAACR,IAH3B;AAIE,iCAAuBQ,KAAK,CAACP,QAJ/B;AAKE,WAAE,sBAAqBO,KAAK,CAACjB,OAAQ,EAArC,GAAyC;AAL3C,SAFK,EASLwB,sBAAsB,CAACM,KATlB,EAULV,aAAa,CAACU,KAVT,EAWLT,gBAAgB,CAACS,KAXZ,EAYLR,cAAc,CAACQ,KAZV,EAaLP,YAAY,CAACO,KAbR,CAFX;AAAA,iBAiBW,CACLL,qBAAqB,CAACK,KADjB;AAjBX;AAAA,wBAqBMI,QAAQ;AAAA,mBACG;AADH;AAAA,sBAGM;AACR9D,YAAAA,IAAI,EAAE;AACJ+D,cAAAA,KAAK,EAAE,IADH;AAEJC,cAAAA,GAAG,EAAEnB,KAAK,CAACL;AAFP;AADE,WAHN;AAAA;AAAA;AAAA,0BAWFO,KAAK,CAACP,KAAN,mBAAcO,KAAK,CAACP,KAApB,qBAAc,kBAAAO,KAAK,CAAnB,iCAXE;AAAA,YArBd;AAAA,mBAsCY,oBAtCZ;AAAA,mBAuCa;AAAER,YAAAA,MAAM,EAAExB,aAAa,CAACyC,aAAa,CAACE,KAAf;AAAvB;AAvCb,YAyCQX,KAAK,CAACkB,OAAN;AAAA,mBACW;AADX,8BAEIlB,KAAK,CAACkB,OAFV,qBAEI,oBAAAlB,KAAK,CAFT,EAzCR,EA+CQc,QAAQ;AAAA,kBACchB,KAAK,CAACJ;AADpB;AAEHyB,UAAAA,IAAI,EAAEnB,KAAK,CAACN;AAFT,UA/ChB,oBAqDQM,KAAK,CAACjB,OArDd,qBAqDQ,oBAAAiB,KAAK,CArDb,EAuDQA,KAAK,CAACoB,MAAN;AAAA,mBACW;AADX,6BAEIpB,KAAK,CAACoB,MAFV,qBAEI,mBAAApB,KAAK,CAFT,EAvDR,IA8DMO,UAAU,CAACI,KAAX;AAAA,mBAEQ,sBAFR;AAAA,mBAGS;AAAEnB,YAAAA,MAAM,EAAExB,aAAa,CAACoB,eAAe,CAACuB,KAAjB;AAAvB;AAHT,gCAKIX,KAAK,CAACQ,SALV,qBAKI,sBAAAR,KAAK,CALT,EA9DN;AAAA;AAwED,KA5EQ,CAAT;AA8EA,WAAOnC,aAAa,CAAC;AACnB4C,MAAAA,aADmB;AAEnBrB,MAAAA;AAFmB,KAAD,CAApB;AAID;;AArHE,CATmC,CAAjC;AAmIP,OAAO,SAASiC,kBAAT,CAA6BvB,KAA7B,EAA4F;AAAA;;AACjG,SAAO5B,IAAI,CAAC4B,KAAD,EAAQwB,MAAM,CAACC,IAAP,oBAAY3B,QAAZ,oBAAYA,QAAQ,CAAEE,KAAtB,8BAA+B,EAA/B,CAAR,CAAX;AACD","sourcesContent":["// Styles\nimport './VToolbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VImg } from '@/components/VImg'\nimport { VToolbarTitle } from './VToolbarTitle'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useForwardRef } from '@/composables/forwardRef'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { ExtractPropTypes, PropType } from 'vue'\nimport { provideDefaults } from '@/composables/defaults'\n\nexport type Density = typeof allowedDensities[number]\n\nconst allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const\n\nexport const makeVToolbarProps = propsFactory({\n  absolute: Boolean,\n  collapse: Boolean,\n  color: String,\n  density: {\n    type: String as PropType<Density>,\n    default: 'default',\n    validator: (v: any) => allowedDensities.includes(v),\n  },\n  extended: Boolean,\n  extensionHeight: {\n    type: [Number, String],\n    default: 48,\n  },\n  flat: Boolean,\n  floating: Boolean,\n  height: {\n    type: [Number, String],\n    default: 56,\n  },\n  image: String,\n  title: String,\n\n  ...makeBorderProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'header' }),\n  ...makeThemeProps(),\n}, 'v-toolbar')\n\nexport const VToolbar = genericComponent<new () => {\n  $slots: MakeSlots<{\n    default: []\n    image: [{ image: string }]\n    prepend: []\n    append: []\n    title: []\n    extension: []\n  }>\n}>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const isExtended = computed(() => (!!(props.extended || slots.extension)))\n    const contentHeight = computed(() => parseInt((\n      Number(props.height) +\n      (props.density === 'prominent' ? Number(props.height) : 0) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ), 10))\n    const extensionHeight = computed(() => isExtended.value\n      ? parseInt((\n        Number(props.extensionHeight) +\n        (props.density === 'prominent' ? Number(props.extensionHeight) : 0) -\n        (props.density === 'comfortable' ? 4 : 0) -\n        (props.density === 'compact' ? 8 : 0)\n      ), 10)\n      : 0\n    )\n\n    provideDefaults({\n      VBtn: {\n        flat: true,\n        variant: 'text',\n      },\n    })\n\n    useRender(() => {\n      const hasTitle = !!(props.title || slots.title)\n      const hasImage = !!(slots.image || props.image)\n\n      return (\n        <props.tag\n          class={[\n            'v-toolbar',\n            {\n              'v-toolbar--absolute': props.absolute,\n              'v-toolbar--collapse': props.collapse,\n              'v-toolbar--flat': props.flat,\n              'v-toolbar--floating': props.floating,\n              [`v-toolbar--density-${props.density}`]: true,\n            },\n            backgroundColorClasses.value,\n            borderClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n          ]}\n        >\n          { hasImage && (\n            <div class=\"v-toolbar__image\">\n              <VDefaultsProvider\n                defaults={{\n                  VImg: {\n                    cover: true,\n                    src: props.image,\n                  },\n                }}\n                scoped\n              >\n                { slots.image ? slots.image?.() : (<VImg />) }\n              </VDefaultsProvider>\n            </div>\n          ) }\n\n          <div\n            class=\"v-toolbar__content\"\n            style={{ height: convertToUnit(contentHeight.value) }}\n          >\n            { slots.prepend && (\n              <div class=\"v-toolbar__prepend\">\n                { slots.prepend?.() }\n              </div>\n            ) }\n\n            { hasTitle && (\n              <VToolbarTitle text={ props.title }>\n                {{ text: slots.title }}\n              </VToolbarTitle>\n            ) }\n\n            { slots.default?.() }\n\n            { slots.append && (\n              <div class=\"v-toolbar__append\">\n                { slots.append?.() }\n              </div>\n            ) }\n          </div>\n\n          { isExtended.value && (\n            <div\n              class=\"v-toolbar__extension\"\n              style={{ height: convertToUnit(extensionHeight.value) }}\n            >\n              { slots.extension?.() }\n            </div>\n          ) }\n        </props.tag>\n      )\n    })\n\n    return useForwardRef({\n      contentHeight,\n      extensionHeight,\n    })\n  },\n})\n\nexport type VToolbar = InstanceType<typeof VToolbar>\n\nexport function filterToolbarProps (props: ExtractPropTypes<ReturnType<typeof makeVToolbarProps>>) {\n  return pick(props, Object.keys(VToolbar?.props ?? {}) as any)\n}\n"],"file":"VToolbar.mjs"}

package/lib/components/VToolbar/VToolbar.sass

@@ -1,160 +1,112 @@
-@import './index'
-
-+theme('v-toolbar.v-sheet') using ($material)
-  background-color: map-get($material, 'toolbar')
-
-
-// Sheet
-+sheet(v-toolbar, $toolbar-elevation, $toolbar-border-radius, $toolbar-shaped-border-radius)
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 // Block
 .v-toolbar
-  contain: layout
-  display: block
-  flex: 1 1 auto
+  align-items: flex-start
+  display: flex
+  flex-direction: column
+  justify-content: space-between
   max-width: 100%
-  transition: $toolbar-transition
+  overflow: hidden
+  padding-inline-end: calc(#{$toolbar-padding-end} + var(--v-scrollbar-offset))
+  padding-inline-start: $toolbar-padding-start
   position: relative
+  transition: $toolbar-transition
+  transition-property: height, transform, max-width
 
-  +elevation(4)
-
-  .v-input
-    padding-top: 0
-    margin-top: 0
-
-// Element
-.v-toolbar__content,
-.v-toolbar__extension
-  padding: $toolbar-content-padding-y $toolbar-content-padding-x
-
-  .v-btn.v-btn--icon.v-size--default
-    height: $toolbar-btn-icon-size
-    width: $toolbar-btn-icon-size
-
-  > .v-btn.v-btn--icon
-    &:first-child
-      +ltr()
-        margin-left: -#{$toolbar-btn-icon-size / 4}
+  @include tools.border($toolbar-border...)
+  @include tools.elevation($toolbar-elevation)
+  @include tools.rounded($toolbar-border-radius)
+  @include tools.theme($toolbar-theme...)
 
-      +rtl()
-        margin-right: -#{$toolbar-btn-icon-size / 4}
+  @at-root
+    @include tools.density('v-toolbar', $toolbar-density) using ($modifier)
+      .v-toolbar__content
+        padding-top: $toolbar-padding + $modifier
+        padding-bottom: $toolbar-padding + $modifier
 
-      + .v-toolbar__title
-        +ltr()
-          padding-left: $toolbar-title-padding
+  &--absolute
+    position: absolute
 
-        +rtl()
-          padding-right: $toolbar-title-padding
+  &--collapse
+    max-width: $toolbar-collapsed-max-width
+    overflow: hidden
 
-    &:last-child
-      +ltr()
-        margin-right: -#{$toolbar-btn-icon-size / 4}
+    .v-toolbar-title
+      display: none
 
-      +rtl()
-        margin-left: -#{$toolbar-btn-icon-size / 4}
+    @include tools.ltr()
+      border-bottom-right-radius: $toolbar-collapsed-border-radius
 
-  > .v-tabs
-    height: inherit
-    margin-top: -#{$toolbar-content-padding-y}
-    margin-bottom: -#{$toolbar-content-padding-y}
+    @include tools.rtl()
+      border-bottom-left-radius: $toolbar-collapsed-border-radius
 
-    > .v-slide-group.v-tabs-bar
-      background-color: inherit
-      height: inherit
+  &--flat
+    @include tools.elevation($toolbar-flat-elevation)
 
-    &:first-child
-      margin-left: -#{$toolbar-content-padding-x}
+  &--floating
+    display: inline-flex
 
-    &:last-child
-      margin-right: -#{$toolbar-content-padding-x}
+  &--rounded
+    @include tools.rounded($toolbar-rounded-border-radius)
 
 .v-toolbar__content,
 .v-toolbar__extension
   align-items: center
   display: flex
+  flex: 0 0 auto
   position: relative
-  z-index: 0
-
-.v-toolbar__image
-  border-radius: inherit
-  position: absolute
-  top: 0
-  bottom: 0
+  transition: inherit
   width: 100%
-  z-index: 0
-  contain: strict
 
-  .v-image
-    border-radius: inherit
-
-.v-toolbar__items
-  display: flex
-  height: inherit
-
-  > .v-btn
-    border-radius: 0
-    height: 100% !important
-    max-height: none
+.v-toolbar__content
+  .v-toolbar--density-prominent &
+    align-items: flex-start
 
-.v-toolbar__title
-  font-size: 1.25rem
-  line-height: 1.5
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
+.v-toolbar__image
+  @include tools.absolute()
 
-// Modifier
-.v-toolbar.v-toolbar--absolute
-  position: absolute
-  top: 0
-  z-index: 1
+  display: flex
 
-.v-toolbar.v-toolbar--bottom
-  top: initial
-  bottom: 0
+.v-toolbar__prepend,
+.v-toolbar__append
+  display: flex
 
-.v-toolbar.v-toolbar--collapse
-  .v-toolbar__title
-    white-space: nowrap
+.v-toolbar__prepend
+  margin-inline-end: auto
 
-.v-toolbar.v-toolbar--collapsed
-  max-width: $toolbar-collapsed-max-width
-  overflow: hidden
+  > .v-btn:first-child
+    margin-inline-start: $toolbar-prepend-btn-margin-start
 
-  +ltr()
-    border-bottom-right-radius: $toolbar-collapsed-border-radius
+  + .v-toolbar-title
+    padding-inline-start: $toolbar-title-padding
 
-  +rtl()
-    border-bottom-left-radius: $toolbar-collapsed-border-radius
+.v-toolbar__append
+  margin-inline-start: auto
 
-  .v-toolbar__title,
-  .v-toolbar__extension
-    display: none
+  > .v-btn:last-child
+    margin-inline-end: $toolbar-append-btn-margin-end
 
-.v-toolbar--dense
-  .v-toolbar__content,
-  .v-toolbar__extension
-    padding-top: 0
-    padding-bottom: 0
+.v-toolbar-title
+  flex: 1 1
+  font-size: $toolbar-title-font-size
+  min-width: 0
 
-// @deprecated
-// TODO: Remove in v3
-.v-toolbar--flat
-  +elevation(0, true)
+  @include tools.typography($toolbar-title-typography...)
 
-.v-toolbar--floating
-  display: inline-flex
+  .v-toolbar--density-prominent &
+    align-self: flex-end
+    padding-bottom: 6px
 
-.v-toolbar--prominent
-  .v-toolbar__content
-    align-items: flex-start
+    @include tools.typography($toolbar-prominent-title-typography...)
 
-  .v-toolbar__title
-    font-size: 1.5rem
-    padding-top: $toolbar-prominent-padding
+.v-toolbar-title__placeholder
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
 
-  &:not(.v-toolbar--bottom)
-    .v-toolbar__title
-      align-self: flex-end
-      padding-bottom: $toolbar-prominent-padding
-      padding-top: 0
+.v-toolbar-items
+  display: flex
+  height: inherit

package/lib/components/VToolbar/VToolbarItems.mjs

@@ -0,0 +1,32 @@
+// Composables
+import { makeVariantProps } from "../../composables/variant.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
+
+import { defineComponent } from "../../util/index.mjs";
+import { toRef } from 'vue';
+export const VToolbarItems = defineComponent({
+  name: 'VToolbarItems',
+  props: { ...makeVariantProps({
+      variant: 'contained-text'
+    })
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    provideDefaults({
+      VBtn: {
+        color: toRef(props, 'color'),
+        variant: toRef(props, 'variant')
+      }
+    });
+    return () => {
+      var _slots$default;
+
+      return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots);
+    };
+  }
+
+});
+//# sourceMappingURL=VToolbarItems.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"names":["makeVariantProps","provideDefaults","defineComponent","toRef","VToolbarItems","name","props","variant","setup","slots","VBtn","color","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;AAEJC,QAAAA,OAAO,EAAEJ,KAAK,CAACG,KAAD,EAAQ,SAAR;AAFV;AADQ,KAAD,CAAf;AAOA,WAAO;AAAA;;AAAA,+BAAMG,KAAK,CAACG,OAAZ,qBAAM,oBAAAH,KAAK,CAAX;AAAA,KAAP;AACD;;AAhB0C,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        variant: toRef(props, 'variant'),\n      },\n    })\n\n    return () => slots.default?.()\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"file":"VToolbarItems.mjs"}

package/lib/components/VToolbar/VToolbarTitle.mjs

@@ -0,0 +1,34 @@
+import { createVNode as _createVNode } from "vue";
+// Composables
+import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
+
+import { genericComponent, useRender } from "../../util/index.mjs"; // Types
+
+export const VToolbarTitle = genericComponent()({
+  name: 'VToolbarTitle',
+  props: {
+    text: String,
+    ...makeTagProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    useRender(() => {
+      var _slots$default;
+
+      const hasText = !!(slots.default || slots.text || props.text);
+      return _createVNode(props.tag, {
+        "class": "v-toolbar-title"
+      }, {
+        default: () => [hasText && _createVNode("div", {
+          "class": "v-toolbar-title__placeholder"
+        }, [slots.text ? slots.text() : props.text, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]
+      });
+    });
+    return {};
+  }
+
+});
+//# sourceMappingURL=VToolbarTitle.mjs.map

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

@@ -0,0 +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"}