<script setup lang="ts">
import { StepperTitle as ShadcnStepperTitle } from '@/components/core/stepper';

defineOptions({
  name: 'UiStepperTitle',
});
</script>

<template>
  <ShadcnStepperTitle
    :class="[
      'transition-colors',
      'group-data-[state=active]:text-content-on-surface-primary',
      'group-data-[state=completed]:text-content-on-surface-primary',
    ]"
  >
    <slot />
  </ShadcnStepperTitle>
</template>
