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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"names":["VTimelineItem","makeTagProps","makeDensityProps","useDensity","makeThemeProps","provideTheme","computed","provide","toRef","convertToUnit","defineComponent","VTimelineSymbol","VTimeline","name","props","direction","type","String","default","validator","v","includes","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","density","sideClass","value"],"mappings":"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","sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Components\nimport { VTimelineItem } from './VTimelineItem'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Helpers\nimport { computed, provide, toRef } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\nimport { VTimelineSymbol } from './shared'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'before' | 'after' | undefined\n\nexport const VTimeline = defineComponent({\n  name: 'VTimeline',\n\n  props: {\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      default: 'start',\n      validator: (v: any) => ['none', 'start', 'end', 'both'].includes(v),\n    },\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provide(VTimelineSymbol, {\n      density: toRef(props, 'density'),\n      lineColor: toRef(props, 'lineColor'),\n    })\n\n    const sideClass = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    return () => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n            'v-timeline--truncate-line-end': props.truncateLine === 'end' || props.truncateLine === 'both',\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClass.value,\n        ]}\n        style={{\n          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          '--v-timeline-line-inset': convertToUnit(props.lineInset),\n        }}\n      >\n        { (props.truncateLine === 'none' || props.truncateLine === 'end') && (\n          <VTimelineItem hideDot />\n        ) }\n\n        { slots.default?.() }\n      </props.tag>\n    )\n  },\n})\n"],"file":"VTimeline.mjs"}
+{"version":3,"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"names":["makeTagProps","makeDensityProps","useDensity","makeThemeProps","provideTheme","computed","provide","toRef","convertToUnit","defineComponent","VTimelineSymbol","VTimeline","name","props","align","type","String","default","validator","v","includes","direction","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","density","sideClass","truncateClasses","classes","value"],"mappings":"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","sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Helpers\nimport { computed, provide, toRef } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\nimport { VTimelineSymbol } from './shared'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const VTimeline = defineComponent({\n  name: 'VTimeline',\n\n  props: {\n    align: {\n      type: String,\n      default: 'center',\n      validator: (v: any) => ['center', 'start'].includes(v),\n    } as Prop<TimelineAlign>,\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      validator: (v: any) => ['start', 'end', 'both'].includes(v),\n    } as Prop<TimelineTruncateLine>,\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provide(VTimelineSymbol, {\n      density: toRef(props, 'density'),\n      lineColor: toRef(props, 'lineColor'),\n    })\n\n    const sideClass = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    return () => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          !props.lineInset && truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClass.value,\n        ]}\n        style={{\n          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          '--v-timeline-line-inset': convertToUnit(props.lineInset),\n        }}\n      >\n        { slots.default?.() }\n      </props.tag>\n    )\n  },\n})\n"],"file":"VTimeline.mjs"}

package/lib/components/VTimeline/VTimeline.sass

@@ -10,6 +10,9 @@
   .v-timeline-divider__dot
     background: $timeline-dot-divider-background
 
+  .v-timeline-divider__inner-dot
+    background: $timeline-inner-dot-divider-background
+
 // Elements
 .v-timeline
   display: grid
@@ -18,36 +21,48 @@
 
   @include horizontal(true)
     grid-template-rows: $timeline-item-grid-template
+    grid-column-gap: $timeline-item-padding
     width: 100%
 
-    .v-timeline-item__body, .v-timeline-item__opposite
-      padding-inline-start: calc((var(--v-timeline-dot-size) / 2) - 5px)
+    .v-timeline-item:first-child
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-inline-start: $timeline-item-padding
+
+    .v-timeline-item:last-child
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-inline-end: $timeline-item-padding
 
     .v-timeline-item:nth-child(2n)
       .v-timeline-item__body
         grid-row: 3
-        padding-top: $timeline-item-padding
+        padding-block-start: $timeline-item-padding
 
       .v-timeline-item__opposite
         grid-row: 1
-        padding-bottom: $timeline-item-padding
+        padding-block-end: $timeline-item-padding
+        align-self: flex-end
 
     .v-timeline-item:nth-child(2n+1)
       .v-timeline-item__body
         grid-row: 1
-        padding-bottom: $timeline-item-padding
+        padding-block-end: $timeline-item-padding
 
       .v-timeline-item__opposite
         grid-row: 3
-        padding-top: $timeline-item-padding
+        padding-block-start: $timeline-item-padding
 
   @include vertical(true)
     grid-template-columns: $timeline-item-grid-template
+    grid-row-gap: $timeline-item-padding
     height: 100%
 
-    .v-timeline-item__body, .v-timeline-item__opposite
-      // TODO: replace with css var?
-      padding-top: calc((var(--v-timeline-dot-size) - 1.5em) / 2)
+    .v-timeline-item:first-child
+      .v-timeline-divider, .v-timeline-item__body, .v-timeline-item__opposite
+        padding-block-start: $timeline-item-padding
+
+    .v-timeline-item:last-child
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-block-end: $timeline-item-padding
 
     .v-timeline-item:nth-child(2n)
       .v-timeline-item__body
@@ -72,39 +87,6 @@
 .v-timeline-item
   display: contents
 
-.v-timeline-divider__line
-  background: $timeline-divider-line-background
-  position: absolute
-
-  @include horizontal
-    height: $timeline-divider-line-thickness
-    width: calc(100% - var(--v-timeline-line-inset, 0px))
-
-  @include vertical
-    height: 100%
-    width: $timeline-divider-line-thickness
-
-.v-timeline--inset-line
-  .v-timeline-divider__line
-    @include vertical(true)
-      height: calc(100% - var(--v-timeline-dot-size) - #{$timeline-inset-divider-line})
-      bottom: calc(#{$timeline-inset-divider-line} / 2)
-
-    @include horizontal(true)
-      width: calc(100% - var(--v-timeline-dot-size) - #{$timeline-inset-divider-line})
-      inset-inline-end: calc(#{$timeline-inset-divider-line} / 2)
-
-.v-timeline:not(.v-timeline--inset-line)
-  .v-timeline-item:first-child
-    .v-timeline-divider__line
-      @include vertical(true)
-        bottom: 0
-        height: calc(100% - (var(--v-timeline-dot-size) / 2))
-
-      @include horizontal(true)
-        width: calc(100% - (var(--v-timeline-dot-size) / 2))
-        inset-inline-end: 0
-
 .v-timeline-divider
   position: relative
   display: flex
@@ -113,11 +95,43 @@
   @include horizontal
     flex-direction: row
     grid-row: 2
+    width: 100%
 
   @include vertical
+    height: 100%
     flex-direction: column
     grid-column: 2
 
+.v-timeline-divider__line
+  background: $timeline-divider-line-background
+  position: absolute
+
+  @include horizontal
+    height: $timeline-divider-line-thickness
+    width: calc(100% + #{$timeline-item-padding})
+
+    @include tools.ltr
+      left: 0
+    @include tools.rtl
+      right: 0
+
+  @include vertical
+    height: calc(100% + #{$timeline-item-padding})
+    width: $timeline-divider-line-thickness
+
+    @include tools.ltr
+      top: 0
+    @include tools.rtl
+      bottom: 0
+
+.v-timeline-item:last-child
+  .v-timeline-divider__line
+    @include vertical
+      height: 100%
+
+    @include horizontal
+      width: 100%
+
 .v-timeline-divider__dot
   z-index: 1
   flex-shrink: 0
@@ -194,36 +208,39 @@
     @include horizontal(true)
       .v-timeline-item__body
         grid-row: 3
-        padding-bottom: initial
-        padding-top: $timeline-item-padding
+        padding-block-end: initial
+        padding-block-start: $timeline-item-padding
 
       .v-timeline-item__opposite
         grid-row: 1
-        padding-bottom: $timeline-item-padding
-        padding-top: initial
+        padding-block-end: $timeline-item-padding
+        padding-block-start: initial
 
     @include vertical(true)
       .v-timeline-item__body
         grid-column: 3
         text-align: initial
         padding-inline-start: $timeline-item-padding
+        padding-inline-end: initial
 
       .v-timeline-item__opposite
         grid-column: 1
+        text-align: end
         padding-inline-end: $timeline-item-padding
+        padding-inline-start: initial
 
 .v-timeline.v-timeline--side-start
   .v-timeline-item
     @include horizontal(true)
       .v-timeline-item__body
         grid-row: 1
-        padding-bottom: $timeline-item-padding
-        padding-top: initial
+        padding-block-end: $timeline-item-padding
+        padding-block-start: initial
 
       .v-timeline-item__opposite
         grid-row: 3
-        padding-bottom: initial
-        padding-top: $timeline-item-padding
+        padding-block-end: initial
+        padding-block-start: $timeline-item-padding
 
     @include vertical(true)
       .v-timeline-item__body
@@ -233,6 +250,7 @@
 
       .v-timeline-item__opposite
         grid-column: 3
+        text-align: initial
         padding-inline-start: $timeline-item-padding
 
 // Fill dot
@@ -241,7 +259,134 @@
     height: inherit
     width: inherit
 
+// Truncate line
 .v-timeline--truncate-line-end
   .v-timeline-item:last-child
     .v-timeline-divider__line
-      display: none
+      @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))
+
+        @include tools.ltr
+          top: $inset
+        @include tools.rtl
+          bottom: $inset
+
+// Alignment
+.v-timeline--align-center
+  @include horizontal(true)
+    justify-items: center
+
+    .v-timeline-divider
+      justify-content: center
+
+  @include vertical(true)
+    align-items: center
+
+    .v-timeline-divider
+      justify-content: center
+
+.v-timeline--align-start
+  @include horizontal
+    justify-content: flex-start
+
+  @include vertical(true)
+    align-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)
+
+      @include tools.ltr
+        top: $inset
+      @include tools.rtl
+        bottom: $inset
+
+  .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-divider__line
+      @include horizontal(true)
+        width: calc(100% - 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% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
+
+        @include tools.ltr
+          top: $inset
+        @include tools.rtl
+          bottom: $inset
+
+  .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__line
+      @include horizontal(true)
+        width: calc(50% - #{$timeline-item-padding} - var(--v-timeline-line-inset) * 2)
+
+        @include tools.ltr
+          left: $inset
+        @include tools.rtl
+          right: $inset
+
+      @include vertical(true)
+        height: calc(50% - #{$timeline-item-padding} - var(--v-timeline-line-inset) * 2)
+
+        @include tools.ltr
+          top: $inset
+        @include tools.rtl
+          bottom: $inset

package/lib/components/VTimeline/VTimelineDivider.mjs

@@ -8,7 +8,8 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.mj
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs"; // Utilities
 
-import { defineComponent, inject, toRef } from 'vue';
+import { inject, toRef } from 'vue';
+import { defineComponent } from "../../util/index.mjs";
 export const VTimelineDivider = defineComponent({
   name: 'VTimelineDivider',
   props: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"names":["VIcon","VTimelineSymbol","useBackgroundColor","makeElevationProps","useElevation","makeSizeProps","useSize","makeRoundedProps","useRounded","defineComponent","inject","toRef","VTimelineDivider","name","props","hideDot","Boolean","lineColor","String","icon","iconColor","fillDot","dotColor","setup","slots","timeline","Error","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","lineColorStyles","lineColorClasses","roundedClasses","elevationClasses","value","default","size","undefined"],"mappings":";AAAA;SACSA,K;SACAC,e,wBAET;;SACSC,kB;SACAC,kB,EAAoBC,Y;SACpBC,a,EAAeC,O;SACfC,gB,EAAkBC,U,yCAE3B;;AACA,SAASC,eAAT,EAA0BC,MAA1B,EAAkCC,KAAlC,QAA+C,KAA/C;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAAC;AAC9CI,EAAAA,IAAI,EAAE,kBADwC;AAG9CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEC,OADJ;AAELC,IAAAA,SAAS,EAAEC,MAFN;AAGLC,IAAAA,IAAI,EAAED,MAHD;AAILE,IAAAA,SAAS,EAAEF,MAJN;AAKLG,IAAAA,OAAO,EAAEL,OALJ;AAMLM,IAAAA,QAAQ,EAAEJ,MANL;AAQL,OAAGX,gBAAgB,EARd;AASL,OAAGF,aAAa,EATX;AAUL,OAAGF,kBAAkB;AAVhB,GAHuC;;AAgB9CoB,EAAAA,KAAK,CAAET,KAAF,QAAoB;AAAA,QAAX;AAAEU,MAAAA;AAAF,KAAW;AACvB,UAAMC,QAAQ,GAAGf,MAAM,CAACT,eAAD,CAAvB;AAEA,QAAI,CAACwB,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;AAEf,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA8BtB,OAAO,CAACQ,KAAD,EAAQ,yBAAR,CAA3C;AACA,UAAM;AAAEe,MAAAA,qBAAF;AAAyBC,MAAAA;AAAzB,QAAoD5B,kBAAkB,CAACS,KAAK,CAACG,KAAD,EAAQ,UAAR,CAAN,CAA5E;AACA,UAAM;AAAEe,MAAAA,qBAAqB,EAAEE,eAAzB;AAA0CD,MAAAA,sBAAsB,EAAEE;AAAlE,QAAuF9B,kBAAkB,CAACuB,QAAQ,CAACR,SAAV,CAA/G;AACA,UAAM;AAAEgB,MAAAA;AAAF,QAAqBzB,UAAU,CAACM,KAAD,EAAQ,yBAAR,CAArC;AACA,UAAM;AAAEoB,MAAAA;AAAF,QAAuB9B,YAAY,CAACU,KAAD,CAAzC;AAEA,WAAO;AAAA,eAEI,CACL,oBADK,EAEL;AACE,wCAAgCA,KAAK,CAACO;AADxC,OAFK;AAFJ,QASD,CAACP,KAAK,CAACC,OAAP;AAAA,eAES,CACL,yBADK,EAELkB,cAAc,CAACE,KAFV,EAGLR,WAAW,CAACQ,KAHP,EAILD,gBAAgB,CAACC,KAJZ,CAFT;AAAA,eASUP,UAAU,CAACO;AATrB;AAAA,eAYW,CACL,+BADK,EAELF,cAAc,CAACE,KAFV,EAGLL,sBAAsB,CAACK,KAHlB,CAZX;AAAA,eAiBYN,qBAAqB,CAACM;AAjBlC,QAoBMX,KAAK,CAACY,OAAN,GAAgBZ,KAAK,CAACY,OAAN,CAAc;AAAEjB,MAAAA,IAAI,EAAEL,KAAK,CAACK,IAAd;AAAoBC,MAAAA,SAAS,EAAEN,KAAK,CAACM,SAArC;AAAgDiB,MAAAA,IAAI,EAAEvB,KAAK,CAACuB;AAA5D,KAAd,CAAhB,GACEvB,KAAK,CAACK,IAAN;AAAA,cAA2BL,KAAK,CAACK,IAAjC;AAAA,eAAgDL,KAAK,CAACM,SAAtD;AAAA,cAAyEN,KAAK,CAACuB;AAA/E,eACAC,SAtBR,IATC;AAAA,eAqCM,CACL,0BADK,EAELN,gBAAgB,CAACG,KAFZ,CArCN;AAAA,eAyCOJ,eAAe,CAACI;AAzCvB,cAAP;AA6CD;;AAxE6C,CAAD,CAAxC","sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VTimelineSymbol } from './shared'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { defineComponent, inject, toRef } from 'vue'\n\nexport const VTimelineDivider = defineComponent({\n  name: 'VTimelineDivider',\n\n  props: {\n    hideDot: Boolean,\n    lineColor: String,\n    icon: String,\n    iconColor: String,\n    fillDot: Boolean,\n    dotColor: String,\n\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeElevationProps(),\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 { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { backgroundColorStyles: lineColorStyles, backgroundColorClasses: lineColorClasses } = useBackgroundColor(timeline.lineColor)\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n\n    return () => (\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            class={[\n              'v-timeline-divider__dot',\n              roundedClasses.value,\n              sizeClasses.value,\n              elevationClasses.value,\n            ]}\n            // @ts-expect-error: null\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                roundedClasses.value,\n                backgroundColorClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              {\n                slots.default ? slots.default({ icon: props.icon, iconColor: props.iconColor, size: props.size })\n                : props.icon ? <VIcon icon={ props.icon } color={ props.iconColor } size={ props.size } />\n                : undefined\n              }\n            </div>\n          </div>\n        ) }\n        <div\n          class={[\n            'v-timeline-divider__line',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    )\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"file":"VTimelineDivider.mjs"}
+{"version":3,"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"names":["VIcon","VTimelineSymbol","useBackgroundColor","makeElevationProps","useElevation","makeSizeProps","useSize","makeRoundedProps","useRounded","inject","toRef","defineComponent","VTimelineDivider","name","props","hideDot","Boolean","lineColor","String","icon","iconColor","fillDot","dotColor","setup","slots","timeline","Error","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","lineColorStyles","lineColorClasses","roundedClasses","elevationClasses","value","default","size","undefined"],"mappings":";AAAA;SACSA,K;SACAC,e,wBAET;;SACSC,kB;SACAC,kB,EAAoBC,Y;SACpBC,a,EAAeC,O;SACfC,gB,EAAkBC,U,yCAE3B;;AACA,SAASC,MAAT,EAAiBC,KAAjB,QAA8B,KAA9B;SACSC,e;AAET,OAAO,MAAMC,gBAAgB,GAAGD,eAAe,CAAC;AAC9CE,EAAAA,IAAI,EAAE,kBADwC;AAG9CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEC,OADJ;AAELC,IAAAA,SAAS,EAAEC,MAFN;AAGLC,IAAAA,IAAI,EAAED,MAHD;AAILE,IAAAA,SAAS,EAAEF,MAJN;AAKLG,IAAAA,OAAO,EAAEL,OALJ;AAMLM,IAAAA,QAAQ,EAAEJ,MANL;AAQL,OAAGX,gBAAgB,EARd;AASL,OAAGF,aAAa,EATX;AAUL,OAAGF,kBAAkB;AAVhB,GAHuC;;AAgB9CoB,EAAAA,KAAK,CAAET,KAAF,QAAoB;AAAA,QAAX;AAAEU,MAAAA;AAAF,KAAW;AACvB,UAAMC,QAAQ,GAAGhB,MAAM,CAACR,eAAD,CAAvB;AAEA,QAAI,CAACwB,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;AAEf,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA8BtB,OAAO,CAACQ,KAAD,EAAQ,yBAAR,CAA3C;AACA,UAAM;AAAEe,MAAAA,qBAAF;AAAyBC,MAAAA;AAAzB,QAAoD5B,kBAAkB,CAACQ,KAAK,CAACI,KAAD,EAAQ,UAAR,CAAN,CAA5E;AACA,UAAM;AAAEe,MAAAA,qBAAqB,EAAEE,eAAzB;AAA0CD,MAAAA,sBAAsB,EAAEE;AAAlE,QAAuF9B,kBAAkB,CAACuB,QAAQ,CAACR,SAAV,CAA/G;AACA,UAAM;AAAEgB,MAAAA;AAAF,QAAqBzB,UAAU,CAACM,KAAD,EAAQ,yBAAR,CAArC;AACA,UAAM;AAAEoB,MAAAA;AAAF,QAAuB9B,YAAY,CAACU,KAAD,CAAzC;AAEA,WAAO;AAAA,eAEI,CACL,oBADK,EAEL;AACE,wCAAgCA,KAAK,CAACO;AADxC,OAFK;AAFJ,QASD,CAACP,KAAK,CAACC,OAAP;AAAA,eAES,CACL,yBADK,EAELkB,cAAc,CAACE,KAFV,EAGLR,WAAW,CAACQ,KAHP,EAILD,gBAAgB,CAACC,KAJZ,CAFT;AAAA,eASUP,UAAU,CAACO;AATrB;AAAA,eAYW,CACL,+BADK,EAELF,cAAc,CAACE,KAFV,EAGLL,sBAAsB,CAACK,KAHlB,CAZX;AAAA,eAiBYN,qBAAqB,CAACM;AAjBlC,QAoBMX,KAAK,CAACY,OAAN,GAAgBZ,KAAK,CAACY,OAAN,CAAc;AAAEjB,MAAAA,IAAI,EAAEL,KAAK,CAACK,IAAd;AAAoBC,MAAAA,SAAS,EAAEN,KAAK,CAACM,SAArC;AAAgDiB,MAAAA,IAAI,EAAEvB,KAAK,CAACuB;AAA5D,KAAd,CAAhB,GACEvB,KAAK,CAACK,IAAN;AAAA,cAA2BL,KAAK,CAACK,IAAjC;AAAA,eAAgDL,KAAK,CAACM,SAAtD;AAAA,cAAyEN,KAAK,CAACuB;AAA/E,eACAC,SAtBR,IATC;AAAA,eAqCM,CACL,0BADK,EAELN,gBAAgB,CAACG,KAFZ,CArCN;AAAA,eAyCOJ,eAAe,CAACI;AAzCvB,cAAP;AA6CD;;AAxE6C,CAAD,CAAxC","sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VTimelineSymbol } from './shared'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { inject, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport const VTimelineDivider = defineComponent({\n  name: 'VTimelineDivider',\n\n  props: {\n    hideDot: Boolean,\n    lineColor: String,\n    icon: String,\n    iconColor: String,\n    fillDot: Boolean,\n    dotColor: String,\n\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeElevationProps(),\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 { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { backgroundColorStyles: lineColorStyles, backgroundColorClasses: lineColorClasses } = useBackgroundColor(timeline.lineColor)\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n\n    return () => (\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            class={[\n              'v-timeline-divider__dot',\n              roundedClasses.value,\n              sizeClasses.value,\n              elevationClasses.value,\n            ]}\n            // @ts-expect-error: null\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                roundedClasses.value,\n                backgroundColorClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              {\n                slots.default ? slots.default({ icon: props.icon, iconColor: props.iconColor, size: props.size })\n                : props.icon ? <VIcon icon={ props.icon } color={ props.iconColor } size={ props.size } />\n                : undefined\n              }\n            </div>\n          </div>\n        ) }\n        <div\n          class={[\n            'v-timeline-divider__line',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    )\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"file":"VTimelineDivider.mjs"}

package/lib/components/VTimeline/_variables.scss

@@ -10,7 +10,8 @@ $timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-op
 $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-dot-divider-background: rgb(var(--v-theme-on-surface-variant)) !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;
 $timeline-item-grid-template: auto min-content auto !default;

package/lib/components/VToolbar/VToolbar.css

@@ -8,13 +8,20 @@
   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);
+  transition-property: height, transform, max-width;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
   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);
   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--border {
+  border-width: thin;
+  box-shadow: none;
+}
 .v-toolbar--density-default .v-toolbar__content {
   padding-top: 16px;
   padding-bottom: 16px;

package/lib/components/VToolbar/VToolbar.mjs

@@ -11,13 +11,13 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.mj
 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 { computed, toRef } from 'vue';
 import { convertToUnit, genericComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
 
+import { provideDefaults } from "../../composables/defaults.mjs";
 const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'];
 export const makeVToolbarProps = propsFactory({
   absolute: Boolean,
@@ -73,24 +73,20 @@ export const VToolbar = genericComponent()({
       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 = computed(() => !!(props.extended || slots.extension));
+    const contentHeight = computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
+    const extensionHeight = computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
     provideDefaults({
       VBtn: {
         flat: true,
         variant: 'text'
-      },
-      VTextField: {
-        hideDetails: true
       }
-    }, {
-      scoped: true
     });
     useRender(() => {
       var _slots$image, _slots$prepend, _slots$default, _slots$append, _slots$extension;
 
       const hasTitle = !!(props.title || slots.title);
       const hasImage = !!(slots.image || props.image);
-      const isExtended = !!(props.extended || slots.extension);
       return _createVNode(props.tag, {
         "class": ['v-toolbar', {
           'v-toolbar--absolute': props.absolute,
@@ -126,16 +122,17 @@ export const VToolbar = genericComponent()({
           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", {
+        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), isExtended.value && _createVNode("div", {
           "class": "v-toolbar__extension",
           "style": {
-            height: convertToUnit(props.extensionHeight)
+            height: convertToUnit(extensionHeight.value)
           }
         }, [(_slots$extension = slots.extension) == null ? void 0 : _slots$extension.call(slots)])]
       });
     });
     return useForwardRef({
-      contentHeight
+      contentHeight,
+      extensionHeight
     });
   }
 

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,"sources":["../../../src/components/VToolbar/VToolbar.tsx"],"names":["VDefaultsProvider","VImg","VToolbarTitle","makeBorderProps","useBorder","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useForwardRef","computed","toRef","convertToUnit","genericComponent","pick","propsFactory","useRender","provideDefaults","allowedDensities","makeVToolbarProps","absolute","Boolean","collapse","color","String","density","type","default","validator","v","includes","extended","extensionHeight","Number","flat","floating","height","image","title","tag","VToolbar","name","props","setup","slots","borderClasses","elevationClasses","roundedClasses","themeClasses","backgroundColorClasses","backgroundColorStyles","isExtended","extension","contentHeight","parseInt","value","VBtn","variant","hasTitle","hasImage","cover","src","prepend","text","append","filterToolbarProps","Object","keys"],"mappings":";AAAA;AACA,wB,CAEA;;SACSA,iB;SACAC,I;SACAC,a,+BAET;;SACSC,e,EAAiBC,S;SACjBC,kB,EAAoBC,Y;SACpBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,kB;SACAC,a,4CAET;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,a,EAAeC,gB,EAAkBC,I,EAAMC,Y,EAAcC,S,gCAE9D;;SAGSC,e;AAIT,MAAMC,gBAAgB,GAAG,CAAC,IAAD,EAAO,WAAP,EAAoB,SAApB,EAA+B,aAA/B,EAA8C,SAA9C,CAAzB;AAEA,OAAO,MAAMC,iBAAiB,GAAGJ,YAAY,CAAC;AAC5CK,EAAAA,QAAQ,EAAEC,OADkC;AAE5CC,EAAAA,QAAQ,EAAED,OAFkC;AAG5CE,EAAAA,KAAK,EAAEC,MAHqC;AAI5CC,EAAAA,OAAO,EAAE;AACPC,IAAAA,IAAI,EAAEF,MADC;AAEPG,IAAAA,OAAO,EAAE,SAFF;AAGPC,IAAAA,SAAS,EAAGC,CAAD,IAAYX,gBAAgB,CAACY,QAAjB,CAA0BD,CAA1B;AAHhB,GAJmC;AAS5CE,EAAAA,QAAQ,EAAEV,OATkC;AAU5CW,EAAAA,eAAe,EAAE;AACfN,IAAAA,IAAI,EAAE,CAACO,MAAD,EAAST,MAAT,CADS;AAEfG,IAAAA,OAAO,EAAE;AAFM,GAV2B;AAc5CO,EAAAA,IAAI,EAAEb,OAdsC;AAe5Cc,EAAAA,QAAQ,EAAEd,OAfkC;AAgB5Ce,EAAAA,MAAM,EAAE;AACNV,IAAAA,IAAI,EAAE,CAACO,MAAD,EAAST,MAAT,CADA;AAENG,IAAAA,OAAO,EAAE;AAFH,GAhBoC;AAoB5CU,EAAAA,KAAK,EAAEb,MApBqC;AAqB5Cc,EAAAA,KAAK,EAAEd,MArBqC;AAuB5C,KAAGzB,eAAe,EAvB0B;AAwB5C,KAAGE,kBAAkB,EAxBuB;AAyB5C,KAAGE,gBAAgB,EAzByB;AA0B5C,KAAGE,YAAY,CAAC;AAAEkC,IAAAA,GAAG,EAAE;AAAP,GAAD,CA1B6B;AA2B5C,KAAGjC,cAAc;AA3B2B,CAAD,EA4B1C,WA5B0C,CAAtC;AA8BP,OAAO,MAAMkC,QAAQ,GAAG3B,gBAAgB,GASnC;AACH4B,EAAAA,IAAI,EAAE,UADH;AAGHC,EAAAA,KAAK,EAAEvB,iBAAiB,EAHrB;;AAKHwB,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAoB7C,SAAS,CAAC0C,KAAD,CAAnC;AACA,UAAM;AAAEI,MAAAA;AAAF,QAAuB5C,YAAY,CAACwC,KAAD,CAAzC;AACA,UAAM;AAAEK,MAAAA;AAAF,QAAqB3C,UAAU,CAACsC,KAAD,CAArC;AACA,UAAM;AAAEM,MAAAA;AAAF,QAAmBzC,YAAY,CAACmC,KAAD,CAArC;AACA,UAAM;AAAEO,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoD1C,kBAAkB,CAACG,KAAK,CAAC+B,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAMS,UAAU,GAAGzC,QAAQ,CAAC,MAAO,CAAC,EAAEgC,KAAK,CAACX,QAAN,IAAkBa,KAAK,CAACQ,SAA1B,CAAT,CAA3B;AACA,UAAMC,aAAa,GAAG3C,QAAQ,CAAC,MAAM4C,QAAQ,CAC3CrB,MAAM,CAACS,KAAK,CAACN,MAAP,CAAN,IACCM,KAAK,CAACjB,OAAN,KAAkB,WAAlB,GAAgCQ,MAAM,CAACS,KAAK,CAACN,MAAP,CAAtC,GAAuD,CADxD,KAECM,KAAK,CAACjB,OAAN,KAAkB,aAAlB,GAAkC,CAAlC,GAAsC,CAFvC,KAGCiB,KAAK,CAACjB,OAAN,KAAkB,SAAlB,GAA8B,EAA9B,GAAmC,CAHpC,CAD2C,EAK1C,EAL0C,CAAf,CAA9B;AAMA,UAAMO,eAAe,GAAGtB,QAAQ,CAAC,MAAMyC,UAAU,CAACI,KAAX,GACnCD,QAAQ,CACRrB,MAAM,CAACS,KAAK,CAACV,eAAP,CAAN,IACCU,KAAK,CAACjB,OAAN,KAAkB,WAAlB,GAAgCQ,MAAM,CAACS,KAAK,CAACV,eAAP,CAAtC,GAAgE,CADjE,KAECU,KAAK,CAACjB,OAAN,KAAkB,aAAlB,GAAkC,CAAlC,GAAsC,CAFvC,KAGCiB,KAAK,CAACjB,OAAN,KAAkB,SAAlB,GAA8B,CAA9B,GAAkC,CAHnC,CADQ,EAKP,EALO,CAD2B,GAOnC,CAP4B,CAAhC;AAUAR,IAAAA,eAAe,CAAC;AACduC,MAAAA,IAAI,EAAE;AACJtB,QAAAA,IAAI,EAAE,IADF;AAEJuB,QAAAA,OAAO,EAAE;AAFL;AADQ,KAAD,CAAf;AAOAzC,IAAAA,SAAS,CAAC,MAAM;AAAA;;AACd,YAAM0C,QAAQ,GAAG,CAAC,EAAEhB,KAAK,CAACJ,KAAN,IAAeM,KAAK,CAACN,KAAvB,CAAlB;AACA,YAAMqB,QAAQ,GAAG,CAAC,EAAEf,KAAK,CAACP,KAAN,IAAeK,KAAK,CAACL,KAAvB,CAAlB;AAEA;AAAA,iBAEW,CACL,WADK,EAEL;AACE,iCAAuBK,KAAK,CAACtB,QAD/B;AAEE,iCAAuBsB,KAAK,CAACpB,QAF/B;AAGE,6BAAmBoB,KAAK,CAACR,IAH3B;AAIE,iCAAuBQ,KAAK,CAACP,QAJ/B;AAKE,WAAE,sBAAqBO,KAAK,CAACjB,OAAQ,EAArC,GAAyC;AAL3C,SAFK,EASLwB,sBAAsB,CAACM,KATlB,EAULV,aAAa,CAACU,KAVT,EAWLT,gBAAgB,CAACS,KAXZ,EAYLR,cAAc,CAACQ,KAZV,EAaLP,YAAY,CAACO,KAbR,CAFX;AAAA,iBAiBW,CACLL,qBAAqB,CAACK,KADjB;AAjBX;AAAA,wBAqBMI,QAAQ;AAAA,mBACG;AADH;AAAA,sBAGM;AACR9D,YAAAA,IAAI,EAAE;AACJ+D,cAAAA,KAAK,EAAE,IADH;AAEJC,cAAAA,GAAG,EAAEnB,KAAK,CAACL;AAFP;AADE,WAHN;AAAA;AAAA;AAAA,0BAWFO,KAAK,CAACP,KAAN,mBAAcO,KAAK,CAACP,KAApB,qBAAc,kBAAAO,KAAK,CAAnB,iCAXE;AAAA,YArBd;AAAA,mBAsCY,oBAtCZ;AAAA,mBAuCa;AAAER,YAAAA,MAAM,EAAExB,aAAa,CAACyC,aAAa,CAACE,KAAf;AAAvB;AAvCb,YAyCQX,KAAK,CAACkB,OAAN;AAAA,mBACW;AADX,8BAEIlB,KAAK,CAACkB,OAFV,qBAEI,oBAAAlB,KAAK,CAFT,EAzCR,EA+CQc,QAAQ;AAAA,kBACchB,KAAK,CAACJ;AADpB;AAEHyB,UAAAA,IAAI,EAAEnB,KAAK,CAACN;AAFT,UA/ChB,oBAqDQM,KAAK,CAACjB,OArDd,qBAqDQ,oBAAAiB,KAAK,CArDb,EAuDQA,KAAK,CAACoB,MAAN;AAAA,mBACW;AADX,6BAEIpB,KAAK,CAACoB,MAFV,qBAEI,mBAAApB,KAAK,CAFT,EAvDR,IA8DMO,UAAU,CAACI,KAAX;AAAA,mBAEQ,sBAFR;AAAA,mBAGS;AAAEnB,YAAAA,MAAM,EAAExB,aAAa,CAACoB,eAAe,CAACuB,KAAjB;AAAvB;AAHT,gCAKIX,KAAK,CAACQ,SALV,qBAKI,sBAAAR,KAAK,CALT,EA9DN;AAAA;AAwED,KA5EQ,CAAT;AA8EA,WAAOnC,aAAa,CAAC;AACnB4C,MAAAA,aADmB;AAEnBrB,MAAAA;AAFmB,KAAD,CAApB;AAID;;AArHE,CATmC,CAAjC;AAmIP,OAAO,SAASiC,kBAAT,CAA6BvB,KAA7B,EAA4F;AAAA;;AACjG,SAAO5B,IAAI,CAAC4B,KAAD,EAAQwB,MAAM,CAACC,IAAP,oBAAY3B,QAAZ,oBAAYA,QAAQ,CAAEE,KAAtB,8BAA+B,EAA/B,CAAR,CAAX;AACD","sourcesContent":["// Styles\nimport './VToolbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VImg } from '@/components/VImg'\nimport { VToolbarTitle } from './VToolbarTitle'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useForwardRef } from '@/composables/forwardRef'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { ExtractPropTypes, PropType } from 'vue'\nimport { provideDefaults } from '@/composables/defaults'\n\nexport type Density = typeof allowedDensities[number]\n\nconst allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const\n\nexport const makeVToolbarProps = propsFactory({\n  absolute: Boolean,\n  collapse: Boolean,\n  color: String,\n  density: {\n    type: String as PropType<Density>,\n    default: 'default',\n    validator: (v: any) => allowedDensities.includes(v),\n  },\n  extended: Boolean,\n  extensionHeight: {\n    type: [Number, String],\n    default: 48,\n  },\n  flat: Boolean,\n  floating: Boolean,\n  height: {\n    type: [Number, String],\n    default: 56,\n  },\n  image: String,\n  title: String,\n\n  ...makeBorderProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'header' }),\n  ...makeThemeProps(),\n}, 'v-toolbar')\n\nexport const VToolbar = genericComponent<new () => {\n  $slots: MakeSlots<{\n    default: []\n    image: [{ image: string }]\n    prepend: []\n    append: []\n    title: []\n    extension: []\n  }>\n}>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const isExtended = computed(() => (!!(props.extended || slots.extension)))\n    const contentHeight = computed(() => parseInt((\n      Number(props.height) +\n      (props.density === 'prominent' ? Number(props.height) : 0) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ), 10))\n    const extensionHeight = computed(() => isExtended.value\n      ? parseInt((\n        Number(props.extensionHeight) +\n        (props.density === 'prominent' ? Number(props.extensionHeight) : 0) -\n        (props.density === 'comfortable' ? 4 : 0) -\n        (props.density === 'compact' ? 8 : 0)\n      ), 10)\n      : 0\n    )\n\n    provideDefaults({\n      VBtn: {\n        flat: true,\n        variant: 'text',\n      },\n    })\n\n    useRender(() => {\n      const hasTitle = !!(props.title || slots.title)\n      const hasImage = !!(slots.image || props.image)\n\n      return (\n        <props.tag\n          class={[\n            'v-toolbar',\n            {\n              'v-toolbar--absolute': props.absolute,\n              'v-toolbar--collapse': props.collapse,\n              'v-toolbar--flat': props.flat,\n              'v-toolbar--floating': props.floating,\n              [`v-toolbar--density-${props.density}`]: true,\n            },\n            backgroundColorClasses.value,\n            borderClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n          ]}\n        >\n          { hasImage && (\n            <div class=\"v-toolbar__image\">\n              <VDefaultsProvider\n                defaults={{\n                  VImg: {\n                    cover: true,\n                    src: props.image,\n                  },\n                }}\n                scoped\n              >\n                { slots.image ? slots.image?.() : (<VImg />) }\n              </VDefaultsProvider>\n            </div>\n          ) }\n\n          <div\n            class=\"v-toolbar__content\"\n            style={{ height: convertToUnit(contentHeight.value) }}\n          >\n            { slots.prepend && (\n              <div class=\"v-toolbar__prepend\">\n                { slots.prepend?.() }\n              </div>\n            ) }\n\n            { hasTitle && (\n              <VToolbarTitle text={ props.title }>\n                {{ text: slots.title }}\n              </VToolbarTitle>\n            ) }\n\n            { slots.default?.() }\n\n            { slots.append && (\n              <div class=\"v-toolbar__append\">\n                { slots.append?.() }\n              </div>\n            ) }\n          </div>\n\n          { isExtended.value && (\n            <div\n              class=\"v-toolbar__extension\"\n              style={{ height: convertToUnit(extensionHeight.value) }}\n            >\n              { slots.extension?.() }\n            </div>\n          ) }\n        </props.tag>\n      )\n    })\n\n    return useForwardRef({\n      contentHeight,\n      extensionHeight,\n    })\n  },\n})\n\nexport type VToolbar = InstanceType<typeof VToolbar>\n\nexport function filterToolbarProps (props: ExtractPropTypes<ReturnType<typeof makeVToolbarProps>>) {\n  return pick(props, Object.keys(VToolbar?.props ?? {}) as any)\n}\n"],"file":"VToolbar.mjs"}

package/lib/components/VToolbar/VToolbar.sass

@@ -13,9 +13,10 @@
   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, transform, max-width
 
+  @include tools.border($toolbar-border...)
   @include tools.elevation($toolbar-elevation)
   @include tools.rounded($toolbar-border-radius)
   @include tools.theme($toolbar-theme...)

package/lib/components/VToolbar/VToolbarItems.mjs

@@ -18,7 +18,6 @@ export const VToolbarItems = defineComponent({
     provideDefaults({
       VBtn: {
         color: toRef(props, 'color'),
-        textColor: toRef(props, 'textColor'),
         variant: toRef(props, 'variant')
       }
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"names":["makeVariantProps","provideDefaults","defineComponent","toRef","VToolbarItems","name","props","variant","setup","slots","VBtn","color","textColor","default"],"mappings":"AAAA;SACSA,gB;SACAC,e,0CAET;;SACSC,e;AACT,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,aAAa,GAAGF,eAAe,CAAC;AAC3CG,EAAAA,IAAI,EAAE,eADqC;AAG3CC,EAAAA,KAAK,EAAE,EACL,GAAGN,gBAAgB,CAAC;AAAEO,MAAAA,OAAO,EAAE;AAAX,KAAD;AADd,GAHoC;;AAO3CC,EAAAA,KAAK,CAAEF,KAAF,QAAoB;AAAA,QAAX;AAAEG,MAAAA;AAAF,KAAW;AACvBR,IAAAA,eAAe,CAAC;AACdS,MAAAA,IAAI,EAAE;AACJC,QAAAA,KAAK,EAAER,KAAK,CAACG,KAAD,EAAQ,OAAR,CADR;AAEJM,QAAAA,SAAS,EAAET,KAAK,CAACG,KAAD,EAAQ,WAAR,CAFZ;AAGJC,QAAAA,OAAO,EAAEJ,KAAK,CAACG,KAAD,EAAQ,SAAR;AAHV;AADQ,KAAD,CAAf;AAQA,WAAO;AAAA;;AAAA,+BAAMG,KAAK,CAACI,OAAZ,qBAAM,oBAAAJ,KAAK,CAAX;AAAA,KAAP;AACD;;AAjB0C,CAAD,CAArC","sourcesContent":["// Composables\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { defineComponent } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VToolbarItems = defineComponent({\n  name: 'VToolbarItems',\n\n  props: {\n    ...makeVariantProps({ variant: 'contained-text' }),\n  },\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        textColor: toRef(props, 'textColor'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    return () => slots.default?.()\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"file":"VToolbarItems.mjs"}
+{"version":3,"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"names":["makeVariantProps","provideDefaults","defineComponent","toRef","VToolbarItems","name","props","variant","setup","slots","VBtn","color","default"],"mappings":"AAAA;SACSA,gB;SACAC,e,0CAET;;SACSC,e;AACT,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,aAAa,GAAGF,eAAe,CAAC;AAC3CG,EAAAA,IAAI,EAAE,eADqC;AAG3CC,EAAAA,KAAK,EAAE,EACL,GAAGN,gBAAgB,CAAC;AAAEO,MAAAA,OAAO,EAAE;AAAX,KAAD;AADd,GAHoC;;AAO3CC,EAAAA,KAAK,CAAEF,KAAF,QAAoB;AAAA,QAAX;AAAEG,MAAAA;AAAF,KAAW;AACvBR,IAAAA,eAAe,CAAC;AACdS,MAAAA,IAAI,EAAE;AACJC,QAAAA,KAAK,EAAER,KAAK,CAACG,KAAD,EAAQ,OAAR,CADR;AAEJC,QAAAA,OAAO,EAAEJ,KAAK,CAACG,KAAD,EAAQ,SAAR;AAFV;AADQ,KAAD,CAAf;AAOA,WAAO;AAAA;;AAAA,+BAAMG,KAAK,CAACG,OAAZ,qBAAM,oBAAAH,KAAK,CAAX;AAAA,KAAP;AACD;;AAhB0C,CAAD,CAArC","sourcesContent":["// Composables\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { defineComponent } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VToolbarItems = defineComponent({\n  name: 'VToolbarItems',\n\n  props: {\n    ...makeVariantProps({ variant: 'contained-text' }),\n  },\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    return () => slots.default?.()\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"file":"VToolbarItems.mjs"}

package/lib/components/VToolbar/_variables.scss

@@ -1,10 +1,15 @@
 @use "sass:map";
+@use '../../styles/settings';
 @use "../../styles/settings/variables";
 @use "../../styles/tools/functions";
 
 $toolbar-background: rgb(var(--v-theme-on-surface-variant)) !default;
 $toolbar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
-$toolbar-border-radius: 0 !default;
+$toolbar-border-color: settings.$border-color-root !default;
+$toolbar-border-radius: map.get(settings.$rounded, 0) !default;
+$toolbar-border-style: settings.$border-style-root !default;
+$toolbar-border-thin-width: thin !default;
+$toolbar-border-width: 0 !default;
 $toolbar-btn-icon-size: 48px !default;
 $toolbar-collapsed-border-radius: 24px !default;
 $toolbar-collapsed-max-width: 112px !default;
@@ -34,6 +39,13 @@ $toolbar-prominent-title-letter-spacing: 0 !default;
 $toolbar-prominent-title-line-height: 2.25rem !default;
 $toolbar-prominent-title-text-transform: none !default;
 
+$toolbar-border: (
+  $toolbar-border-color,
+  $toolbar-border-style,
+  $toolbar-border-width,
+  $toolbar-border-thin-width
+) !default;
+
 $toolbar-title-typography: (
   $toolbar-title-font-size,
   $toolbar-title-font-weight,