vuetify 3.0.0-beta.9 → 3.0.1

package/lib/components/VTimeline/VTimeline.sass

@@ -19,17 +19,14 @@
   position: relative
 
   @include horizontal(true)
-    grid-template-rows: $timeline-item-grid-template
     grid-column-gap: $timeline-item-padding
     width: 100%
 
-    .v-timeline-item:first-child
-      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
-        padding-inline-start: $timeline-item-padding
+    @include timeline-first-item()
+      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
+    @include timeline-last-item()
+      padding-inline-end: $timeline-item-padding
 
     .v-timeline-item:nth-child(2n)
       .v-timeline-item__body
@@ -45,23 +42,21 @@
       .v-timeline-item__body
         grid-row: 1
         padding-block-end: $timeline-item-padding
+        align-self: flex-end
 
       .v-timeline-item__opposite
         grid-row: 3
         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:first-child
-      .v-timeline-divider, .v-timeline-item__body, .v-timeline-item__opposite
-        padding-block-start: $timeline-item-padding
+    @include timeline-first-item()
+      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
+    @include timeline-last-item()
+      padding-block-end: $timeline-item-padding
 
     .v-timeline-item:nth-child(2n)
       .v-timeline-item__body
@@ -103,8 +98,9 @@
     flex-direction: column
     grid-column: 2
 
-$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)
+$timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+$timeline-line-start: math.div(-$timeline-item-padding, 2)
+$timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset))
 
 .v-timeline-divider__before
   background: $timeline-divider-line-background
@@ -112,20 +108,20 @@ $timeline-divider-offset: math.div(-$timeline-item-padding, 2)
 
   @include horizontal
     height: $timeline-divider-line-thickness
-    width: $timeline-divider-size
+    width: $timeline-line-size
 
     @include tools.ltr
-      left: $timeline-divider-offset
+      left: $timeline-line-start
       right: initial
 
     @include tools.rtl
-      right: $timeline-divider-offset
+      right: $timeline-line-start
       left: initial
 
   @include vertical
-    height: $timeline-divider-size
+    height: $timeline-line-size
     width: $timeline-divider-line-thickness
-    top: $timeline-divider-offset
+    top: $timeline-line-start
 
 .v-timeline-divider__after
   background: $timeline-divider-line-background
@@ -133,29 +129,29 @@ $timeline-divider-offset: math.div(-$timeline-item-padding, 2)
 
   @include horizontal
     height: $timeline-divider-line-thickness
-    width: $timeline-divider-size
+    width: $timeline-line-size
 
     @include tools.ltr
-      right: $timeline-divider-offset
+      right: $timeline-line-start
       left: initial
 
     @include tools.rtl
-      left: $timeline-divider-offset
+      left: $timeline-line-start
       right: initial
 
   @include vertical
-    height: $timeline-divider-size
+    height: $timeline-line-size
     width: $timeline-divider-line-thickness
-    bottom: $timeline-divider-offset
+    bottom: $timeline-line-start
 
 .v-timeline-item:first-child
   .v-timeline-divider__before
     @include vertical
-      height: $timeline-divider-size
+      height: $timeline-line-size
       top: 0
 
     @include horizontal
-      width: $timeline-divider-size
+      width: $timeline-line-size
 
       @include tools.ltr
         left: 0
@@ -167,34 +163,34 @@ $timeline-divider-offset: math.div(-$timeline-item-padding, 2)
 
   .v-timeline-divider__after
     @include vertical
-      height: calc(50% - var(--v-timeline-line-inset))
+      height: $timeline-line-size-first-last
 
     @include horizontal
-      width: calc(50% - var(--v-timeline-line-inset))
+      width: $timeline-line-size-first-last
 
       @include tools.ltr
-        right: math.div(-$timeline-item-padding,2)
+        right: $timeline-line-start
         left: initial
 
       @include tools.rtl
-        left: math.div(-$timeline-item-padding,2)
+        left: $timeline-line-start
         right: initial
 
 .v-timeline-item:last-child
   .v-timeline-divider__before
     @include vertical
-      height: calc(50% - var(--v-timeline-line-inset))
+      height: $timeline-line-size-first-last
 
     @include horizontal
-      width: calc(50% - var(--v-timeline-line-inset))
+      width: $timeline-line-size-first-last
 
   .v-timeline-divider__after
     @include vertical
-      height: calc(50% + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+      height: calc(var(--v-timeline-line-size-base) + #{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))
+      width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
 
       @include tools.ltr
         right: 0
@@ -233,6 +229,21 @@ $timeline-divider-offset: math.div(-$timeline-item-padding, 2)
 
 /** Modifiers **/
 
+// Justify
+.v-timeline--justify-center
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template-center
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template-center
+
+.v-timeline--justify-auto
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template-auto
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template-auto
+
 // Density
 .v-timeline--density-comfortable
   @include horizontal(true)
@@ -344,6 +355,9 @@ $timeline-divider-offset: math.div(-$timeline-item-padding, 2)
 
 // Alignment
 .v-timeline--align-center
+  --v-timeline-line-size-base: 50%
+  --v-timeline-line-size-offset: 0px
+
   @include horizontal(true)
     justify-items: center
 
@@ -357,11 +371,22 @@ $timeline-divider-offset: math.div(-$timeline-item-padding, 2)
       justify-content: center
 
 .v-timeline--align-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))
+  --v-timeline-line-size-base: 100%
+  --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
+
+  $timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
+  $timeline-line-size-after: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset))
+
+  .v-timeline-item:first-child
+    .v-timeline-divider__before
+      --v-timeline-line-size-offset: #{$timeline-item-padding}
+
+    .v-timeline-divider__after
+      --v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)}
+
+  .v-timeline-item:last-child
+    .v-timeline-divider__after
+      --v-timeline-line-size-offset: 0px
 
   @include horizontal(true)
     justify-items: flex-start
@@ -370,21 +395,10 @@ $timeline-divider-offset: math.div(-$timeline-item-padding, 2)
       justify-content: flex-start
 
       .v-timeline-divider__before
-        width: $timeline-divider-before-base
+        width: $timeline-line-size-before
 
       .v-timeline-divider__after
-        width: $timeline-divider-after-base
-
-    .v-timeline-item:first-child
-      .v-timeline-divider__before
-        width: $timeline-divider-before-first
-
-      .v-timeline-divider__after
-        width: $timeline-divider-after-first
-
-    .v-timeline-item:last-child
-      .v-timeline-divider__after
-        width: $timeline-divider-after-last
+        width: $timeline-line-size-after
 
   @include vertical(true)
     align-items: flex-start
@@ -393,18 +407,35 @@ $timeline-divider-offset: math.div(-$timeline-item-padding, 2)
       justify-content: flex-start
 
       .v-timeline-divider__before
-        height: $timeline-divider-before-base
+        height: $timeline-line-size-before
 
       .v-timeline-divider__after
-        height: $timeline-divider-after-base
+        height: $timeline-line-size-after
 
-    .v-timeline-item:first-child
-      .v-timeline-divider__before
-        height: $timeline-divider-before-first
+// Truncate start
+.v-timeline--truncate-line-start
+  .v-timeline-item:first-child
+    .v-timeline-divider__after
+      --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
 
-      .v-timeline-divider__after
-        height: $timeline-divider-after-first
+  @include vertical(true)
+    @include timeline-first-item()
+      padding-block-start: 0
 
-    .v-timeline-item:last-child
-      .v-timeline-divider__after
-        height: $timeline-divider-after-last
+  @include horizontal(true)
+    @include timeline-first-item()
+      padding-inline-start: 0
+
+// Truncate end
+.v-timeline--truncate-line-end
+  .v-timeline-item:last-child
+    .v-timeline-divider__before
+      --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
+
+  @include vertical(true)
+    @include timeline-last-item()
+      padding-block-end: 0
+
+  @include horizontal(true)
+    @include timeline-last-item()
+      padding-inline-end: 0

package/lib/components/VTimeline/VTimelineDivider.mjs

@@ -1,14 +1,12 @@
 import { createVNode as _createVNode } from "vue";
 // Components
 import { VIcon } from "../VIcon/index.mjs"; // Composables
-
 import { IconValue } from "../../composables/icons.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { provideDefaults } from "../../composables/defaults.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
-
 import { defineComponent, useRender } from "../../util/index.mjs";
 import { toRef } from 'vue';
 export const VTimelineDivider = defineComponent({
@@ -24,7 +22,6 @@ export const VTimelineDivider = defineComponent({
     ...makeSizeProps(),
     ...makeElevationProps()
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -55,8 +52,7 @@ export const VTimelineDivider = defineComponent({
       }
     });
     useRender(() => {
-      var _slots$default, _slots$default2;
-
+      var _slots$default;
       return _createVNode("div", {
         "class": ['v-timeline-divider', {
           'v-timeline-divider--fill-dot': props.fillDot
@@ -71,13 +67,12 @@ export const VTimelineDivider = defineComponent({
       }, [_createVNode("div", {
         "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", {
+      }, [((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? (props.icon ? _createVNode(VIcon, null, null) : undefined)])]), _createVNode("div", {
         "class": ['v-timeline-divider__after', lineColorClasses.value],
         "style": lineColorStyles.value
       }, null)]);
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VTimelineDivider.mjs.map

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        <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"}
+{"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;AAAA,SACSA,KAAK,8BAEd;AAAA,SACSC,SAAS;AAAA,SACTC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,aAAa,EAAEC,OAAO;AAAA,SACtBC,eAAe;AAAA,SACfC,kBAAkB,uCAE3B;AAAA,SACSC,eAAe,EAAEC,SAAS;AACnC,SAASC,KAAK,QAAQ,KAAK;AAE3B,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAAC;EAC9CI,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAE;IACLC,QAAQ,EAAEC,MAAM;IAChBC,OAAO,EAAEC,OAAO;IAChBC,OAAO,EAAED,OAAO;IAChBE,IAAI,EAAEpB,SAAS;IACfqB,SAAS,EAAEL,MAAM;IACjBM,SAAS,EAAEN,MAAM;IAEjB,GAAGb,gBAAgB,EAAE;IACrB,GAAGE,aAAa,EAAE;IAClB,GAAGJ,kBAAkB;EACvB,CAAC;EAEDsB,KAAK,CAAET,KAAK,QAAa;IAAA,IAAX;MAAEU;IAAM,CAAC;IACrB,MAAM;MAAEC,WAAW;MAAEC;IAAW,CAAC,GAAGpB,OAAO,CAACQ,KAAK,EAAE,yBAAyB,CAAC;IAC7E,MAAM;MAAEa,qBAAqB;MAAEC;IAAuB,CAAC,GAAGpB,kBAAkB,CAACG,KAAK,CAACG,KAAK,EAAE,UAAU,CAAC,CAAC;IACtG,MAAM;MAAEe;IAAe,CAAC,GAAGzB,UAAU,CAACU,KAAK,EAAE,yBAAyB,CAAC;IACvE,MAAM;MAAEgB;IAAiB,CAAC,GAAG5B,YAAY,CAACY,KAAK,CAAC;IAChD,MAAM;MACJc,sBAAsB,EAAEG,gBAAgB;MACxCJ,qBAAqB,EAAEK;IACzB,CAAC,GAAGxB,kBAAkB,CAACG,KAAK,CAACG,KAAK,EAAE,WAAW,CAAC,CAAC;IAEjDP,eAAe,CAAC;MACdR,KAAK,EAAE;QACLkC,KAAK,EAAEtB,KAAK,CAACG,KAAK,EAAE,WAAW,CAAC;QAChCM,IAAI,EAAET,KAAK,CAACG,KAAK,EAAE,MAAM,CAAC;QAC1BoB,IAAI,EAAEvB,KAAK,CAACG,KAAK,EAAE,MAAM;MAC3B;IACF,CAAC,CAAC;IAEFJ,SAAS,CAAC;MAAA;MAAA;QAAA,SAEC,CACL,oBAAoB,EACpB;UACE,8BAA8B,EAAEI,KAAK,CAACG;QACxC,CAAC;MACF;QAAA,SAGQ,CACL,4BAA4B,EAC5Bc,gBAAgB,CAACI,KAAK,CACvB;QAAA,SACOH,eAAe,CAACG;MAAK,UAG7B,CAACrB,KAAK,CAACK,OAAO;QAAA,OAER,KAAK;QAAA,SACF,CACL,yBAAyB,EACzBW,gBAAgB,CAACK,KAAK,EACtBN,cAAc,CAACM,KAAK,EACpBV,WAAW,CAACU,KAAK,CAClB;QAAA,SACOT,UAAU,CAACS;MAAK;QAAA,SAGf,CACL,+BAA+B,EAC/BP,sBAAsB,CAACO,KAAK,EAC5BN,cAAc,CAACM,KAAK,CACrB;QAAA,SACOR,qBAAqB,CAACQ;MAAK,IAEjC,mBAAAX,KAAK,CAACY,OAAO,qBAAb,oBAAAZ,KAAK,CAAY,MAAKV,KAAK,CAACM,IAAI,qCAAiBiB,SAAS,CAAC,IAGlE;QAAA,SAGQ,CACL,2BAA2B,EAC3BN,gBAAgB,CAACI,KAAK,CACvB;QAAA,SACOH,eAAe,CAACG;MAAK;IAAA,CAGlC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VTimeline/VTimelineItem.mjs

@@ -1,13 +1,11 @@
 import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Components
 import { VTimelineDivider } from "./VTimelineDivider.mjs"; // Composables
-
 import { IconValue } from "../../composables/icons.mjs";
 import { makeElevationProps } from "../../composables/elevation.mjs";
 import { makeRoundedProps } from "../../composables/rounded.mjs";
 import { makeSizeProps } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
-
 import { ref, watch } from 'vue';
 import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
@@ -31,7 +29,6 @@ export const VTimelineItem = defineComponent({
     ...makeTagProps(),
     ...makeDimensionProps()
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -42,16 +39,14 @@ export const VTimelineItem = defineComponent({
     const dotSize = ref(0);
     const dotRef = ref();
     watch(dotRef, newValue => {
-      var _newValue$$el$querySe, _newValue$$el$querySe2;
-
+      var _newValue$$el$querySe;
       if (!newValue) return;
-      dotSize.value = (_newValue$$el$querySe = (_newValue$$el$querySe2 = newValue.$el.querySelector('.v-timeline-divider__dot')) == null ? void 0 : _newValue$$el$querySe2.getBoundingClientRect().width) != null ? _newValue$$el$querySe : 0;
+      dotSize.value = ((_newValue$$el$querySe = newValue.$el.querySelector('.v-timeline-divider__dot')) == null ? void 0 : _newValue$$el$querySe.getBoundingClientRect().width) ?? 0;
     }, {
       flush: 'post'
     });
     useRender(() => {
       var _slots$default, _slots$opposite;
-
       return _createVNode("div", {
         "class": ['v-timeline-item', {
           'v-timeline-item--fill-dot': props.fillDot
@@ -81,6 +76,5 @@ export const VTimelineItem = defineComponent({
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VTimelineItem.mjs.map

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","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"}
+{"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\nexport type VTimelineItem = InstanceType<typeof VTimelineItem>\n"],"mappings":";AAAA;AAAA,SACSA,gBAAgB,kCAEzB;AAAA,SACSC,SAAS;AAAA,SACTC,kBAAkB;AAAA,SAClBC,gBAAgB;AAAA,SAChBC,aAAa;AAAA,SACbC,YAAY,qCAErB;AAEA,SAASC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACvBC,aAAa,EAAEC,eAAe,EAAEC,SAAS;AAAA,SACzCC,kBAAkB,EAAEC,YAAY;AAEzC,OAAO,MAAMC,aAAa,GAAGJ,eAAe,CAAC;EAC3CK,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAE;IACLC,OAAO,EAAEC,MAAyC;IAClDC,QAAQ,EAAED,MAAM;IAChBE,OAAO,EAAEC,OAAO;IAChBC,OAAO,EAAED,OAAO;IAChBE,YAAY,EAAE;MACZC,IAAI,EAAEH,OAAO;MACbI,OAAO,EAAEC;IACX,CAAC;IACDC,IAAI,EAAEzB,SAAS;IACf0B,SAAS,EAAEV,MAAM;IACjBW,SAAS,EAAE,CAACC,MAAM,EAAEZ,MAAM,CAAC;IAE3B,GAAGd,gBAAgB,EAAE;IACrB,GAAGD,kBAAkB,EAAE;IACvB,GAAGE,aAAa,EAAE;IAClB,GAAGC,YAAY,EAAE;IACjB,GAAGM,kBAAkB;EACvB,CAAC;EAEDmB,KAAK,CAAEf,KAAK,QAAa;IAAA,IAAX;MAAEgB;IAAM,CAAC;IACrB,MAAM;MAAEC;IAAgB,CAAC,GAAGpB,YAAY,CAACG,KAAK,CAAC;IAE/C,MAAMkB,OAAO,GAAG3B,GAAG,CAAC,CAAC,CAAC;IACtB,MAAM4B,MAAM,GAAG5B,GAAG,EAAoB;IACtCC,KAAK,CAAC2B,MAAM,EAAEC,QAAQ,IAAI;MAAA;MACxB,IAAI,CAACA,QAAQ,EAAE;MACfF,OAAO,CAACG,KAAK,GAAG,0BAAAD,QAAQ,CAACE,GAAG,CAACC,aAAa,CAAC,0BAA0B,CAAC,qBAAtD,sBAAwDC,qBAAqB,EAAE,CAACC,KAAK,KAAI,CAAC;IAC5G,CAAC,EAAE;MACDC,KAAK,EAAE;IACT,CAAC,CAAC;IAEF/B,SAAS,CAAC;MAAA;MAAA;QAAA,SAEC,CACL,iBAAiB,EACjB;UACE,2BAA2B,EAAEK,KAAK,CAACI;QACrC,CAAC,CACF;QAAA,SACM;UACL,uBAAuB,EAAEX,aAAa,CAACyB,OAAO,CAACG,KAAK,CAAC;UACrD,yBAAyB,EAAErB,KAAK,CAACa,SAAS,GAAI,yCAAwCpB,aAAa,CAACO,KAAK,CAACa,SAAS,CAAE,GAAE,GAAGpB,aAAa,CAAC,CAAC;QAC3I;MAAC;QAAA,SAGO,uBAAuB;QAAA,SACrBwB,eAAe,CAACI;MAAK,sBAE3BL,KAAK,CAACP,OAAO,qBAAb,oBAAAO,KAAK,CAAY;QAAA,OAIbG,MAAM;QAAA,WACFnB,KAAK,CAACM,OAAO;QAAA,QAChBN,KAAK,CAACW,IAAI;QAAA,aACLX,KAAK,CAACY,SAAS;QAAA,QACpBZ,KAAK,CAAC2B,IAAI;QAAA,aACL3B,KAAK,CAAC4B,SAAS;QAAA,YAChB5B,KAAK,CAACG,QAAQ;QAAA,WACfH,KAAK,CAACI,OAAO;QAAA,WACbJ,KAAK,CAAC6B;MAAO,GACd;QAAEpB,OAAO,EAAEO,KAAK,CAACL;MAAK,CAAC,GAGhCX,KAAK,CAACC,OAAO,KAAK,SAAS;QAAA,SAChB;MAA2B,IAClC,CAACD,KAAK,CAACO,YAAY,wBAAIS,KAAK,CAACc,QAAQ,qBAAd,qBAAAd,KAAK,CAAa,GAE9C;IAAA,CAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VTimeline/_mixins.sass

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

package/lib/components/VTimeline/_variables.scss

@@ -3,8 +3,8 @@
 // VTimeline
 $timeline-density-comfortable-grid-template-end: min-content min-content auto !default;
 $timeline-density-comfortable-grid-template-start: auto min-content min-content !default;
-$timeline-density-compact-grid-template-end: min-content auto !default;
-$timeline-density-compact-grid-template-start: auto min-content !default;
+$timeline-density-compact-grid-template-end: 0 min-content auto !default;
+$timeline-density-compact-grid-template-start: auto min-content 0 !default;
 $timeline-dot-border-radius: 50% !default;
 $timeline-dot-divider-background: rgb(var(--v-theme-on-surface-variant)) !default;
 $timeline-dot-size: 38px !default;
@@ -19,7 +19,8 @@ $timeline-divider-line-horizontal-width: var(--v-timeline-line-inset, 0px) !defa
 $timeline-divider-line-thickness: var(--v-timeline-line-thickness) !default;
 
 // VTimelineItem
-$timeline-item-grid-template: auto min-content auto !default;
+$timeline-item-grid-template-center: minmax(auto, 50%) min-content minmax(auto, 50%) !default;
+$timeline-item-grid-template-auto: auto min-content auto !default;
 $timeline-item-padding: 24px !default;
 
 // Lists

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

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