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

package/lib/components/VTimeline/VTimelineItem.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"names":["VTimelineSymbol","VTimelineDivider","makeTagProps","makeSizeProps","makeElevationProps","makeRoundedProps","inject","ref","watch","convertToUnit","defineComponent","makeDimensionProps","useDimension","VTimelineItem","name","props","dotColor","String","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","setup","slots","timeline","Error","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","size","elevation","rounded","density","opposite"],"mappings":";AAAA;SACSA,e;SACAC,gB,kCAET;;SACSC,Y;SACAC,a;SACAC,kB;SACAC,gB,yCAET;;AACA,SAASC,MAAT,EAAiBC,GAAjB,EAAsBC,KAAtB,QAAmC,KAAnC;SACSC,a,EAAeC,e;SACfC,kB,EAAoBC,Y;AAE7B,OAAO,MAAMC,aAAa,GAAGH,eAAe,CAAC;AAC3CI,EAAAA,IAAI,EAAE,eADqC;AAG3CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,MADL;AAELC,IAAAA,OAAO,EAAEC,OAFJ;AAGLC,IAAAA,OAAO,EAAED,OAHJ;AAILE,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAEH,OADM;AAEZI,MAAAA,OAAO,EAAEC;AAFG,KAJT;AAQLC,IAAAA,IAAI,EAAER,MARD;AASLS,IAAAA,SAAS,EAAET,MATN;AAWL,OAAGZ,gBAAgB,EAXd;AAYL,OAAGD,kBAAkB,EAZhB;AAaL,OAAGD,aAAa,EAbX;AAcL,OAAGD,YAAY,EAdV;AAeL,OAAGS,kBAAkB;AAfhB,GAHoC;;AAqB3CgB,EAAAA,KAAK,CAAEZ,KAAF,QAAoB;AAAA,QAAX;AAAEa,MAAAA;AAAF,KAAW;AACvB,UAAMC,QAAQ,GAAGvB,MAAM,CAACN,eAAD,CAAvB;AAEA,QAAI,CAAC6B,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;AAEf,UAAM;AAAEC,MAAAA;AAAF,QAAsBnB,YAAY,CAACG,KAAD,CAAxC;AAEA,UAAMiB,OAAO,GAAGzB,GAAG,CAAC,CAAD,CAAnB;AACA,UAAM0B,MAAM,GAAG1B,GAAG,EAAlB;AACAC,IAAAA,KAAK,CAACyB,MAAD,EAASC,QAAQ,IAAI;AAAA;;AACxB,UAAI,CAACA,QAAL,EAAe;AACfF,MAAAA,OAAO,CAACG,KAAR,sDAAgBD,QAAQ,CAACE,GAAT,CAAaC,aAAb,CAA2B,0BAA3B,CAAhB,qBAAgB,uBAAwDC,qBAAxD,GAAgFC,KAAhG,oCAAyG,CAAzG;AACD,KAHI,EAGF;AACDC,MAAAA,KAAK,EAAE;AADN,KAHE,CAAL;AAOA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,iBADK,EAEL;AACE,uCAA6BzB,KAAK,CAACG;AADrC,SAFK,CAFJ;AAAA,iBAQI;AACL,mCAAyBT,aAAa,CAACuB,OAAO,CAACG,KAAT;AADjC;AARJ;AAAA,iBAaK,uBAbL;AAAA,iBAcOJ,eAAe,CAACI;AAdvB,4BAgBCP,KAAK,CAACL,OAhBP,qBAgBC,oBAAAK,KAAK,CAhBN;AAAA,eAoBKK,MApBL;AAAA,mBAqBSlB,KAAK,CAACK,OArBf;AAAA,gBAsBML,KAAK,CAACU,IAtBZ;AAAA,qBAuBWV,KAAK,CAACW,SAvBjB;AAAA,gBAwBMX,KAAK,CAAC0B,IAxBZ;AAAA,qBAyBW1B,KAAK,CAAC2B,SAzBjB;AAAA,oBA0BU3B,KAAK,CAACC,QA1BhB;AAAA,mBA2BSD,KAAK,CAACG,OA3Bf;AAAA,mBA4BSH,KAAK,CAAC4B;AA5Bf,SA6BQ;AAAEpB,QAAAA,OAAO,EAAEK,KAAK,CAACH;AAAjB,OA7BR,GAgCDI,QAAQ,CAACe,OAAT,CAAiBT,KAAjB,KAA2B,SAA3B;AAAA,iBACW;AADX,UAEI,CAACpB,KAAK,CAACM,YAAP,wBAAuBO,KAAK,CAACiB,QAA7B,qBAAuB,qBAAAjB,KAAK,CAA5B,CAFJ,EAhCC;AAAA,KAAP;AAuCD;;AA5E0C,CAAD,CAArC","sourcesContent":["// Components\nimport { VTimelineSymbol } from './shared'\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\n\n// Utilities\nimport { inject, ref, watch } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\nexport const VTimelineItem = defineComponent({\n  name: 'VTimelineItem',\n\n  props: {\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    hideOpposite: {\n      type: Boolean,\n      default: undefined,\n    },\n    icon: String,\n    iconColor: String,\n\n    ...makeRoundedProps(),\n    ...makeElevationProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const timeline = inject(VTimelineSymbol)\n\n    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider')\n\n    const { dimensionStyles } = useDimension(props)\n\n    const dotSize = ref(0)\n    const dotRef = ref<VTimelineDivider>()\n    watch(dotRef, newValue => {\n      if (!newValue) return\n      dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0\n    }, {\n      flush: 'post',\n    })\n\n    return () => (\n      <div\n        class={[\n          'v-timeline-item',\n          {\n            'v-timeline-item--fill-dot': props.fillDot,\n          },\n        ]}\n        style={{\n          '--v-timeline-dot-size': convertToUnit(dotSize.value),\n        }}\n      >\n        <div\n          class=\"v-timeline-item__body\"\n          style={ dimensionStyles.value }\n        >\n          { slots.default?.() }\n        </div>\n\n        <VTimelineDivider\n          ref={ dotRef }\n          hideDot={ props.hideDot }\n          icon={ props.icon }\n          iconColor={ props.iconColor }\n          size={ props.size }\n          elevation={ props.elevation }\n          dotColor={ props.dotColor }\n          fillDot={ props.fillDot }\n          rounded={ props.rounded }\n          v-slots={{ default: slots.icon }}\n        />\n\n        { timeline.density.value !== 'compact' && (\n          <div class=\"v-timeline-item__opposite\">\n            { !props.hideOpposite && slots.opposite?.() }\n          </div>\n        ) }\n      </div>\n    )\n  },\n})\n"],"file":"VTimelineItem.mjs"}
+{"version":3,"file":"VTimelineItem.mjs","names":["VTimelineDivider","IconValue","makeElevationProps","makeRoundedProps","makeSizeProps","makeTagProps","ref","watch","convertToUnit","defineComponent","useRender","makeDimensionProps","useDimension","VTimelineItem","name","props","density","String","dotColor","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","lineInset","Number","setup","slots","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","size","elevation","rounded","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport type { PropType } from 'vue'\nimport { ref, watch } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\nexport const VTimelineItem = defineComponent({\n  name: 'VTimelineItem',\n\n  props: {\n    density: String as PropType<'default' | 'compact'>,\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    hideOpposite: {\n      type: Boolean,\n      default: undefined,\n    },\n    icon: IconValue,\n    iconColor: String,\n    lineInset: [Number, String],\n\n    ...makeRoundedProps(),\n    ...makeElevationProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n\n    const dotSize = ref(0)\n    const dotRef = ref<VTimelineDivider>()\n    watch(dotRef, newValue => {\n      if (!newValue) return\n      dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0\n    }, {\n      flush: 'post',\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-timeline-item',\n          {\n            'v-timeline-item--fill-dot': props.fillDot,\n          },\n        ]}\n        style={{\n          '--v-timeline-dot-size': convertToUnit(dotSize.value),\n          '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0),\n        }}\n      >\n        <div\n          class=\"v-timeline-item__body\"\n          style={ dimensionStyles.value }\n        >\n          { slots.default?.() }\n        </div>\n\n        <VTimelineDivider\n          ref={ dotRef }\n          hideDot={ props.hideDot }\n          icon={ props.icon }\n          iconColor={ props.iconColor }\n          size={ props.size }\n          elevation={ props.elevation }\n          dotColor={ props.dotColor }\n          fillDot={ props.fillDot }\n          rounded={ props.rounded }\n          v-slots={{ default: slots.icon }}\n        />\n\n        { props.density !== 'compact' && (\n          <div class=\"v-timeline-item__opposite\">\n            { !props.hideOpposite && slots.opposite?.() }\n          </div>\n        ) }\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,gB,kCAET;;SACSC,S;SACAC,kB;SACAC,gB;SACAC,a;SACAC,Y,qCAET;;AAEA,SAASC,GAAT,EAAcC,KAAd,QAA2B,KAA3B;SACSC,a,EAAeC,e,EAAiBC,S;SAChCC,kB,EAAoBC,Y;AAE7B,OAAO,MAAMC,aAAa,GAAGJ,eAAe,CAAC;EAC3CK,IAAI,EAAE,eADqC;EAG3CC,KAAK,EAAE;IACLC,OAAO,EAAEC,MADJ;IAELC,QAAQ,EAAED,MAFL;IAGLE,OAAO,EAAEC,OAHJ;IAILC,OAAO,EAAED,OAJJ;IAKLE,YAAY,EAAE;MACZC,IAAI,EAAEH,OADM;MAEZI,OAAO,EAAEC;IAFG,CALT;IASLC,IAAI,EAAEzB,SATD;IAUL0B,SAAS,EAAEV,MAVN;IAWLW,SAAS,EAAE,CAACC,MAAD,EAASZ,MAAT,CAXN;IAaL,GAAGd,gBAAgB,EAbd;IAcL,GAAGD,kBAAkB,EAdhB;IAeL,GAAGE,aAAa,EAfX;IAgBL,GAAGC,YAAY,EAhBV;IAiBL,GAAGM,kBAAkB;EAjBhB,CAHoC;;EAuB3CmB,KAAK,CAAEf,KAAF,QAAoB;IAAA,IAAX;MAAEgB;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAsBpB,YAAY,CAACG,KAAD,CAAxC;IAEA,MAAMkB,OAAO,GAAG3B,GAAG,CAAC,CAAD,CAAnB;IACA,MAAM4B,MAAM,GAAG5B,GAAG,EAAlB;IACAC,KAAK,CAAC2B,MAAD,EAASC,QAAQ,IAAI;MAAA;;MACxB,IAAI,CAACA,QAAL,EAAe;MACfF,OAAO,CAACG,KAAR,GAAgB,0BAAAD,QAAQ,CAACE,GAAT,CAAaC,aAAb,CAA2B,0BAA3B,4CAAwDC,qBAAxD,GAAgFC,KAAhF,KAAyF,CAAzG;IACD,CAHI,EAGF;MACDC,KAAK,EAAE;IADN,CAHE,CAAL;IAOA/B,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,iBADK,EAEL;UACE,6BAA6BK,KAAK,CAACI;QADrC,CAFK,CAFD;QAAA,SAQC;UACL,yBAAyBX,aAAa,CAACyB,OAAO,CAACG,KAAT,CADjC;UAEL,2BAA2BrB,KAAK,CAACa,SAAN,GAAmB,yCAAwCpB,aAAa,CAACO,KAAK,CAACa,SAAP,CAAkB,GAA1F,GAA+FpB,aAAa,CAAC,CAAD;QAFlI;MARD;QAAA,SAcE,uBAdF;QAAA,SAeIwB,eAAe,CAACI;MAfpB,sBAiBFL,KAAK,CAACP,OAjBJ,qBAiBF,oBAAAO,KAAK,CAjBH;QAAA,OAqBEG,MArBF;QAAA,WAsBMnB,KAAK,CAACM,OAtBZ;QAAA,QAuBGN,KAAK,CAACW,IAvBT;QAAA,aAwBQX,KAAK,CAACY,SAxBd;QAAA,QAyBGZ,KAAK,CAAC2B,IAzBT;QAAA,aA0BQ3B,KAAK,CAAC4B,SA1Bd;QAAA,YA2BO5B,KAAK,CAACG,QA3Bb;QAAA,WA4BMH,KAAK,CAACI,OA5BZ;QAAA,WA6BMJ,KAAK,CAAC6B;MA7BZ,GA8BK;QAAEpB,OAAO,EAAEO,KAAK,CAACL;MAAjB,CA9BL,GAiCJX,KAAK,CAACC,OAAN,KAAkB,SAAlB;QAAA,SACW;MADX,IAEI,CAACD,KAAK,CAACO,YAAP,wBAAuBS,KAAK,CAACc,QAA7B,qBAAuB,qBAAAd,KAAK,CAA5B,CAFJ,EAjCI;IAAA,CAAD,CAAT;IAyCA,OAAO,EAAP;EACD;;AA7E0C,CAAD,CAArC"}

package/lib/components/VTimeline/_mixins.sass

@@ -29,3 +29,13 @@
 @mixin horizontal($immediate: false)
   @at-root .v-timeline--horizontal#{if($immediate, &, ' &')}
     @content
+
+@mixin timeline-first-item()
+  .v-timeline-item:first-child
+    .v-timeline-divider, .v-timeline-item__body, .v-timeline-item__opposite
+      @content
+
+@mixin timeline-last-item()
+  .v-timeline-item:last-child
+    .v-timeline-divider, .v-timeline-item__body, .v-timeline-item__opposite
+      @content

package/lib/components/VTimeline/_variables.scss

@@ -1,22 +1,29 @@
 @use '../../styles/tools';
 
-// Defaults
+// VTimeline
 $timeline-density-comfortable-grid-template-end: min-content min-content auto !default;
 $timeline-density-comfortable-grid-template-start: auto min-content min-content !default;
-$timeline-density-compact-grid-template-end: min-content auto !default;
-$timeline-density-compact-grid-template-start: auto min-content !default;
+$timeline-density-compact-grid-template-end: 0 min-content auto !default;
+$timeline-density-compact-grid-template-start: auto min-content 0 !default;
+$timeline-dot-border-radius: 50% !default;
+$timeline-dot-divider-background: rgb(var(--v-theme-on-surface-variant)) !default;
+$timeline-dot-size: 38px !default;
+$timeline-inner-dot-divider-background: rgb(var(--v-theme-on-surface)) !default;
+$timeline-inset-divider-line: var(--v-timeline-line-inset) !default;
+$timeline-inset-line-size: 4px !default;
+
+// VTimelineDivider
 $timeline-divider-dot-elevation: 0 !default;
 $timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
 $timeline-divider-line-horizontal-width: var(--v-timeline-line-inset, 0px) !default;
 $timeline-divider-line-thickness: var(--v-timeline-line-thickness) !default;
-$timeline-dot-border-radius: 50% !default;
-$timeline-dot-divider-background: rgb(var(--v-theme-on-surface)) !default;
-$timeline-inset-divider-line: var(--v-timeline-line-inset) !default;
-$timeline-inset-line-size: 4px !default;
-$timeline-item-grid-template: auto min-content auto !default;
+
+// VTimelineItem
+$timeline-item-grid-template-center: minmax(auto, 50%) min-content minmax(auto, 50%) !default;
+$timeline-item-grid-template-auto: auto min-content auto !default;
 $timeline-item-padding: 24px !default;
-$timeline-dot-size: 38px !default;
 
+// Lists
 $timeline-dot-border-sizes: () !default;
 $timeline-dot-border-sizes: tools.map-deep-merge(
   (

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

@@ -0,0 +1,154 @@
+import * as vue from 'vue';
+import { Prop, JSXComponent, PropType } from 'vue';
+
+declare type TimelineDirection = 'vertical' | 'horizontal';
+declare type TimelineSide = 'start' | 'end' | undefined;
+declare type TimelineAlign = 'center' | 'start';
+declare type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined;
+declare const VTimeline: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    align: Prop<TimelineAlign, TimelineAlign>;
+    direction: Prop<TimelineDirection, TimelineDirection>;
+    justify: {
+        type: StringConstructor;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    side: Prop<TimelineSide, TimelineSide>;
+    lineInset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    lineThickness: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    lineColor: StringConstructor;
+    truncateLine: Prop<TimelineTruncateLine, TimelineTruncateLine>;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    align: Prop<TimelineAlign, TimelineAlign>;
+    direction: Prop<TimelineDirection, TimelineDirection>;
+    justify: {
+        type: StringConstructor;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    side: Prop<TimelineSide, TimelineSide>;
+    lineInset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    lineThickness: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    lineColor: StringConstructor;
+    truncateLine: Prop<TimelineTruncateLine, TimelineTruncateLine>;
+}>>, {
+    tag: string;
+    justify: string;
+    density: "default" | "compact" | "comfortable" | null;
+    lineInset: string | number;
+    lineThickness: string | number;
+}>;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VTimelineItem: vue.DefineComponent<{
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    density: PropType<"default" | "compact">;
+    dotColor: StringConstructor;
+    fillDot: BooleanConstructor;
+    hideDot: BooleanConstructor;
+    hideOpposite: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    icon: PropType<IconValue>;
+    iconColor: StringConstructor;
+    lineInset: (StringConstructor | NumberConstructor)[];
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    density: PropType<"default" | "compact">;
+    dotColor: StringConstructor;
+    fillDot: BooleanConstructor;
+    hideDot: BooleanConstructor;
+    hideOpposite: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    icon: PropType<IconValue>;
+    iconColor: StringConstructor;
+    lineInset: (StringConstructor | NumberConstructor)[];
+}>>, {
+    size: string | number;
+    tag: string;
+    rounded: string | number | boolean;
+    fillDot: boolean;
+    hideDot: boolean;
+    hideOpposite: boolean;
+}>;
+
+export { VTimeline, VTimelineItem };

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

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

package/lib/components/VToolbar/VToolbar.css

@@ -1,40 +1,26 @@
 .v-toolbar {
   align-items: flex-start;
   display: flex;
+  flex: none;
   flex-direction: column;
   justify-content: space-between;
   max-width: 100%;
   overflow: hidden;
-  padding-inline-end: calc(16px + var(--v-scrollbar-offset));
-  padding-inline-start: 16px;
   position: relative;
-  transition-property: height, transform, max-width;
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  transition-property: height, width, transform, max-width, left, right, top, bottom;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
   border-radius: 0;
   background: rgb(var(--v-theme-on-surface-variant));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
-.v-toolbar--density-default .v-toolbar__content {
-  padding-top: 16px;
-  padding-bottom: 16px;
+.v-toolbar--border {
+  border-width: thin;
+  box-shadow: none;
 }
-
-.v-toolbar--density-comfortable .v-toolbar__content {
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
-
-.v-toolbar--density-compact .v-toolbar__content {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.v-toolbar--density-prominent .v-toolbar__content {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
 .v-toolbar--absolute {
   position: absolute;
 }
@@ -52,7 +38,7 @@
   border-bottom-left-radius: 24px;
 }
 .v-toolbar--flat {
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-toolbar--floating {
   display: inline-flex;
@@ -71,6 +57,15 @@
   width: 100%;
 }
 
+.v-toolbar__content > .v-btn:first-child {
+  margin-inline-start: 10px;
+}
+.v-toolbar__content > .v-btn:last-child {
+  margin-inline-end: 10px;
+}
+.v-toolbar__content > .v-toolbar-title {
+  margin-inline-start: 16px;
+}
 .v-toolbar--density-prominent .v-toolbar__content {
   align-items: flex-start;
 }
@@ -90,20 +85,13 @@
 }
 
 .v-toolbar__prepend {
+  margin-inline-start: 10px;
   margin-inline-end: auto;
 }
-.v-toolbar__prepend > .v-btn:first-child {
-  margin-inline-start: -12px;
-}
-.v-toolbar__prepend + .v-toolbar-title {
-  padding-inline-start: 20px;
-}
 
 .v-toolbar__append {
   margin-inline-start: auto;
-}
-.v-toolbar__append > .v-btn:last-child {
-  margin-inline-end: -12px;
+  margin-inline-end: 10px;
 }
 
 .v-toolbar-title {
@@ -135,4 +123,7 @@
 .v-toolbar-items {
   display: flex;
   height: inherit;
+}
+.v-toolbar-items > .v-btn {
+  border-radius: 0;
 }

package/lib/components/VToolbar/VToolbar.mjs

@@ -3,6 +3,7 @@ import { createVNode as _createVNode } from "vue";
 import "./VToolbar.css"; // Components
 
 import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VExpandTransition } from "../transitions/index.mjs";
 import { VImg } from "../VImg/index.mjs";
 import { VToolbarTitle } from "./VToolbarTitle.mjs"; // Composables
 
@@ -12,10 +13,9 @@ import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { provideDefaults } from "../../composables/defaults.mjs";
-import { useBackgroundColor } from "../../composables/color.mjs";
-import { useForwardRef } from "../../composables/forwardRef.mjs"; // Utilities
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
 
-import { computed, toRef } from 'vue';
+import { computed, ref, toRef } from 'vue';
 import { convertToUnit, genericComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
 
 const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'];
@@ -37,7 +37,7 @@ export const makeVToolbarProps = propsFactory({
   floating: Boolean,
   height: {
     type: [Number, String],
-    default: 56
+    default: 64
   },
   image: String,
   title: String,
@@ -54,9 +54,15 @@ export const VToolbar = genericComponent()({
   props: makeVToolbarProps(),
 
   setup(props, _ref) {
+    var _slots$extension;
+
     let {
       slots
     } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
     const {
       borderClasses
     } = useBorder(props);
@@ -69,28 +75,21 @@ export const VToolbar = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
-    const {
-      backgroundColorClasses,
-      backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
-    const contentHeight = computed(() => Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
+    const isExtended = ref(!!(props.extended || (_slots$extension = slots.extension) != null && _slots$extension.call(slots)));
+    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'
-      },
-      VTextField: {
-        hideDetails: true
       }
-    }, {
-      scoped: true
     });
     useRender(() => {
-      var _slots$image, _slots$prepend, _slots$default, _slots$append, _slots$extension;
+      var _slots$extension2, _slots$image, _slots$prepend, _slots$default, _slots$append;
 
       const hasTitle = !!(props.title || slots.title);
       const hasImage = !!(slots.image || props.image);
-      const isExtended = !!(props.extended || slots.extension);
+      const extension = (_slots$extension2 = slots.extension) == null ? void 0 : _slots$extension2.call(slots);
+      isExtended.value = !!(props.extended || extension);
       return _createVNode(props.tag, {
         "class": ['v-toolbar', {
           'v-toolbar--absolute': props.absolute,
@@ -102,6 +101,7 @@ export const VToolbar = genericComponent()({
         "style": [backgroundColorStyles.value]
       }, {
         default: () => [hasImage && _createVNode("div", {
+          "key": "image",
           "class": "v-toolbar__image"
         }, [_createVNode(VDefaultsProvider, {
           "defaults": {
@@ -109,8 +109,7 @@ export const VToolbar = genericComponent()({
               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", {
@@ -121,28 +120,30 @@ export const VToolbar = genericComponent()({
         }, [slots.prepend && _createVNode("div", {
           "class": "v-toolbar__prepend"
         }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), hasTitle && _createVNode(VToolbarTitle, {
+          "key": "title",
           "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 && _createVNode("div", {
-          "class": "v-toolbar__extension",
-          "style": {
-            height: convertToUnit(props.extensionHeight)
-          }
-        }, [(_slots$extension = slots.extension) == null ? void 0 : _slots$extension.call(slots)])]
+        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), _createVNode(VExpandTransition, null, {
+          default: () => [isExtended.value && _createVNode("div", {
+            "class": "v-toolbar__extension",
+            "style": {
+              height: convertToUnit(extensionHeight.value)
+            }
+          }, [extension])]
+        })]
       });
     });
-    return useForwardRef({
-      contentHeight
-    });
+    return {
+      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 : {}));
+  return pick(props, Object.keys((VToolbar == null ? void 0 : VToolbar.props) ?? {}));
 }
 //# sourceMappingURL=VToolbar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VToolbar/VToolbar.tsx"],"names":["VDefaultsProvider","VImg","VToolbarTitle","makeBorderProps","useBorder","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","useForwardRef","computed","toRef","convertToUnit","genericComponent","pick","propsFactory","useRender","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","contentHeight","VBtn","variant","VTextField","hideDetails","scoped","hasTitle","hasImage","isExtended","extension","value","cover","src","prepend","text","append","filterToolbarProps","Object","keys"],"mappings":"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","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 { provideDefaults } from '@/composables/defaults'\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'\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 contentHeight = computed(() => (\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    ))\n\n    provideDefaults({\n      VBtn: {\n        flat: true,\n        variant: 'text',\n      },\n      VTextField: {\n        hideDetails: true,\n      },\n    }, { scoped: true })\n\n    useRender(() => {\n      const hasTitle = !!(props.title || slots.title)\n      const hasImage = !!(slots.image || props.image)\n      const isExtended = !!(props.extended || slots.extension)\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 && (\n            <div\n              class=\"v-toolbar__extension\"\n              style={{ height: convertToUnit(props.extensionHeight) }}\n            >\n              { slots.extension?.() }\n            </div>\n          ) }\n        </props.tag>\n      )\n    })\n\n    return useForwardRef({ contentHeight })\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"}
+{"version":3,"file":"VToolbar.mjs","names":["VDefaultsProvider","VExpandTransition","VImg","VToolbarTitle","makeBorderProps","useBorder","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","computed","ref","toRef","convertToUnit","genericComponent","pick","propsFactory","useRender","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","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","themeClasses","isExtended","extension","contentHeight","parseInt","value","VBtn","variant","hasTitle","hasImage","cover","src","prepend","text","append","filterToolbarProps","Object","keys"],"sources":["../../../src/components/VToolbar/VToolbar.tsx"],"sourcesContent":["// Styles\nimport './VToolbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VExpandTransition } from '@/components/transitions'\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 { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ExtractPropTypes, PropType } from 'vue'\nimport type { MakeSlots } from '@/util'\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: 64,\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: []\n    prepend: []\n    append: []\n    title: []\n    extension: []\n  }>\n}>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\n\n    const isExtended = ref(!!(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        variant: 'text',\n      },\n    })\n\n    useRender(() => {\n      const hasTitle = !!(props.title || slots.title)\n      const hasImage = !!(slots.image || props.image)\n\n      const extension = slots.extension?.()\n      isExtended.value = !!(props.extended || extension)\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 key=\"image\" class=\"v-toolbar__image\">\n              <VDefaultsProvider\n                defaults={{\n                  VImg: {\n                    cover: true,\n                    src: props.image,\n                  },\n                }}\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 key=\"title\" 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          <VExpandTransition>\n            { isExtended.value && (\n              <div\n                class=\"v-toolbar__extension\"\n                style={{ height: convertToUnit(extensionHeight.value) }}\n              >\n                { extension }\n              </div>\n            ) }\n          </VExpandTransition>\n        </props.tag>\n      )\n    })\n\n    return {\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"],"mappings":"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"}

package/lib/components/VToolbar/VToolbar.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -6,26 +5,20 @@
 .v-toolbar
   align-items: flex-start
   display: flex
+  flex: $toolbar-flex
   flex-direction: column
   justify-content: space-between
   max-width: 100%
   overflow: hidden
-  padding-inline-end: calc(#{$toolbar-padding-end} + var(--v-scrollbar-offset))
-  padding-inline-start: $toolbar-padding-start
   position: relative
-  transition-property: height, transform, max-width
   transition: $toolbar-transition
+  transition-property: height, width, transform, max-width, left, right, top, bottom
 
+  @include tools.border($toolbar-border...)
   @include tools.elevation($toolbar-elevation)
   @include tools.rounded($toolbar-border-radius)
   @include tools.theme($toolbar-theme...)
 
-  @at-root
-    @include tools.density('v-toolbar', $toolbar-density) using ($modifier)
-      .v-toolbar__content
-        padding-top: $toolbar-padding + $modifier
-        padding-bottom: $toolbar-padding + $modifier
-
   &--absolute
     position: absolute
 
@@ -61,6 +54,15 @@
   width: 100%
 
 .v-toolbar__content
+  > .v-btn:first-child
+    margin-inline-start: $toolbar-prepend-btn-margin-start
+
+  > .v-btn:last-child
+    margin-inline-end: $toolbar-append-btn-margin-end
+
+  > .v-toolbar-title
+      margin-inline-start: $toolbar-title-margin
+
   .v-toolbar--density-prominent &
     align-items: flex-start
 
@@ -74,19 +76,12 @@
   display: flex
 
 .v-toolbar__prepend
+  margin-inline-start: $toolbar-prepend-btn-margin-start
   margin-inline-end: auto
 
-  > .v-btn:first-child
-    margin-inline-start: $toolbar-prepend-btn-margin-start
-
-  + .v-toolbar-title
-    padding-inline-start: $toolbar-title-padding
-
 .v-toolbar__append
   margin-inline-start: auto
-
-  > .v-btn:last-child
-    margin-inline-end: $toolbar-append-btn-margin-end
+  margin-inline-end: $toolbar-append-btn-margin-end
 
 .v-toolbar-title
   flex: 1 1
@@ -109,3 +104,6 @@
 .v-toolbar-items
   display: flex
   height: inherit
+
+  > .v-btn
+    border-radius: 0