@vuetify/nightly 3.7.6-dev.2025-01-15 → 3.7.6-dev.2025-01-17

package/lib/components/VTimeline/VTimeline.css

@@ -14,21 +14,21 @@
   grid-column-gap: 24px;
   width: 100%;
 }
-.v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body {
+.v-timeline--horizontal.v-timeline .v-timeline--side-end > .v-timeline-item .v-timeline-item__body, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-start) > .v-timeline-item--side-end .v-timeline-item__body, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start) .v-timeline-item__body {
   grid-row: 3;
   padding-block-start: 24px;
 }
-.v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite {
+.v-timeline--horizontal.v-timeline .v-timeline--side-end > .v-timeline-item .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-start) > .v-timeline-item--side-end .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start) .v-timeline-item__opposite {
   grid-row: 1;
   padding-block-end: 24px;
   align-self: flex-end;
 }
-.v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__body {
+.v-timeline--horizontal.v-timeline .v-timeline--side-start > .v-timeline-item .v-timeline-item__body, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-end) > .v-timeline-item--side-start .v-timeline-item__body, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end) .v-timeline-item__body {
   grid-row: 1;
   padding-block-end: 24px;
   align-self: flex-end;
 }
-.v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite {
+.v-timeline--horizontal.v-timeline .v-timeline--side-start > .v-timeline-item .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-end) > .v-timeline-item--side-start .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end) .v-timeline-item__opposite {
   grid-row: 3;
   padding-block-start: 24px;
 }
@@ -43,19 +43,19 @@
 .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-divider, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__opposite {
   padding-block-end: 24px;
 }
-.v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body {
+.v-timeline--vertical.v-timeline .v-timeline--side-start > .v-timeline-item .v-timeline-item__body, .v-timeline--vertical.v-timeline:not(.v-timeline--side-end) > .v-timeline-item--side-start .v-timeline-item__body, .v-timeline--vertical.v-timeline:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end) .v-timeline-item__body {
   grid-column: 1;
   padding-inline-end: 24px;
 }
-.v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite {
+.v-timeline--vertical.v-timeline .v-timeline--side-start > .v-timeline-item .v-timeline-item__opposite, .v-timeline--vertical.v-timeline:not(.v-timeline--side-end) > .v-timeline-item--side-start .v-timeline-item__opposite, .v-timeline--vertical.v-timeline:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end) .v-timeline-item__opposite {
   grid-column: 3;
   padding-inline-start: 24px;
 }
-.v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__body {
+.v-timeline--vertical.v-timeline .v-timeline--side-end > .v-timeline-item .v-timeline-item__body, .v-timeline--vertical.v-timeline:not(.v-timeline--side-start) > .v-timeline-item--side-end .v-timeline-item__body, .v-timeline--vertical.v-timeline:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start) .v-timeline-item__body {
   grid-column: 3;
   padding-inline-start: 24px;
 }
-.v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite {
+.v-timeline--vertical.v-timeline .v-timeline--side-end > .v-timeline-item .v-timeline-item__opposite, .v-timeline--vertical.v-timeline:not(.v-timeline--side-start) > .v-timeline-item--side-end .v-timeline-item__opposite, .v-timeline--vertical.v-timeline:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start) .v-timeline-item__opposite {
   grid-column: 1;
   justify-self: flex-end;
   padding-inline-end: 24px;

package/lib/components/VTimeline/VTimeline.sass

@@ -23,7 +23,9 @@
       grid-column-gap: $timeline-item-padding
       width: 100%
 
-      .v-timeline-item:nth-child(2n)
+      .v-timeline--side-end > .v-timeline-item,
+      &:not(.v-timeline--side-start) > .v-timeline-item--side-end,
+      &:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
         .v-timeline-item__body
           grid-row: 3
           padding-block-start: $timeline-item-padding
@@ -33,7 +35,9 @@
           padding-block-end: $timeline-item-padding
           align-self: flex-end
 
-      .v-timeline-item:nth-child(2n+1)
+      .v-timeline--side-start > .v-timeline-item,
+      &:not(.v-timeline--side-end) > .v-timeline-item--side-start,
+      &:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
         .v-timeline-item__body
           grid-row: 1
           padding-block-end: $timeline-item-padding
@@ -53,7 +57,9 @@
       @include timeline-last-item()
         padding-block-end: $timeline-item-padding
 
-      .v-timeline-item:nth-child(2n)
+      .v-timeline--side-start > .v-timeline-item,
+      &:not(.v-timeline--side-end) > .v-timeline-item--side-start,
+      &:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
         .v-timeline-item__body
           grid-column: 1
           padding-inline-end: $timeline-item-padding
@@ -62,7 +68,9 @@
           grid-column: 3
           padding-inline-start: $timeline-item-padding
 
-      .v-timeline-item:nth-child(2n+1)
+      .v-timeline--side-end > .v-timeline-item,
+      &:not(.v-timeline--side-start) > .v-timeline-item--side-end,
+      &:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
         .v-timeline-item__body
           grid-column: 3
           padding-inline-start: $timeline-item-padding

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

@@ -1,5 +1,6 @@
 import { IconValue } from "../../composables/icons";
-import type { PropType } from 'vue';
+import type { Prop, PropType } from 'vue';
+export type TimelineItemSide = 'start' | 'end' | undefined;
 export type VTimelineItemSlots = {
     default: never;
     icon: never;
@@ -27,6 +28,7 @@ export declare const makeVTimelineItemProps: <Defaults extends {
     icon?: unknown;
     iconColor?: unknown;
     lineInset?: unknown;
+    side?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     tag: unknown extends Defaults["tag"] ? {
         type: PropType<string | import("../../util").JSXComponent>;
@@ -148,6 +150,10 @@ export declare const makeVTimelineItemProps: <Defaults extends {
         type: PropType<unknown extends Defaults["lineInset"] ? string | number : string | number | Defaults["lineInset"]>;
         default: unknown extends Defaults["lineInset"] ? string | number : NonNullable<string | number> | Defaults["lineInset"];
     };
+    side: unknown extends Defaults["side"] ? Prop<TimelineItemSide> : {
+        type: PropType<unknown extends Defaults["side"] ? TimelineItemSide : TimelineItemSide | Defaults["side"]>;
+        default: unknown extends Defaults["side"] ? TimelineItemSide : Defaults["side"] | NonNullable<TimelineItemSide>;
+    };
 };
 export declare const VTimelineItem: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
@@ -167,6 +173,7 @@ export declare const VTimelineItem: {
         class?: any;
         icon?: IconValue | undefined;
         elevation?: string | number | undefined;
+        side?: TimelineItemSide;
         rounded?: string | number | boolean | undefined;
         density?: "default" | "compact" | undefined;
         dotColor?: string | undefined;
@@ -225,6 +232,7 @@ export declare const VTimelineItem: {
         class?: any;
         icon?: IconValue | undefined;
         elevation?: string | number | undefined;
+        side?: TimelineItemSide;
         rounded?: string | number | boolean | undefined;
         density?: "default" | "compact" | undefined;
         dotColor?: string | undefined;
@@ -276,6 +284,7 @@ export declare const VTimelineItem: {
     class?: any;
     icon?: IconValue | undefined;
     elevation?: string | number | undefined;
+    side?: TimelineItemSide;
     rounded?: string | number | boolean | undefined;
     density?: "default" | "compact" | undefined;
     dotColor?: string | undefined;
@@ -350,6 +359,7 @@ export declare const VTimelineItem: {
     icon: PropType<IconValue>;
     iconColor: StringConstructor;
     lineInset: (StringConstructor | NumberConstructor)[];
+    side: Prop<TimelineItemSide>;
 }, import("vue").ExtractPropTypes<{
     tag: {
         type: PropType<string | import("../../util").JSXComponent>;
@@ -390,5 +400,6 @@ export declare const VTimelineItem: {
     icon: PropType<IconValue>;
     iconColor: StringConstructor;
     lineInset: (StringConstructor | NumberConstructor)[];
+    side: Prop<TimelineItemSide>;
 }>>;
 export type VTimelineItem = InstanceType<typeof VTimelineItem>;

package/lib/components/VTimeline/VTimelineItem.js

@@ -23,6 +23,10 @@ export const makeVTimelineItemProps = propsFactory({
   icon: IconValue,
   iconColor: String,
   lineInset: [Number, String],
+  side: {
+    type: String,
+    validator: v => v == null || ['start', 'end'].includes(v)
+  },
   ...makeComponentProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
@@ -50,7 +54,9 @@ export const VTimelineItem = genericComponent()({
     });
     useRender(() => _createVNode("div", {
       "class": ['v-timeline-item', {
-        'v-timeline-item--fill-dot': props.fillDot
+        'v-timeline-item--fill-dot': props.fillDot,
+        'v-timeline-item--side-start': props.side === 'start',
+        'v-timeline-item--side-end': props.side === 'end'
       }, props.class],
       "style": [{
         '--v-timeline-dot-size': convertToUnit(dotSize.value),

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

@@ -1 +1 @@
-{"version":3,"file":"VTimelineItem.js","names":["VTimelineDivider","makeComponentProps","makeDimensionProps","useDimension","makeElevationProps","IconValue","makeRoundedProps","makeSizeProps","makeTagProps","ref","shallowRef","watch","convertToUnit","genericComponent","propsFactory","useRender","makeVTimelineItemProps","density","String","dotColor","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","lineInset","Number","VTimelineItem","name","props","setup","_ref","slots","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","_createVNode","class","style","size","elevation","rounded","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { ref, shallowRef, watch } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VTimelineItemSlots = {\n  default: never\n  icon: never\n  opposite: never\n}\n\nexport const makeVTimelineItemProps = propsFactory({\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  ...makeComponentProps(),\n  ...makeDimensionProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n}, 'VTimelineItem')\n\nexport const VTimelineItem = genericComponent<VTimelineItemSlots>()({\n  name: 'VTimelineItem',\n\n  props: makeVTimelineItemProps(),\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n\n    const dotSize = shallowRef(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          props.class,\n        ]}\n        style={[\n          {\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          props.style,\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,iCAEzB;AAAA,SACSC,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,kBAAkB;AAAA,SAClBC,SAAS;AAAA,SACTC,gBAAgB;AAAA,SAChBC,aAAa;AAAA,SACbC,YAAY,oCAErB;AACA,SAASC,GAAG,EAAEC,UAAU,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACnCC,aAAa,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAEjE;AAGA;AAOA,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjDG,OAAO,EAAEC,MAAyC;EAClDC,QAAQ,EAAED,MAAM;EAChBE,OAAO,EAAEC,OAAO;EAChBC,OAAO,EAAED,OAAO;EAChBE,YAAY,EAAE;IACZC,IAAI,EAAEH,OAAO;IACbI,OAAO,EAAEC;EACX,CAAC;EACDC,IAAI,EAAEtB,SAAS;EACfuB,SAAS,EAAEV,MAAM;EACjBW,SAAS,EAAE,CAACC,MAAM,EAAEZ,MAAM,CAAC;EAE3B,GAAGjB,kBAAkB,CAAC,CAAC;EACvB,GAAGC,kBAAkB,CAAC,CAAC;EACvB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGC,aAAa,CAAC,CAAC;EAClB,GAAGC,YAAY,CAAC;AAClB,CAAC,EAAE,eAAe,CAAC;AAEnB,OAAO,MAAMuB,aAAa,GAAGlB,gBAAgB,CAAqB,CAAC,CAAC;EAClEmB,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEjB,sBAAsB,CAAC,CAAC;EAE/BkB,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAgB,CAAC,GAAGlC,YAAY,CAAC8B,KAAK,CAAC;IAE/C,MAAMK,OAAO,GAAG5B,UAAU,CAAC,CAAC,CAAC;IAC7B,MAAM6B,MAAM,GAAG9B,GAAG,CAAmB,CAAC;IACtCE,KAAK,CAAC4B,MAAM,EAAEC,QAAQ,IAAI;MACxB,IAAI,CAACA,QAAQ,EAAE;MACfF,OAAO,CAACG,KAAK,GAAGD,QAAQ,CAACE,GAAG,CAACC,aAAa,CAAC,0BAA0B,CAAC,EAAEC,qBAAqB,CAAC,CAAC,CAACC,KAAK,IAAI,CAAC;IAC5G,CAAC,EAAE;MACDC,KAAK,EAAE;IACT,CAAC,CAAC;IAEF/B,SAAS,CAAC,MAAAgC,YAAA;MAAA,SAEC,CACL,iBAAiB,EACjB;QACE,2BAA2B,EAAEd,KAAK,CAACb;MACrC,CAAC,EACDa,KAAK,CAACe,KAAK,CACZ;MAAA,SACM,CACL;QACE,uBAAuB,EAAEpC,aAAa,CAAC0B,OAAO,CAACG,KAAK,CAAC;QACrD,yBAAyB,EAAER,KAAK,CAACJ,SAAS,GAAG,yCAAyCjB,aAAa,CAACqB,KAAK,CAACJ,SAAS,CAAC,GAAG,GAAGjB,aAAa,CAAC,CAAC;MAC3I,CAAC,EACDqB,KAAK,CAACgB,KAAK;IACZ,IAAAF,YAAA;MAAA;MAAA,SAISV,eAAe,CAACI;IAAK,IAE3BL,KAAK,CAACX,OAAO,GAAG,CAAC,IAAAsB,YAAA,CAAA/C,gBAAA;MAAA,OAIbuC,MAAM;MAAA,WACFN,KAAK,CAACX,OAAO;MAAA,QAChBW,KAAK,CAACN,IAAI;MAAA,aACLM,KAAK,CAACL,SAAS;MAAA,QACpBK,KAAK,CAACiB,IAAI;MAAA,aACLjB,KAAK,CAACkB,SAAS;MAAA,YAChBlB,KAAK,CAACd,QAAQ;MAAA,WACfc,KAAK,CAACb,OAAO;MAAA,WACba,KAAK,CAACmB;IAAO,GACd;MAAE3B,OAAO,EAAEW,KAAK,CAACT;IAAK,CAAC,GAGhCM,KAAK,CAAChB,OAAO,KAAK,SAAS,IAAA8B,YAAA;MAAA;IAAA,IAEvB,CAACd,KAAK,CAACV,YAAY,IAAIa,KAAK,CAACiB,QAAQ,GAAG,CAAC,EAE9C,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VTimelineItem.js","names":["VTimelineDivider","makeComponentProps","makeDimensionProps","useDimension","makeElevationProps","IconValue","makeRoundedProps","makeSizeProps","makeTagProps","ref","shallowRef","watch","convertToUnit","genericComponent","propsFactory","useRender","makeVTimelineItemProps","density","String","dotColor","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","lineInset","Number","side","validator","v","includes","VTimelineItem","name","props","setup","_ref","slots","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","_createVNode","class","style","size","elevation","rounded","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { ref, shallowRef, watch } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Prop, PropType } from 'vue'\n\n// Types\nexport type TimelineItemSide = 'start' | 'end' | undefined\nexport type VTimelineItemSlots = {\n  default: never\n  icon: never\n  opposite: never\n}\n\nexport const makeVTimelineItemProps = propsFactory({\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  side: {\n    type: String,\n    validator: (v: any) => v == null || ['start', 'end'].includes(v),\n  } as Prop<TimelineItemSide>,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n}, 'VTimelineItem')\n\nexport const VTimelineItem = genericComponent<VTimelineItemSlots>()({\n  name: 'VTimelineItem',\n\n  props: makeVTimelineItemProps(),\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n\n    const dotSize = shallowRef(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            'v-timeline-item--side-start': props.side === 'start',\n            'v-timeline-item--side-end': props.side === 'end',\n          },\n          props.class,\n        ]}\n        style={[\n          {\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          props.style,\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":"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","ignoreList":[]}

package/lib/entry-bundler.js

@@ -16,7 +16,7 @@ export const createVuetify = function () {
     ...options
   });
 };
-export const version = "3.7.6-dev.2025-01-15";
+export const version = "3.7.6-dev.2025-01-17";
 createVuetify.version = version;
 export { blueprints, components, directives };
 export * from "./composables/index.js";

package/lib/framework.d.ts

@@ -489,39 +489,40 @@ declare module 'vue' {
     $children?: VNodeChild
   }
   export interface GlobalComponents {
+    VApp: typeof import('vuetify/components')['VApp']
+    VAvatar: typeof import('vuetify/components')['VAvatar']
     VAppBar: typeof import('vuetify/components')['VAppBar']
     VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
     VAppBarTitle: typeof import('vuetify/components')['VAppBarTitle']
-    VAvatar: typeof import('vuetify/components')['VAvatar']
     VAlert: typeof import('vuetify/components')['VAlert']
     VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
-    VApp: typeof import('vuetify/components')['VApp']
-    VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
-    VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
-    VBadge: typeof import('vuetify/components')['VBadge']
     VBanner: typeof import('vuetify/components')['VBanner']
     VBannerActions: typeof import('vuetify/components')['VBannerActions']
     VBannerText: typeof import('vuetify/components')['VBannerText']
-    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
+    VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
+    VBadge: typeof import('vuetify/components')['VBadge']
+    VBtn: typeof import('vuetify/components')['VBtn']
+    VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
     VBottomSheet: typeof import('vuetify/components')['VBottomSheet']
+    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
+    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
+    VCheckbox: typeof import('vuetify/components')['VCheckbox']
+    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
+    VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
+    VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
+    VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
     VCarousel: typeof import('vuetify/components')['VCarousel']
     VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
-    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
     VCardItem: typeof import('vuetify/components')['VCardItem']
     VCardSubtitle: typeof import('vuetify/components')['VCardSubtitle']
     VCardText: typeof import('vuetify/components')['VCardText']
     VCardTitle: typeof import('vuetify/components')['VCardTitle']
-    VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
-    VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
-    VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
     VChipGroup: typeof import('vuetify/components')['VChipGroup']
-    VChip: typeof import('vuetify/components')['VChip']
-    VBtn: typeof import('vuetify/components')['VBtn']
     VColorPicker: typeof import('vuetify/components')['VColorPicker']
-    VCheckbox: typeof import('vuetify/components')['VCheckbox']
-    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
+    VChip: typeof import('vuetify/components')['VChip']
+    VCombobox: typeof import('vuetify/components')['VCombobox']
     VCode: typeof import('vuetify/components')['VCode']
     VDatePicker: typeof import('vuetify/components')['VDatePicker']
     VDatePickerControls: typeof import('vuetify/components')['VDatePickerControls']
@@ -530,8 +531,7 @@ declare module 'vue' {
     VDatePickerMonths: typeof import('vuetify/components')['VDatePickerMonths']
     VDatePickerYears: typeof import('vuetify/components')['VDatePickerYears']
     VCounter: typeof import('vuetify/components')['VCounter']
-    VCombobox: typeof import('vuetify/components')['VCombobox']
-    VDivider: typeof import('vuetify/components')['VDivider']
+    VDialog: typeof import('vuetify/components')['VDialog']
     VDataTable: typeof import('vuetify/components')['VDataTable']
     VDataTableHeaders: typeof import('vuetify/components')['VDataTableHeaders']
     VDataTableFooter: typeof import('vuetify/components')['VDataTableFooter']
@@ -539,30 +539,31 @@ declare module 'vue' {
     VDataTableRow: typeof import('vuetify/components')['VDataTableRow']
     VDataTableVirtual: typeof import('vuetify/components')['VDataTableVirtual']
     VDataTableServer: typeof import('vuetify/components')['VDataTableServer']
+    VDivider: typeof import('vuetify/components')['VDivider']
     VEmptyState: typeof import('vuetify/components')['VEmptyState']
-    VDialog: typeof import('vuetify/components')['VDialog']
     VField: typeof import('vuetify/components')['VField']
     VFieldLabel: typeof import('vuetify/components')['VFieldLabel']
-    VIcon: typeof import('vuetify/components')['VIcon']
-    VComponentIcon: typeof import('vuetify/components')['VComponentIcon']
-    VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
-    VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
-    VClassIcon: typeof import('vuetify/components')['VClassIcon']
-    VFooter: typeof import('vuetify/components')['VFooter']
     VFab: typeof import('vuetify/components')['VFab']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']
     VExpansionPanelTitle: typeof import('vuetify/components')['VExpansionPanelTitle']
-    VInput: typeof import('vuetify/components')['VInput']
     VFileInput: typeof import('vuetify/components')['VFileInput']
+    VFooter: typeof import('vuetify/components')['VFooter']
+    VIcon: typeof import('vuetify/components')['VIcon']
+    VComponentIcon: typeof import('vuetify/components')['VComponentIcon']
+    VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
+    VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
+    VClassIcon: typeof import('vuetify/components')['VClassIcon']
+    VInput: typeof import('vuetify/components')['VInput']
+    VImg: typeof import('vuetify/components')['VImg']
+    VInfiniteScroll: typeof import('vuetify/components')['VInfiniteScroll']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
-    VImg: typeof import('vuetify/components')['VImg']
-    VLabel: typeof import('vuetify/components')['VLabel']
     VKbd: typeof import('vuetify/components')['VKbd']
+    VLabel: typeof import('vuetify/components')['VLabel']
+    VMenu: typeof import('vuetify/components')['VMenu']
     VMain: typeof import('vuetify/components')['VMain']
-    VInfiniteScroll: typeof import('vuetify/components')['VInfiniteScroll']
     VList: typeof import('vuetify/components')['VList']
     VListGroup: typeof import('vuetify/components')['VListGroup']
     VListImg: typeof import('vuetify/components')['VListImg']
@@ -572,52 +573,51 @@ declare module 'vue' {
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
     VListSubheader: typeof import('vuetify/components')['VListSubheader']
-    VMenu: typeof import('vuetify/components')['VMenu']
-    VOverlay: typeof import('vuetify/components')['VOverlay']
-    VMessages: typeof import('vuetify/components')['VMessages']
     VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
-    VPagination: typeof import('vuetify/components')['VPagination']
+    VMessages: typeof import('vuetify/components')['VMessages']
     VOtpInput: typeof import('vuetify/components')['VOtpInput']
-    VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
-    VSelect: typeof import('vuetify/components')['VSelect']
+    VOverlay: typeof import('vuetify/components')['VOverlay']
+    VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
     VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
+    VPagination: typeof import('vuetify/components')['VPagination']
+    VSelect: typeof import('vuetify/components')['VSelect']
     VRating: typeof import('vuetify/components')['VRating']
     VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
+    VSlider: typeof import('vuetify/components')['VSlider']
     VSheet: typeof import('vuetify/components')['VSheet']
-    VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSkeletonLoader: typeof import('vuetify/components')['VSkeletonLoader']
-    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
-    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
-    VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
-    VSlider: typeof import('vuetify/components')['VSlider']
     VStepper: typeof import('vuetify/components')['VStepper']
     VStepperActions: typeof import('vuetify/components')['VStepperActions']
     VStepperHeader: typeof import('vuetify/components')['VStepperHeader']
     VStepperItem: typeof import('vuetify/components')['VStepperItem']
     VStepperWindow: typeof import('vuetify/components')['VStepperWindow']
     VStepperWindowItem: typeof import('vuetify/components')['VStepperWindowItem']
+    VSnackbar: typeof import('vuetify/components')['VSnackbar']
+    VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
+    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
+    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
     VSwitch: typeof import('vuetify/components')['VSwitch']
     VSystemBar: typeof import('vuetify/components')['VSystemBar']
     VTable: typeof import('vuetify/components')['VTable']
-    VTextField: typeof import('vuetify/components')['VTextField']
     VTab: typeof import('vuetify/components')['VTab']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTabsWindow: typeof import('vuetify/components')['VTabsWindow']
     VTabsWindowItem: typeof import('vuetify/components')['VTabsWindowItem']
+    VTextarea: typeof import('vuetify/components')['VTextarea']
+    VTextField: typeof import('vuetify/components')['VTextField']
+    VTimeline: typeof import('vuetify/components')['VTimeline']
+    VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
+    VTooltip: typeof import('vuetify/components')['VTooltip']
     VToolbar: typeof import('vuetify/components')['VToolbar']
     VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
     VToolbarItems: typeof import('vuetify/components')['VToolbarItems']
     VWindow: typeof import('vuetify/components')['VWindow']
     VWindowItem: typeof import('vuetify/components')['VWindowItem']
-    VTextarea: typeof import('vuetify/components')['VTextarea']
-    VTooltip: typeof import('vuetify/components')['VTooltip']
-    VTimeline: typeof import('vuetify/components')['VTimeline']
-    VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
     VConfirmEdit: typeof import('vuetify/components')['VConfirmEdit']
     VDataIterator: typeof import('vuetify/components')['VDataIterator']
-    VForm: typeof import('vuetify/components')['VForm']
     VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
+    VForm: typeof import('vuetify/components')['VForm']
     VHover: typeof import('vuetify/components')['VHover']
     VContainer: typeof import('vuetify/components')['VContainer']
     VCol: typeof import('vuetify/components')['VCol']
@@ -629,11 +629,11 @@ declare module 'vue' {
     VLocaleProvider: typeof import('vuetify/components')['VLocaleProvider']
     VNoSsr: typeof import('vuetify/components')['VNoSsr']
     VParallax: typeof import('vuetify/components')['VParallax']
-    VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
     VRadio: typeof import('vuetify/components')['VRadio']
+    VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
     VResponsive: typeof import('vuetify/components')['VResponsive']
-    VSpeedDial: typeof import('vuetify/components')['VSpeedDial']
     VSparkline: typeof import('vuetify/components')['VSparkline']
+    VSpeedDial: typeof import('vuetify/components')['VSpeedDial']
     VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
     VValidation: typeof import('vuetify/components')['VValidation']
     VVirtualScroll: typeof import('vuetify/components')['VVirtualScroll']
@@ -659,20 +659,20 @@ declare module 'vue' {
     VCalendarInterval: typeof import('vuetify/labs/components')['VCalendarInterval']
     VCalendarIntervalEvent: typeof import('vuetify/labs/components')['VCalendarIntervalEvent']
     VCalendarMonthDay: typeof import('vuetify/labs/components')['VCalendarMonthDay']
+    VFileUpload: typeof import('vuetify/labs/components')['VFileUpload']
+    VFileUploadItem: typeof import('vuetify/labs/components')['VFileUploadItem']
     VNumberInput: typeof import('vuetify/labs/components')['VNumberInput']
-    VStepperVertical: typeof import('vuetify/labs/components')['VStepperVertical']
-    VStepperVerticalItem: typeof import('vuetify/labs/components')['VStepperVerticalItem']
-    VStepperVerticalActions: typeof import('vuetify/labs/components')['VStepperVerticalActions']
     VPicker: typeof import('vuetify/labs/components')['VPicker']
     VPickerTitle: typeof import('vuetify/labs/components')['VPickerTitle']
-    VFileUpload: typeof import('vuetify/labs/components')['VFileUpload']
-    VFileUploadItem: typeof import('vuetify/labs/components')['VFileUploadItem']
     VTimePicker: typeof import('vuetify/labs/components')['VTimePicker']
     VTimePickerClock: typeof import('vuetify/labs/components')['VTimePickerClock']
     VTimePickerControls: typeof import('vuetify/labs/components')['VTimePickerControls']
     VTreeview: typeof import('vuetify/labs/components')['VTreeview']
     VTreeviewItem: typeof import('vuetify/labs/components')['VTreeviewItem']
     VTreeviewGroup: typeof import('vuetify/labs/components')['VTreeviewGroup']
+    VStepperVertical: typeof import('vuetify/labs/components')['VStepperVertical']
+    VStepperVerticalItem: typeof import('vuetify/labs/components')['VStepperVerticalItem']
+    VStepperVerticalActions: typeof import('vuetify/labs/components')['VStepperVerticalActions']
     VDateInput: typeof import('vuetify/labs/components')['VDateInput']
     VPullToRefresh: typeof import('vuetify/labs/components')['VPullToRefresh']
     VSnackbarQueue: typeof import('vuetify/labs/components')['VSnackbarQueue']

package/lib/framework.js

@@ -96,7 +96,7 @@ export function createVuetify() {
     goTo
   };
 }
-export const version = "3.7.6-dev.2025-01-15";
+export const version = "3.7.6-dev.2025-01-17";
 createVuetify.version = version;
 
 // Vue's inject() can only be used in setup

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/nightly",
   "description": "Vue Material Component Framework",
-  "version": "3.7.6-dev.2025-01-15",
+  "version": "3.7.6-dev.2025-01-17",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"