fix(VStepper): allow tooltips in title slots

[morimorimokenpi]

Description

Fixes #20786.

Non-editable step titles currently block pointer events in both stepper variants:

• VStepperItem renders non-editable items as native disabled buttons.
• VStepperVerticalItem applies pointer-events: none to non-editable expansion-panel titles.

In both cases, slotted content such as a v-tooltip activator cannot receive hover events.

This change allows slotted content in non-editable titles to receive pointer events while preserving the existing stepper behavior:

• non-editable items cannot change the selected step
• non-editable titles keep the default cursor and do not show a hover overlay
• actually disabled items remain native disabled controls with pointer events blocked
• editable items retain their existing click, hover, and ripple behavior

Browser tests cover title tooltips and unchanged step selection for both variants, as well as the disabled behavior of horizontal stepper items.

Testing

pnpm vitest --project browser run src/components/VStepper/__tests__/VStepper.spec.browser.tsx src/components/VStepper/__tests__/VStepperActions.spec.browser.tsx src/components/VStepperVertical/__tests__/VStepperVertical.spec.browser.tsx src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.browser.tsx
pnpm tsgo -p tsconfig.checks.json --noEmit --pretty
pnpm eslint src/components/VStepper/VStepperItem.tsx src/components/VStepper/__tests__/VStepper.spec.browser.tsx src/components/VStepperVertical/VStepperVerticalItem.tsx src/components/VStepperVertical/__tests__/VStepperVertical.spec.browser.tsx

Markup:

<template>
  <v-app>
    <v-main>
      <v-container>
        <h2>Horizontal stepper</h2>
        <p>Selected step: {{ horizontalStep }}</p>

        <v-stepper
          v-model="horizontalStep"
          hide-actions
          :items="items"
        >
          <template #title="{ step, title }">
            <span>{{ title }}</span>
            <v-icon
              v-if="step === 1"
              class="ml-2"
              icon="mdi-help-circle"
              v-tooltip:top="'Horizontal title tooltip'"
            />
          </template>
        </v-stepper>

        <h2 class="mt-8">Vertical stepper</h2>
        <p>Selected step: {{ verticalStep }}</p>

        <v-stepper-vertical v-model="verticalStep" hide-actions>
          <v-stepper-vertical-item :value="1">
            <template #title>
              <span>Step 1</span>
              <v-icon
                class="ml-2"
                icon="mdi-help-circle"
                v-tooltip:top="'Vertical title tooltip'"
              />
            </template>
          </v-stepper-vertical-item>

          <v-stepper-vertical-item :value="2" title="Step 2" />
        </v-stepper-vertical>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
  import { shallowRef } from 'vue'

  const items = [
    { title: 'Step 1', value: 1 },
    { title: 'Step 2', value: 2 },
  ]

  const horizontalStep = shallowRef(1)
  const verticalStep = shallowRef(1)
</script>

[J-Sek]

VStepper (horizontal) might have very similar problem. I'd cover both in single PR

[morimorimokenpi]

Thanks, I confirmed that the horizontal VStepper had the same user-visible problem before changing it. A browser test failed while hovering the slotted tooltip icon because the stepper header intercepted pointer events.

I covered the horizontal variant in 42962bb. Non-editable items now allow slotted hover interactions while keeping the default cursor and ignoring step-selection clicks. Actually disabled items remain native disabled controls with pointer events blocked, and that behavior has a separate regression test.

I also updated the PR title, description, and playground markup to cover both variants.