fix(VTimeline): isolate styles from nested timelines

[morimorimokenpi]

Description

• avoid leaking styles to nested v-timeline's

fixes #21426

Markup:

<template>
  <v-app>
    <v-main>
      <v-container>
        <div class="d-flex flex-column ga-8">
          <code>issue repro: nested, both align="start"</code>
          <v-row align="start">
            <v-col cols="6">
              <v-timeline
                align="start"
                density="compact"
                line-inset="12"
                side="end"
                truncate-line="both"
              >
                <v-timeline-item v-for="i in 2" :key="i" dot-color="primary" width="100%">
                  <div>Outer {{ i }}</div>
                  <v-timeline
                    align="start"
                    density="compact"
                    line-inset="12"
                    side="end"
                    truncate-line="both"
                  >
                    <v-timeline-item v-for="j in 2" :key="j" dot-color="info" size="small">
                      <div>Inner {{ i }}-{{ j }}</div>
                      <div class="text-medium-emphasis">Second line</div>
                    </v-timeline-item>
                  </v-timeline>
                </v-timeline-item>
              </v-timeline>
            </v-col>
            <v-col cols="6">
              <code>expected (fixed)</code>
              <v-timeline
                align="start"
                density="compact"
                line-inset="12"
                side="end"
                truncate-line="both"
              >
                <v-timeline-item v-for="j in 2" :key="j" dot-color="info" size="small">
                  <div>Inner {{ j }}</div>
                  <div class="text-medium-emphasis">Second line</div>
                </v-timeline-item>
              </v-timeline>
            </v-col>
          </v-row>

          <v-divider />
          <code>outer align="start" → inner align="center"</code>
          <v-row align="start">
            <v-col cols="6">
              <v-timeline
                align="start"
                density="compact"
                side="end"
                truncate-line="both"
              >
                <v-timeline-item v-for="i in 2" :key="i" dot-color="primary" width="100%">
                  <div>Outer {{ i }}</div>
                  <v-timeline density="compact" side="end">
                    <v-timeline-item v-for="j in 3" :key="j" dot-color="info" size="small">
                      <div>Inner {{ i }}-{{ j }}</div>
                      <div class="text-medium-emphasis">Second line</div>
                      <div class="text-medium-emphasis">Third line</div>
                    </v-timeline-item>
                  </v-timeline>
                </v-timeline-item>
              </v-timeline>
            </v-col>
            <v-col cols="6">
              <code>expected</code>
              <v-timeline density="compact" side="end">
                <v-timeline-item v-for="j in 3" :key="j" dot-color="info" size="small">
                  <div>Inner {{ j }}</div>
                  <div class="text-medium-emphasis">Second line</div>
                  <div class="text-medium-emphasis">Third line</div>
                </v-timeline-item>
              </v-timeline>
            </v-col>
          </v-row>

          <v-divider />
          <code>outer vertical → inner horizontal</code>
          <v-row align="start">
            <v-col cols="6">
              <v-timeline density="compact" side="end" truncate-line="both">
                <v-timeline-item v-for="i in 2" :key="i" dot-color="primary" width="100%">
                  <div>Outer {{ i }}</div>
                  <v-timeline direction="horizontal">
                    <v-timeline-item v-for="j in 3" :key="j" dot-color="info" size="small">
                      Inner {{ i }}-{{ j }}
                    </v-timeline-item>
                  </v-timeline>
                </v-timeline-item>
              </v-timeline>
            </v-col>
            <v-col cols="6">
              <code>expected</code>
              <v-timeline direction="horizontal">
                <v-timeline-item v-for="j in 3" :key="j" dot-color="info" size="small">
                  Inner {{ j }}
                </v-timeline-item>
              </v-timeline>
            </v-col>
          </v-row>
        </div>
      </v-container>
    </v-main>
  </v-app>
</template>

[J-Sek]

we could cover 2 more cases:

Details

<template>
  <v-app>
    <v-main>
      <v-container>
        <div class="d-flex flex-column ga-8">
          <code>issue repro: nested, both align="start"</code>
          <v-row align="start">
            <v-col cols="6">
              <v-timeline
                align="start"
                density="compact"
                line-inset="12"
                side="end"
                truncate-line="both"
              >
                <v-timeline-item v-for="i in 2" :key="i" dot-color="primary" width="100%">
                  <div>Outer {{ i }}</div>
                  <v-timeline
                    align="start"
                    density="compact"
                    line-inset="12"
                    side="end"
                    truncate-line="both"
                  >
                    <v-timeline-item v-for="j in 2" :key="j" dot-color="info" size="small">
                      <div>Inner {{ i }}-{{ j }}</div>
                      <div class="text-medium-emphasis">Second line</div>
                    </v-timeline-item>
                  </v-timeline>
                </v-timeline-item>
              </v-timeline>
            </v-col>
            <v-col cols="6">
              <code>expected (fixed)</code>
              <v-timeline
                align="start"
                density="compact"
                line-inset="12"
                side="end"
                truncate-line="both"
              >
                <v-timeline-item v-for="j in 2" :key="j" dot-color="info" size="small">
                  <div>Inner {{ j }}</div>
                  <div class="text-medium-emphasis">Second line</div>
                </v-timeline-item>
              </v-timeline>
            </v-col>
          </v-row>

          <v-divider />
          <code>outer align="start" → inner align="center"</code>
          <v-row align="start">
            <v-col cols="6">
              <v-timeline
                align="start"
                density="compact"
                side="end"
                truncate-line="both"
              >
                <v-timeline-item v-for="i in 2" :key="i" dot-color="primary" width="100%">
                  <div>Outer {{ i }}</div>
                  <v-timeline density="compact" side="end">
                    <v-timeline-item v-for="j in 3" :key="j" dot-color="info" size="small">
                      <div>Inner {{ i }}-{{ j }}</div>
                      <div class="text-medium-emphasis">Second line</div>
                      <div class="text-medium-emphasis">Third line</div>
                    </v-timeline-item>
                  </v-timeline>
                </v-timeline-item>
              </v-timeline>
            </v-col>
            <v-col cols="6">
              <code>expected</code>
              <v-timeline density="compact" side="end">
                <v-timeline-item v-for="j in 3" :key="j" dot-color="info" size="small">
                  <div>Inner {{ j }}</div>
                  <div class="text-medium-emphasis">Second line</div>
                  <div class="text-medium-emphasis">Third line</div>
                </v-timeline-item>
              </v-timeline>
            </v-col>
          </v-row>

          <v-divider />
          <code>outer vertical → inner horizontal</code>
          <v-row align="start">
            <v-col cols="6">
              <v-timeline density="compact" side="end" truncate-line="both">
                <v-timeline-item v-for="i in 2" :key="i" dot-color="primary" width="100%">
                  <div>Outer {{ i }}</div>
                  <v-timeline direction="horizontal">
                    <v-timeline-item v-for="j in 3" :key="j" dot-color="info" size="small">
                      Inner {{ i }}-{{ j }}
                    </v-timeline-item>
                  </v-timeline>
                </v-timeline-item>
              </v-timeline>
            </v-col>
            <v-col cols="6">
              <code>expected</code>
              <v-timeline direction="horizontal">
                <v-timeline-item v-for="j in 3" :key="j" dot-color="info" size="small">
                  Inner {{ j }}
                </v-timeline-item>
              </v-timeline>
            </v-col>
          </v-row>
        </div>
      </v-container>
    </v-main>
  </v-app>
</template>

[morimorimokenpi]

@J-Sek Thank you for suggesting the additional cases.

I updated the styles to scope direction, alignment, side, and density rules to the items directly owned by each VTimeline. I verified all three cases from your playground:

• nested timelines with align="start"
• outer align="start" with inner align="center"
• outer vertical timeline with an inner horizontal timeline

The nested timelines now match the standalone expected layouts in all three cases. The existing VTimeline browser tests also pass (6/6).