@vuetify/nightly 3.0.0-beta.6 → 3.0.0-beta.9

package/lib/components/VTimeline/VTimeline.sass

@@ -1,4 +1,5 @@
 @use 'sass:map'
+@use 'sass:math'
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
@@ -65,7 +66,7 @@
     .v-timeline-item:nth-child(2n)
       .v-timeline-item__body
         grid-column: 1
-        text-align: end
+        justify-self: flex-end
         padding-inline-end: $timeline-item-padding
 
       .v-timeline-item__opposite
@@ -79,7 +80,7 @@
 
       .v-timeline-item__opposite
         grid-column: 1
-        text-align: end
+        justify-self: flex-end
         padding-inline-end: $timeline-item-padding
 
 // VTimelineItem
@@ -102,35 +103,106 @@
     flex-direction: column
     grid-column: 2
 
-.v-timeline-divider__line
+$timeline-divider-size: calc(50% + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+$timeline-divider-offset: math.div(-$timeline-item-padding, 2)
+
+.v-timeline-divider__before
   background: $timeline-divider-line-background
   position: absolute
 
   @include horizontal
     height: $timeline-divider-line-thickness
-    width: calc(100% + #{$timeline-item-padding})
+    width: $timeline-divider-size
 
     @include tools.ltr
-      left: 0
+      left: $timeline-divider-offset
+      right: initial
+
     @include tools.rtl
-      right: 0
+      right: $timeline-divider-offset
+      left: initial
 
   @include vertical
-    height: calc(100% + #{$timeline-item-padding})
+    height: $timeline-divider-size
     width: $timeline-divider-line-thickness
+    top: $timeline-divider-offset
+
+.v-timeline-divider__after
+  background: $timeline-divider-line-background
+  position: absolute
+
+  @include horizontal
+    height: $timeline-divider-line-thickness
+    width: $timeline-divider-size
 
     @include tools.ltr
-      top: 0
+      right: $timeline-divider-offset
+      left: initial
+
     @include tools.rtl
-      bottom: 0
+      left: $timeline-divider-offset
+      right: initial
+
+  @include vertical
+    height: $timeline-divider-size
+    width: $timeline-divider-line-thickness
+    bottom: $timeline-divider-offset
+
+.v-timeline-item:first-child
+  .v-timeline-divider__before
+    @include vertical
+      height: $timeline-divider-size
+      top: 0
+
+    @include horizontal
+      width: $timeline-divider-size
+
+      @include tools.ltr
+        left: 0
+        right: initial
+
+      @include tools.rtl
+        right: 0
+        left: initial
+
+  .v-timeline-divider__after
+    @include vertical
+      height: calc(50% - var(--v-timeline-line-inset))
+
+    @include horizontal
+      width: calc(50% - var(--v-timeline-line-inset))
+
+      @include tools.ltr
+        right: math.div(-$timeline-item-padding,2)
+        left: initial
+
+      @include tools.rtl
+        left: math.div(-$timeline-item-padding,2)
+        right: initial
 
 .v-timeline-item:last-child
-  .v-timeline-divider__line
+  .v-timeline-divider__before
     @include vertical
-      height: 100%
+      height: calc(50% - var(--v-timeline-line-inset))
 
     @include horizontal
-      width: 100%
+      width: calc(50% - var(--v-timeline-line-inset))
+
+  .v-timeline-divider__after
+    @include vertical
+      height: calc(50% + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+      bottom: 0
+
+    @include horizontal
+      width: calc(50% + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+
+      @include tools.ltr
+        right: 0
+        left: initial
+
+      @include tools.rtl
+        left: 0
+        right: initial
 
 .v-timeline-divider__dot
   z-index: 1
@@ -219,13 +291,13 @@
     @include vertical(true)
       .v-timeline-item__body
         grid-column: 3
-        text-align: initial
         padding-inline-start: $timeline-item-padding
         padding-inline-end: initial
+        justify-self: flex-start
 
       .v-timeline-item__opposite
         grid-column: 1
-        text-align: end
+        justify-self: flex-end
         padding-inline-end: $timeline-item-padding
         padding-inline-start: initial
 
@@ -245,13 +317,13 @@
     @include vertical(true)
       .v-timeline-item__body
         grid-column: 1
-        text-align: end
+        justify-self: flex-end
         padding-inline-end: $timeline-item-padding
 
       .v-timeline-item__opposite
         grid-column: 3
-        text-align: initial
         padding-inline-start: $timeline-item-padding
+        justify-self: flex-start
 
 // Fill dot
 .v-timeline-divider--fill-dot
@@ -260,51 +332,15 @@
     width: inherit
 
 // Truncate line
-.v-timeline--truncate-line-end
-  .v-timeline-item:last-child
-    .v-timeline-divider__line
-      @include horizontal(true)
-        width: 50%
-
-      @include vertical(true)
-        height: $timeline-item-padding
-
-.v-timeline--truncate-line-end.v-timeline--align-start
-  .v-timeline-item:last-child
-    .v-timeline-divider__line
-      @include horizontal(true)
-        width: $timeline-item-padding
-
 .v-timeline--truncate-line-start
   .v-timeline-item:first-child
-    @include horizontal(true)
-      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
-        padding-inline-start: 0
-
-    @include vertical(true)
-      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
-        padding-block-start: 0
-
-.v-timeline--truncate-line-start.v-timeline--align-center
-  .v-timeline-item:first-child
-    .v-timeline-divider__line
-      $inset: calc(50% + #{$timeline-item-padding} - var(--v-timeline-dot-size))
-
-      @include horizontal(true)
-        width: calc(50% + var(--v-timeline-dot-size))
-
-        @include tools.ltr
-          left: $inset
-        @include tools.rtl
-          right: $inset
-
-      @include vertical(true)
-        height: calc(50% + var(--v-timeline-dot-size))
+    .v-timeline-divider__before
+      display: none
 
-        @include tools.ltr
-          top: $inset
-        @include tools.rtl
-          bottom: $inset
+.v-timeline--truncate-line-end
+  .v-timeline-item:last-child
+    .v-timeline-divider__after
+      display: none
 
 // Alignment
 .v-timeline--align-center
@@ -321,72 +357,54 @@
       justify-content: center
 
 .v-timeline--align-start
-  @include horizontal
-    justify-content: flex-start
+  $timeline-divider-before-base: calc(#{math.div($timeline-item-padding, 2)} + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
+  $timeline-divider-after-base: calc(100% - var(--v-timeline-dot-size) / 2 + #{$timeline-item-padding} / 2 - var(--v-timeline-line-inset))
+  $timeline-divider-before-first: calc($timeline-item-padding + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
+  $timeline-divider-after-first: calc(100% - #{math.div($timeline-item-padding, 2)} - var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
+  $timeline-divider-after-last: calc(100% - var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
 
-  @include vertical(true)
-    align-items: flex-start
+  @include horizontal(true)
+    justify-items: flex-start
 
     .v-timeline-divider
       justify-content: flex-start
 
-// Inset line
-.v-timeline--inset-line
-  .v-timeline-divider__line
-    $inset: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2)
-
-    @include horizontal(true)
-      width: calc(100% + #{$timeline-item-padding} - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
-
-      @include tools.ltr
-        left: $inset
-      @include tools.rtl
-        right: $inset
-
-    @include vertical(true)
-      height: calc(100% + #{$timeline-item-padding} - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
+      .v-timeline-divider__before
+        width: $timeline-divider-before-base
 
-      @include tools.ltr
-        top: $inset
-      @include tools.rtl
-        bottom: $inset
+      .v-timeline-divider__after
+        width: $timeline-divider-after-base
 
-  .v-timeline-item:first-child
-    $inset: calc(50% + var(--v-timeline-dot-size) / 2 + #{$timeline-item-padding} / 2 + var(--v-timeline-line-inset))
+    .v-timeline-item:first-child
+      .v-timeline-divider__before
+        width: $timeline-divider-before-first
 
-    .v-timeline-divider__line
-      @include horizontal(true)
-        width: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
+      .v-timeline-divider__after
+        width: $timeline-divider-after-first
 
-        @include tools.ltr
-          left: $inset
-        @include tools.rtl
-          right: $inset
+    .v-timeline-item:last-child
+      .v-timeline-divider__after
+        width: $timeline-divider-after-last
 
-      @include vertical(true)
-        height: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
+  @include vertical(true)
+    align-items: flex-start
 
-        @include tools.ltr
-          top: $inset
-        @include tools.rtl
-          bottom: $inset
+    .v-timeline-divider
+      justify-content: flex-start
 
-  .v-timeline-item:last-child
-    $inset: calc(50% + var(--v-timeline-line-inset) - #{$timeline-item-padding} / 2 + var(--v-timeline-dot-size) / 2)
+      .v-timeline-divider__before
+        height: $timeline-divider-before-base
 
-    .v-timeline-divider__line
-      @include horizontal(true)
-        width: calc(50% - #{$timeline-item-padding} - var(--v-timeline-line-inset) * 2)
+      .v-timeline-divider__after
+        height: $timeline-divider-after-base
 
-        @include tools.ltr
-          left: $inset
-        @include tools.rtl
-          right: $inset
+    .v-timeline-item:first-child
+      .v-timeline-divider__before
+        height: $timeline-divider-before-first
 
-      @include vertical(true)
-        height: calc(50% - #{$timeline-item-padding} - var(--v-timeline-line-inset) * 2)
+      .v-timeline-divider__after
+        height: $timeline-divider-after-first
 
-        @include tools.ltr
-          top: $inset
-        @include tools.rtl
-          bottom: $inset
+    .v-timeline-item:last-child
+      .v-timeline-divider__after
+        height: $timeline-divider-after-last

package/lib/components/VTimeline/VTimelineDivider.mjs

@@ -61,7 +61,10 @@ export const VTimelineDivider = defineComponent({
         "class": ['v-timeline-divider', {
           'v-timeline-divider--fill-dot': props.fillDot
         }]
-      }, [!props.hideDot && _createVNode("div", {
+      }, [_createVNode("div", {
+        "class": ['v-timeline-divider__before', lineColorClasses.value],
+        "style": lineColorStyles.value
+      }, null), !props.hideDot && _createVNode("div", {
         "key": "dot",
         "class": ['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value],
         "style": sizeStyles.value
@@ -69,7 +72,7 @@ export const VTimelineDivider = defineComponent({
         "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
         "style": backgroundColorStyles.value
       }, [(_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : props.icon ? _createVNode(VIcon, null, null) : undefined])]), _createVNode("div", {
-        "class": ['v-timeline-divider__line', lineColorClasses.value],
+        "class": ['v-timeline-divider__after', lineColorClasses.value],
         "style": lineColorStyles.value
       }, null)]);
     });

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

@@ -1 +1 @@
-{"version":3,"file":"VTimelineDivider.mjs","names":["VIcon","IconValue","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeSizeProps","useSize","provideDefaults","useBackgroundColor","defineComponent","useRender","toRef","VTimelineDivider","name","props","dotColor","String","fillDot","Boolean","hideDot","icon","iconColor","lineColor","setup","slots","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","roundedClasses","elevationClasses","lineColorClasses","lineColorStyles","color","size","value","default","undefined"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VTimelineDivider = defineComponent({\n  name: 'VTimelineDivider',\n\n  props: {\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    icon: IconValue,\n    iconColor: String,\n    lineColor: String,\n\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeElevationProps(),\n  },\n\n  setup (props, { slots }) {\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n    const {\n      backgroundColorClasses: lineColorClasses,\n      backgroundColorStyles: lineColorStyles,\n    } = useBackgroundColor(toRef(props, 'lineColor'))\n\n    provideDefaults({\n      VIcon: {\n        color: toRef(props, 'iconColor'),\n        icon: toRef(props, 'icon'),\n        size: toRef(props, 'size'),\n      },\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n        ]}\n      >\n        { !props.hideDot && (\n          <div\n            key=\"dot\"\n            class={[\n              'v-timeline-divider__dot',\n              elevationClasses.value,\n              roundedClasses.value,\n              sizeClasses.value,\n            ]}\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                backgroundColorClasses.value,\n                roundedClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              { slots.default?.() ?? (props.icon ? (<VIcon />) : undefined) }\n            </div>\n          </div>\n        ) }\n\n        <div\n          class={[\n            'v-timeline-divider__line',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"mappings":";AAAA;SACSA,K,8BAET;;SACSC,S;SACAC,kB,EAAoBC,Y;SACpBC,gB,EAAkBC,U;SAClBC,a,EAAeC,O;SACfC,e;SACAC,kB,uCAET;;SACSC,e,EAAiBC,S;AAC1B,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAAC;EAC9CI,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,QAAQ,EAAEC,MADL;IAELC,OAAO,EAAEC,OAFJ;IAGLC,OAAO,EAAED,OAHJ;IAILE,IAAI,EAAEpB,SAJD;IAKLqB,SAAS,EAAEL,MALN;IAMLM,SAAS,EAAEN,MANN;IAQL,GAAGb,gBAAgB,EARd;IASL,GAAGE,aAAa,EATX;IAUL,GAAGJ,kBAAkB;EAVhB,CAHuC;;EAgB9CsB,KAAK,CAAET,KAAF,QAAoB;IAAA,IAAX;MAAEU;IAAF,CAAW;IACvB,MAAM;MAAEC,WAAF;MAAeC;IAAf,IAA8BpB,OAAO,CAACQ,KAAD,EAAQ,yBAAR,CAA3C;IACA,MAAM;MAAEa,qBAAF;MAAyBC;IAAzB,IAAoDpB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,UAAR,CAAN,CAA5E;IACA,MAAM;MAAEe;IAAF,IAAqBzB,UAAU,CAACU,KAAD,EAAQ,yBAAR,CAArC;IACA,MAAM;MAAEgB;IAAF,IAAuB5B,YAAY,CAACY,KAAD,CAAzC;IACA,MAAM;MACJc,sBAAsB,EAAEG,gBADpB;MAEJJ,qBAAqB,EAAEK;IAFnB,IAGFxB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,WAAR,CAAN,CAHtB;IAKAP,eAAe,CAAC;MACdR,KAAK,EAAE;QACLkC,KAAK,EAAEtB,KAAK,CAACG,KAAD,EAAQ,WAAR,CADP;QAELM,IAAI,EAAET,KAAK,CAACG,KAAD,EAAQ,MAAR,CAFN;QAGLoB,IAAI,EAAEvB,KAAK,CAACG,KAAD,EAAQ,MAAR;MAHN;IADO,CAAD,CAAf;IAQAJ,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,oBADK,EAEL;UACE,gCAAgCI,KAAK,CAACG;QADxC,CAFK;MAFD,IASJ,CAACH,KAAK,CAACK,OAAP;QAAA,OAEM,KAFN;QAAA,SAGS,CACL,yBADK,EAELW,gBAAgB,CAACK,KAFZ,EAGLN,cAAc,CAACM,KAHV,EAILV,WAAW,CAACU,KAJP,CAHT;QAAA,SASUT,UAAU,CAACS;MATrB;QAAA,SAYW,CACL,+BADK,EAELP,sBAAsB,CAACO,KAFlB,EAGLN,cAAc,CAACM,KAHV,CAZX;QAAA,SAiBYR,qBAAqB,CAACQ;MAjBlC,yCAmBMX,KAAK,CAACY,OAnBZ,qBAmBM,qBAAAZ,KAAK,CAnBX,6BAmB4BV,KAAK,CAACM,IAAN,qCAA2BiB,SAnBvD,IATI;QAAA,SAkCG,CACL,0BADK,EAELN,gBAAgB,CAACI,KAFZ,CAlCH;QAAA,SAsCIH,eAAe,CAACG;MAtCpB;IAAA,CAAD,CAAT;IA2CA,OAAO,EAAP;EACD;;AA9E6C,CAAD,CAAxC"}
+{"version":3,"file":"VTimelineDivider.mjs","names":["VIcon","IconValue","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeSizeProps","useSize","provideDefaults","useBackgroundColor","defineComponent","useRender","toRef","VTimelineDivider","name","props","dotColor","String","fillDot","Boolean","hideDot","icon","iconColor","lineColor","setup","slots","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","roundedClasses","elevationClasses","lineColorClasses","lineColorStyles","color","size","value","default","undefined"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VTimelineDivider = defineComponent({\n  name: 'VTimelineDivider',\n\n  props: {\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    icon: IconValue,\n    iconColor: String,\n    lineColor: String,\n\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeElevationProps(),\n  },\n\n  setup (props, { slots }) {\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n    const {\n      backgroundColorClasses: lineColorClasses,\n      backgroundColorStyles: lineColorStyles,\n    } = useBackgroundColor(toRef(props, 'lineColor'))\n\n    provideDefaults({\n      VIcon: {\n        color: toRef(props, 'iconColor'),\n        icon: toRef(props, 'icon'),\n        size: toRef(props, 'size'),\n      },\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n        ]}\n      >\n        <div\n          class={[\n            'v-timeline-divider__before',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n\n        { !props.hideDot && (\n          <div\n            key=\"dot\"\n            class={[\n              'v-timeline-divider__dot',\n              elevationClasses.value,\n              roundedClasses.value,\n              sizeClasses.value,\n            ]}\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                backgroundColorClasses.value,\n                roundedClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              { slots.default?.() ?? (props.icon ? (<VIcon />) : undefined) }\n            </div>\n          </div>\n        ) }\n\n        <div\n          class={[\n            'v-timeline-divider__after',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"mappings":";AAAA;SACSA,K,8BAET;;SACSC,S;SACAC,kB,EAAoBC,Y;SACpBC,gB,EAAkBC,U;SAClBC,a,EAAeC,O;SACfC,e;SACAC,kB,uCAET;;SACSC,e,EAAiBC,S;AAC1B,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAAC;EAC9CI,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,QAAQ,EAAEC,MADL;IAELC,OAAO,EAAEC,OAFJ;IAGLC,OAAO,EAAED,OAHJ;IAILE,IAAI,EAAEpB,SAJD;IAKLqB,SAAS,EAAEL,MALN;IAMLM,SAAS,EAAEN,MANN;IAQL,GAAGb,gBAAgB,EARd;IASL,GAAGE,aAAa,EATX;IAUL,GAAGJ,kBAAkB;EAVhB,CAHuC;;EAgB9CsB,KAAK,CAAET,KAAF,QAAoB;IAAA,IAAX;MAAEU;IAAF,CAAW;IACvB,MAAM;MAAEC,WAAF;MAAeC;IAAf,IAA8BpB,OAAO,CAACQ,KAAD,EAAQ,yBAAR,CAA3C;IACA,MAAM;MAAEa,qBAAF;MAAyBC;IAAzB,IAAoDpB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,UAAR,CAAN,CAA5E;IACA,MAAM;MAAEe;IAAF,IAAqBzB,UAAU,CAACU,KAAD,EAAQ,yBAAR,CAArC;IACA,MAAM;MAAEgB;IAAF,IAAuB5B,YAAY,CAACY,KAAD,CAAzC;IACA,MAAM;MACJc,sBAAsB,EAAEG,gBADpB;MAEJJ,qBAAqB,EAAEK;IAFnB,IAGFxB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,WAAR,CAAN,CAHtB;IAKAP,eAAe,CAAC;MACdR,KAAK,EAAE;QACLkC,KAAK,EAAEtB,KAAK,CAACG,KAAD,EAAQ,WAAR,CADP;QAELM,IAAI,EAAET,KAAK,CAACG,KAAD,EAAQ,MAAR,CAFN;QAGLoB,IAAI,EAAEvB,KAAK,CAACG,KAAD,EAAQ,MAAR;MAHN;IADO,CAAD,CAAf;IAQAJ,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,oBADK,EAEL;UACE,gCAAgCI,KAAK,CAACG;QADxC,CAFK;MAFD;QAAA,SAUG,CACL,4BADK,EAELc,gBAAgB,CAACI,KAFZ,CAVH;QAAA,SAcIH,eAAe,CAACG;MAdpB,UAiBJ,CAACrB,KAAK,CAACK,OAAP;QAAA,OAEM,KAFN;QAAA,SAGS,CACL,yBADK,EAELW,gBAAgB,CAACK,KAFZ,EAGLN,cAAc,CAACM,KAHV,EAILV,WAAW,CAACU,KAJP,CAHT;QAAA,SASUT,UAAU,CAACS;MATrB;QAAA,SAYW,CACL,+BADK,EAELP,sBAAsB,CAACO,KAFlB,EAGLN,cAAc,CAACM,KAHV,CAZX;QAAA,SAiBYR,qBAAqB,CAACQ;MAjBlC,yCAmBMX,KAAK,CAACY,OAnBZ,qBAmBM,qBAAAZ,KAAK,CAnBX,6BAmB4BV,KAAK,CAACM,IAAN,qCAA2BiB,SAnBvD,IAjBI;QAAA,SA0CG,CACL,2BADK,EAELN,gBAAgB,CAACI,KAFZ,CA1CH;QAAA,SA8CIH,eAAe,CAACG;MA9CpB;IAAA,CAAD,CAAT;IAmDA,OAAO,EAAP;EACD;;AAtF6C,CAAD,CAAxC"}

package/lib/components/VTimeline/VTimelineItem.mjs

@@ -24,6 +24,7 @@ export const VTimelineItem = defineComponent({
     },
     icon: IconValue,
     iconColor: String,
+    lineInset: [Number, String],
     ...makeRoundedProps(),
     ...makeElevationProps(),
     ...makeSizeProps(),
@@ -56,7 +57,8 @@ export const VTimelineItem = defineComponent({
           'v-timeline-item--fill-dot': props.fillDot
         }],
         "style": {
-          '--v-timeline-dot-size': convertToUnit(dotSize.value)
+          '--v-timeline-dot-size': convertToUnit(dotSize.value),
+          '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
         }
       }, [_createVNode("div", {
         "class": "v-timeline-item__body",

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

@@ -1 +1 @@
-{"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","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\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        }}\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;IAYL,GAAGd,gBAAgB,EAZd;IAaL,GAAGD,kBAAkB,EAbhB;IAcL,GAAGE,aAAa,EAdX;IAeL,GAAGC,YAAY,EAfV;IAgBL,GAAGM,kBAAkB;EAhBhB,CAHoC;;EAsB3CiB,KAAK,CAAEb,KAAF,QAAoB;IAAA,IAAX;MAAEc;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAsBlB,YAAY,CAACG,KAAD,CAAxC;IAEA,MAAMgB,OAAO,GAAGzB,GAAG,CAAC,CAAD,CAAnB;IACA,MAAM0B,MAAM,GAAG1B,GAAG,EAAlB;IACAC,KAAK,CAACyB,MAAD,EAASC,QAAQ,IAAI;MAAA;;MACxB,IAAI,CAACA,QAAL,EAAe;MACfF,OAAO,CAACG,KAAR,sDAAgBD,QAAQ,CAACE,GAAT,CAAaC,aAAb,CAA2B,0BAA3B,CAAhB,qBAAgB,uBAAwDC,qBAAxD,GAAgFC,KAAhG,oCAAyG,CAAzG;IACD,CAHI,EAGF;MACDC,KAAK,EAAE;IADN,CAHE,CAAL;IAOA7B,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,iBADK,EAEL;UACE,6BAA6BK,KAAK,CAACI;QADrC,CAFK,CAFD;QAAA,SAQC;UACL,yBAAyBX,aAAa,CAACuB,OAAO,CAACG,KAAT;QADjC;MARD;QAAA,SAaE,uBAbF;QAAA,SAcIJ,eAAe,CAACI;MAdpB,sBAgBFL,KAAK,CAACL,OAhBJ,qBAgBF,oBAAAK,KAAK,CAhBH;QAAA,OAoBEG,MApBF;QAAA,WAqBMjB,KAAK,CAACM,OArBZ;QAAA,QAsBGN,KAAK,CAACW,IAtBT;QAAA,aAuBQX,KAAK,CAACY,SAvBd;QAAA,QAwBGZ,KAAK,CAACyB,IAxBT;QAAA,aAyBQzB,KAAK,CAAC0B,SAzBd;QAAA,YA0BO1B,KAAK,CAACG,QA1Bb;QAAA,WA2BMH,KAAK,CAACI,OA3BZ;QAAA,WA4BMJ,KAAK,CAAC2B;MA5BZ,GA6BK;QAAElB,OAAO,EAAEK,KAAK,CAACH;MAAjB,CA7BL,GAgCJX,KAAK,CAACC,OAAN,KAAkB,SAAlB;QAAA,SACW;MADX,IAEI,CAACD,KAAK,CAACO,YAAP,wBAAuBO,KAAK,CAACc,QAA7B,qBAAuB,qBAAAd,KAAK,CAA5B,CAFJ,EAhCI;IAAA,CAAD,CAAT;IAwCA,OAAO,EAAP;EACD;;AA3E0C,CAAD,CAArC"}
+{"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,sDAAgBD,QAAQ,CAACE,GAAT,CAAaC,aAAb,CAA2B,0BAA3B,CAAhB,qBAAgB,uBAAwDC,qBAAxD,GAAgFC,KAAhG,oCAAyG,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/VToolbar/VToolbar.css

@@ -6,11 +6,10 @@
   justify-content: space-between;
   max-width: 100%;
   overflow: hidden;
-  padding-inline-end: calc(16px + var(--v-scrollbar-offset));
-  padding-inline-start: 16px;
+  padding-inline-end: var(--v-scrollbar-offset);
   position: relative;
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transition-property: height, transform, max-width;
+  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;
@@ -23,26 +22,6 @@
   border-width: thin;
   box-shadow: none;
 }
-.v-toolbar--density-default .v-toolbar__content {
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
-.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;
 }
@@ -80,13 +59,13 @@
 }
 
 .v-toolbar__content > .v-btn:first-child {
-  margin-inline-start: -6px;
-}
-.v-toolbar__content > .v-btn:first-child + .v-toolbar-title {
-  padding-inline-start: 20px;
+  margin-inline-start: 10px;
 }
 .v-toolbar__content > .v-btn:last-child {
-  margin-inline-end: -6px;
+  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;
@@ -107,16 +86,13 @@
 }
 
 .v-toolbar__prepend {
-  margin-inline-start: -6px;
+  margin-inline-start: 10px;
   margin-inline-end: auto;
 }
-.v-toolbar__prepend + .v-toolbar-title {
-  padding-inline-start: 20px;
-}
 
 .v-toolbar__append {
   margin-inline-start: auto;
-  margin-inline-end: -6px;
+  margin-inline-end: 10px;
 }
 
 .v-toolbar-title {

package/lib/components/VToolbar/VToolbar.mjs

@@ -13,8 +13,7 @@ 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, ref, toRef } from 'vue';
 import { convertToUnit, genericComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
@@ -137,10 +136,10 @@ export const VToolbar = genericComponent()({
         })]
       });
     });
-    return useForwardRef({
+    return {
       contentHeight,
       extensionHeight
-    });
+    };
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"file":"VToolbar.mjs","names":["VDefaultsProvider","VExpandTransition","VImg","VToolbarTitle","makeBorderProps","useBorder","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","useForwardRef","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'\nimport { useForwardRef } from '@/composables/forwardRef'\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 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"],"mappings":"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"}
+{"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

@@ -10,23 +10,16 @@
   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
+  padding-inline-end: var(--v-scrollbar-offset)
   position: relative
   transition: $toolbar-transition
-  transition-property: height, transform, max-width
+  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
 
@@ -65,12 +58,12 @@
   > .v-btn:first-child
     margin-inline-start: $toolbar-prepend-btn-margin-start
 
-    + .v-toolbar-title
-      padding-inline-start: $toolbar-title-padding
-
   > .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
 
@@ -87,9 +80,6 @@
   margin-inline-start: $toolbar-prepend-btn-margin-start
   margin-inline-end: auto
 
-  + .v-toolbar-title
-    padding-inline-start: $toolbar-title-padding
-
 .v-toolbar__append
   margin-inline-start: auto
   margin-inline-end: $toolbar-append-btn-margin-end