# KPI Carousel

A titled panel that pages through metric cards. Each card is tinted by its tone — green for best, red for worst, blue for neutral — with the value and change on the right. The neighbouring cards peek in at the edges, and the arrows, dots and arrow keys move between them. Stack several panels for a top/bottom/neutral summary.

<demo-kpi-carousel>



</demo-kpi-carousel>

## Usage

```vue
<script setup lang="ts">
  import KpiCarousel from '~/components/ui/kpi-carousel/KpiCarousel.vue';
  import type { KpiCarouselItem } from '~/components/ui/kpi-carousel/types';

  const items: KpiCarouselItem[] = [
    {
      title: 'Best Contributor',
      caption: 'Most significant contributor',
      value: 'TCS',
      delta: 4.2,
      tone: 'best',
    },
    {
      title: 'Worst Contributor',
      caption: 'Most significant contributor',
      value: 'RELNC',
      delta: 0.26,
      tone: 'worst',
    },
    {
      title: 'Neutral Contributor',
      caption: 'Most neutral contributor',
      value: '45.52',
      tone: 'neutral',
    },
  ];
</script>

<template>
  <KpiCarousel title="Active Top Names" :items="items" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Panel heading
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        { title; caption; value; delta?; tone }[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      <code>
        tone
      </code>
      
       is <code>
        'best'
      </code>
      
      , <code>
        'worst'
      </code>
      
       or <code>
        'neutral'
      </code>
      
      ; omit <code>
        delta
      </code>
      
       for a large value
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        v-model
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Index of the active card
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        interval
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Autoplay delay in ms; <code>
        0
      </code>
      
       disables autoplay
    </td>
  </tr>
</tbody>
</table>

Motion respects `prefers-reduced-motion`.