diff --git a/@kiva/kv-components/SKILLS.md b/@kiva/kv-components/SKILLS.md
new file mode 100644
index 00000000..ec3caa8c
--- /dev/null
+++ b/@kiva/kv-components/SKILLS.md
@@ -0,0 +1,31 @@
+# @kiva/kv-components Skills Catalog
+
+AI-assisted development guides for common workflows in this package.
+
+## Available Skills
+
+| Skill | File | Description |
+|-------|------|-------------|
+| make-to-vue | [docs/make-to-vue.md](docs/make-to-vue.md) | Use when porting a Figma Make (or other React) component into a Vue 3 kv-components component. Triggered by requests like "port this to Vue" or by the user sharing React source, a Figma Make URL, or a Figma file link. |
+
+## AI Prompts
+
+Drop-in prompts for generating Storybook stories and MDX documentation with an AI assistant.
+
+| Prompt | File | Description |
+|--------|------|-------------|
+| ai-stories-prompt | [docs/ai-stories-prompt.md](docs/ai-stories-prompt.md) | Prompt for generating standardized Storybook `.stories.js` files for a component. |
+| ai-documentation-prompt | [docs/ai-documentation-prompt.md](docs/ai-documentation-prompt.md) | Prompt for generating the matching `Docs.mdx` documentation page for a component. |
+| how-to-use-ai-prompts | [docs/how-to-use-ai-prompts.md](docs/how-to-use-ai-prompts.md) | Walkthrough of when and how to use the prompt files above. |
+
+## Authoring Guides & Checklists
+
+Reference material the AI prompts pull from — useful when reviewing output by hand or authoring without a prompt.
+
+| Doc | File | Description |
+|-----|------|-------------|
+| Component Stories Guide | [docs/component-stories-guide.md](docs/component-stories-guide.md) | Standards and best practices for Storybook stories in kv-components. |
+| Component Stories Checklist | [docs/component-stories-checklist.md](docs/component-stories-checklist.md) | Checklist for verifying story coverage and quality before merging. |
+| Component Documentation Guide | [docs/component-documentation-guide.md](docs/component-documentation-guide.md) | Standards and best practices for MDX component documentation. |
+| Component Documentation Checklist | [docs/component-documentation-checklist.md](docs/component-documentation-checklist.md) | Checklist for verifying documentation completeness before merging. |
+| Storybook Folder Prefixes | [docs/storybook-folder-prefixes.md](docs/storybook-folder-prefixes.md) | Required title prefixes for organizing components in the Storybook sidebar. |
diff --git a/@kiva/kv-components/docs/make-to-vue.md b/@kiva/kv-components/docs/make-to-vue.md
new file mode 100644
index 00000000..84579801
--- /dev/null
+++ b/@kiva/kv-components/docs/make-to-vue.md
@@ -0,0 +1,264 @@
+---
+name: make-to-vue
+description: Use when porting a Figma Make (or other React) component into a Vue 3 component for @kiva/kv-components — typically triggered by a request like "port this to Vue", "convert this React component", or when the user shares Figma Make code, a Figma Make URL, or a Figma file link.
+---
+
+# Figma Make to Vue Component Porting Guide
+
+A repeatable process for converting Figma Make-generated React components into Vue 3 components for `@kiva/kv-components`.
+
+## How to Use This Skill
+
+**Announce at start:** "I'm using the make-to-vue skill to port `<ComponentName>` into kv-components."
+
+Then walk the [Procedure](#procedure) below in order. Each phase has explicit verification steps; do not move to the next phase until the current one passes. If any **Stop-and-ask** condition fires, pause and check with the user before continuing.
+
+### Inputs You Need Before Starting
+
+Before Phase 1, confirm you have at least one of the following. If none are present, **stop and ask the user** which they can provide:
+
+- React/TSX source code for the component (pasted, attached, or saved into the repo — `/source-files/` at the repo root is a suggested location but not required)
+- A Figma Make URL (so the source can be inspected/exported)
+- A Figma file or frame link for the target design (for visual reference, color, and spacing verification)
+
+Screenshots help but are not a substitute for source code or a Figma link.
+
+### Stop-and-Ask Conditions
+
+Pause and ask the user rather than guessing when:
+
+- No source code or Figma Make URL is available — porting from a screenshot alone will produce drift.
+- The component overlaps an existing kv-components component (see Phase 1.2). Confirm whether to extend the existing one, create a `V2`, or build a new component.
+- Hardcoded colors don't map cleanly to a design token. Confirm the intended token rather than inventing a new hex.
+- The source uses an animation library (`motion/react`, `framer-motion`, etc.) and the equivalent CSS transition would visibly differ. Confirm whether to match exactly or adapt.
+- Accessibility behavior is unclear (e.g., what should screen readers announce, what should keyboard interactions trigger).
+
+## Procedure
+
+The [Quick Reference: Porting Checklist](#quick-reference-porting-checklist) at the end of this doc is the spine — work through it top-to-bottom. The phases below elaborate each step. After every phase, run the listed verification before moving on.
+
+### Verification Gates
+
+| After Phase | Verify |
+|-------------|--------|
+| 1 (Analysis) | You can name the props, state, sub-components, animations, and existing equivalents. If not, re-read the source. |
+| 2 (Translation) | Component renders in Storybook with representative data and no console errors. |
+| 3 (Structure) | Component is exported in `src/vue/index.ts` and visible in Storybook sidebar under the correct folder prefix. |
+| 4 (Design system) | No raw hex colors or pixel spacing remain unless the user explicitly approved them. |
+| 5 (Testing) | `npm run test` passes (lint + jest), including `jest-axe` accessibility check. |
+| 6 (Storybook) | Default + edge-case stories render correctly under visual review. |
+
+If a verification fails, fix the underlying issue before continuing — do not paper over it to keep moving.
+
+## Prerequisites
+
+- Source React code available (see [Inputs You Need Before Starting](#inputs-you-need-before-starting))
+- Familiarity with the target component's Figma design (request links/screenshots if needed)
+- Read `@kiva/kv-components/AGENTS.md` for component development patterns
+
+## Phase 1: Analysis
+
+### 1.1 Read the React Source
+
+Read the source file and identify:
+
+- **Props and data model** — What data does the component accept? Is it hardcoded or dynamic?
+- **State management** — React hooks (`useState`, `useEffect`, `useRef`) that need Vue equivalents
+- **Sub-components** — Internal components that may become part of the Vue file or separate utils
+- **External dependencies** — Libraries used (e.g., `motion/react`, `framer-motion`)
+- **Styling approach** — Tailwind classes, inline styles, CSS modules
+
+### 1.2 Check for Existing Equivalents
+
+```
+# Check if a similar component already exists
+Glob: @kiva/kv-components/src/vue/Kv*<ComponentName>*.vue
+
+# Check for reusable utils
+Glob: @kiva/kv-components/src/utils/**/*
+```
+
+Decide: new component, v2 of existing, or enhancement to existing.
+
+### 1.3 Identify What Changes
+
+Figma Make output is presentational/demo code. Determine what needs to change:
+
+- **Hardcoded data** -> Dynamic props
+- **Hardcoded colors** -> Design system tokens from `@kiva/kv-tokens/primitives.js`
+- **Fixed dimensions** -> Container-responsive sizing
+- **Presentational strings** -> Configurable via props/slots
+- **React animation libraries** -> CSS transitions or Vue composables (prefer no extra deps)
+
+## Phase 2: Translation Patterns
+
+### 2.1 React Hooks to Vue Composition API
+
+| React | Vue 3 |
+|-------|-------|
+| `useState(value)` | `ref(value)` |
+| `useEffect(() => {}, [deps])` | `watch(deps, () => {})` or `onMounted(() => {})` |
+| `useRef(null)` | `ref(null)` or `templateRef` |
+| `useMemo(() => {}, [deps])` | `computed(() => {})` |
+| `useCallback(() => {}, [deps])` | Plain function (no memoization needed in Vue) |
+| Custom hooks | Composables in `src/utils/use*.ts` |
+
+### 2.2 JSX to Vue Template
+
+| React JSX | Vue Template |
+|-----------|-------------|
+| `{condition && <div>}` | `<div v-if="condition">` |
+| `{items.map(item => <X key={item.id} />)}` | `<X v-for="item in items" :key="item.id" />` |
+| `className="..."` | `class="..."` |
+| `style={{ color: 'red' }}` | `:style="{ color: 'red' }"` |
+| `onClick={handler}` | `@click="handler"` |
+| `{children}` | `<slot />` |
+| `<motion.div animate={...}>` | CSS transitions or Vue transition components |
+
+### 2.3 Styling Translation
+
+Figma Make outputs raw Tailwind classes. Convert to kv-components patterns:
+
+- **Add `tw-` prefix** to all Tailwind utility classes
+- **Replace hardcoded font families** with design system fonts (`tw-font-sans`, `tw-font-serif`)
+- **Replace hardcoded colors** with token references where possible
+- **Replace pixel values** in Tailwind classes with spacing scale values (8px increments)
+- **Use design tokens** from `@kiva/kv-tokens/primitives.js` for colors, spacing, typography
+
+### 2.4 Animation Translation
+
+Prefer CSS transitions over JavaScript animation libraries:
+
+| Figma Make / React | Vue Equivalent |
+|--------------------|----------------|
+| `motion/react` animate prop | CSS `transition` property |
+| `transition={{ duration: 0.5 }}` | `transition: property 500ms ease-in-out` |
+| Staggered animations | Computed `transition-delay` per item index |
+| Spring animations | CSS `cubic-bezier()` or `ease-in-out` |
+| `requestAnimationFrame` hooks | Vue composable with `onMounted`/`onUnmounted` lifecycle |
+| Opacity/transform tweens | CSS transitions on those properties |
+
+For complex numeric animations (count-up, interpolation), create a composable in `src/utils/`:
+
+```ts
+// src/utils/useCountUp.ts
+import { ref, watch, onUnmounted } from 'vue';
+
+export function useCountUp(target: Ref<number>, active: Ref<boolean>, duration = 500) {
+  // requestAnimationFrame-based tween with easing
+  // Returns reactive ref with current display value
+}
+```
+
+## Phase 3: Component Structure
+
+### 3.1 File Creation Checklist
+
+1. `src/vue/Kv<Name>.vue` — Main component
+2. `src/utils/<utilName>.ts` — Extracted logic (composables, helpers)
+3. `src/vue/stories/Kv<Name>.stories.ts` — Storybook stories (create EARLY)
+4. `tests/unit/specs/components/Kv<Name>.spec.ts` — Component tests
+5. `tests/unit/specs/utils/<utilName>.spec.ts` — Utility tests
+6. Export in `src/vue/index.ts`
+
+### 3.2 Component Patterns
+
+Follow these kv-components conventions:
+
+- **Script**: `<script lang="ts">` with `export default { setup() {} }` or `<script setup lang="ts">`
+- **Styling**: `<style lang="postcss" scoped>` for component-specific styles
+- **Props**: TypeScript typed with JSDoc for Storybook auto-docs
+- **Naming**: `Kv` prefix, PascalCase (e.g., `KvPieChartV2`)
+- **Accessibility**: ARIA attributes, semantic HTML, keyboard support
+- **No references to the source framework**: The shipped Vue component is the source of truth — code, comments, and JSDoc must not mention "React", "Figma Make", "the React source", etc. Strip these as you translate, and double-check before committing.
+
+### 3.3 When to Extract Utils
+
+Extract into `src/utils/` when:
+- Logic involves lifecycle management (rAF, timers, observers)
+- Logic is reusable across components
+- Logic is complex enough to benefit from independent unit testing
+- The main component file would exceed ~300 lines without extraction
+
+## Phase 4: Design System Integration
+
+### 4.1 Colors
+
+Always check `@kiva/kv-tokens/primitives.js` for existing color tokens before using hardcoded hex values. Map Figma Make colors to the closest token:
+
+```js
+import kvTokensPrimitives from '@kiva/kv-tokens';
+const { colors } = kvTokensPrimitives;
+// colors['eco-green'].DEFAULT, colors.marigold['3'], etc.
+```
+
+### 4.2 Typography
+
+Map Figma Make font references:
+- `Kiva Post Grot:Book` -> `font-weight: 300` (light/book)
+- `Kiva Post Grot:Medium` -> `font-weight: 500` (medium)
+- Font family -> `tw-font-sans` (PostGrotesk)
+
+### 4.3 Spacing
+
+Convert pixel values to the 8px spacing scale:
+- `4px` -> `tw-p-0.5`
+- `8px` -> `tw-p-1`
+- `16px` -> `tw-p-2`
+- etc.
+
+## Phase 5: Testing
+
+### 5.1 Test Requirements
+
+Every ported component must have:
+
+1. **Accessibility test** — jest-axe `toHaveNoViolations()`
+2. **Rendering tests** — correct output for various prop combinations
+3. **Interaction tests** — click/hover/keyboard behaviors
+4. **Edge cases** — empty data, single item, maximum items
+5. **Utility tests** — independent tests for extracted composables/helpers
+
+### 5.2 Test Structure
+
+```ts
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvComponentName from '#components/KvComponentName.vue';
+
+describe('KvComponentName', () => {
+  it('should have no automated accessibility violations', async () => {
+    const { container } = render(KvComponentName, { props: { /* ... */ } });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  // ... rendering, interaction, edge case tests
+});
+```
+
+## Phase 6: Storybook
+
+Create stories early in the process for visual review:
+
+1. **Default story** with representative data
+2. **Loading/skeleton state**
+3. **Edge cases** (empty, single item, many items)
+4. **Prop variations** (different modes, sizes, configurations)
+5. **Interactive controls** via argTypes
+
+## Quick Reference: Porting Checklist
+
+- [ ] Read React source, identify hooks/state/deps/sub-components
+- [ ] Check for existing kv-components equivalents
+- [ ] Map hardcoded values to design system tokens
+- [ ] Create Storybook story early for visual review
+- [ ] Translate React hooks to Vue Composition API
+- [ ] Convert JSX to Vue template with `tw-` prefix classes
+- [ ] Replace animation libraries with CSS transitions
+- [ ] Extract complex logic into `src/utils/` composables
+- [ ] Export component in `src/vue/index.ts`
+- [ ] Write component tests with jest-axe accessibility check
+- [ ] Write utility tests for extracted logic
+- [ ] Review in Storybook across stories
+- [ ] Run `npm run test` (lint + jest)
diff --git a/@kiva/kv-components/jest.config.cjs b/@kiva/kv-components/jest.config.cjs
index 4ef5db72..287fcab7 100644
--- a/@kiva/kv-components/jest.config.cjs
+++ b/@kiva/kv-components/jest.config.cjs
@@ -51,8 +51,15 @@ module.exports = {
 		}],
 		'^.+\\.ts$': ['ts-jest', {
 			useESM: true,
+			diagnostics: false,
 			tsconfig: {
 				allowJs: true,
+				types: ['jest', 'node'],
+				baseUrl: '.',
+				paths: {
+					'#components/*': ['src/vue/*'],
+					'#utils/*': ['src/utils/*'],
+				},
 			},
 		}],
 		'^.+\\.js$': 'babel-jest',
diff --git a/@kiva/kv-components/src/utils/pieChartColors.ts b/@kiva/kv-components/src/utils/pieChartColors.ts
new file mode 100644
index 00000000..df23d3b0
--- /dev/null
+++ b/@kiva/kv-components/src/utils/pieChartColors.ts
@@ -0,0 +1,41 @@
+import kvTokensPrimitives from '@kiva/kv-tokens';
+
+const { colors } = kvTokensPrimitives;
+
+export const LOADING_BG_COLOR: string = colors.gray[100]; // #F5F5F5
+export const OTHER_SEGMENT_BG_COLOR: string = colors.gray[300]; // #C4C4C4
+/**
+ * Tiered chart color palette drawn from kv-tokens design primitives.
+ * Tier 1 (indices 0-7): Bold primary colors for maximum visual distinction.
+ * Tier 2 (indices 8-13): Lighter variants for datasets with more segments.
+ * Colors cycle when the dataset exceeds palette length.
+ */
+export const PIE_CHART_COLORS: string[] = [
+	// Tier 1 — Bold primaries
+	colors['eco-green']['3'], // #276A43
+	colors.marigold.DEFAULT, // #F4B539
+	colors['desert-rose'].DEFAULT, // #C45F4F
+	'#2E3BAD', // Custom blue for contrast
+	'#874FFF', // Custom purple for contrast
+	colors.stone['3'], // #635544
+	colors.brand['500'], // #4AB67E
+	colors.marigold['3'], // #996210
+	// Tier 2 — Lighter variants
+	colors['eco-green']['2'], // #78C79F
+	colors.marigold['2'], // #F8CD69
+	colors['desert-rose']['2'], // #E0988D
+	colors.stone['2'], // #AA9E8D
+	colors.brand['300'], // #95D4B3
+	colors['desert-rose']['3'], // #A24536
+];
+
+/**
+ * Get the chart color for a given index, with optional override.
+ * Cycles through the palette when index exceeds palette length.
+ */
+export function getPieChartColor(index: number, customColor?: string): string {
+	if (customColor) {
+		return customColor;
+	}
+	return PIE_CHART_COLORS[index % PIE_CHART_COLORS.length];
+}
diff --git a/@kiva/kv-components/src/utils/useCountUp.ts b/@kiva/kv-components/src/utils/useCountUp.ts
new file mode 100644
index 00000000..31f06b07
--- /dev/null
+++ b/@kiva/kv-components/src/utils/useCountUp.ts
@@ -0,0 +1,76 @@
+import {
+	ref,
+	watch,
+	onUnmounted,
+	type Ref,
+} from 'vue';
+
+/**
+ * Cubic ease-in-out function.
+ */
+export function easeInOutCubic(t: number): number {
+	return t < 0.5
+		? 4 * t * t * t
+		: 1 - (-2 * t + 2) ** 3 / 2;
+}
+
+/**
+ * Composable that animates a number from 0 to a target value (or back to 0)
+ * using requestAnimationFrame with cubic ease-in-out easing.
+ *
+ * @param target - Reactive ref of the target number to animate toward
+ * @param active - Reactive ref controlling animation direction (true = animate to target, false = animate to 0)
+ * @param duration - Animation duration in milliseconds (default: 500)
+ * @returns Object with displayValue ref containing the current animated number
+ */
+export function useCountUp(target: Ref<number>, active: Ref<boolean>, duration = 500) {
+	const displayValue = ref(0);
+	let rafId: number | null = null;
+	let startTime: number | null = null;
+	let startValue = 0;
+
+	function animate(endValue: number) {
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+		}
+		startTime = null;
+		startValue = displayValue.value;
+
+		function step(timestamp: number) {
+			if (startTime === null) {
+				startTime = timestamp;
+			}
+			const elapsed = timestamp - startTime;
+			const progress = Math.min(elapsed / duration, 1);
+			const eased = easeInOutCubic(progress);
+
+			displayValue.value = Math.round(startValue + (endValue - startValue) * eased);
+
+			if (progress < 1) {
+				rafId = requestAnimationFrame(step);
+			} else {
+				rafId = null;
+			}
+		}
+
+		rafId = requestAnimationFrame(step);
+	}
+
+	watch(active, (isActive) => {
+		animate(isActive ? target.value : 0);
+	}, { immediate: true });
+
+	watch(target, (newTarget) => {
+		if (active.value) {
+			animate(newTarget);
+		}
+	});
+
+	onUnmounted(() => {
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+		}
+	});
+
+	return { displayValue };
+}
diff --git a/@kiva/kv-components/src/vue/KvPieChartV2.vue b/@kiva/kv-components/src/vue/KvPieChartV2.vue
new file mode 100644
index 00000000..7648326a
--- /dev/null
+++ b/@kiva/kv-components/src/vue/KvPieChartV2.vue
@@ -0,0 +1,627 @@
+<template>
+	<figure
+		class="kv-pie-chart-v2 tw-flex tw-flex-col tw-items-center tw-gap-1"
+		aria-label="Pie chart"
+	>
+		<!-- Donut chart SVG -->
+		<div class="tw-px-2">
+			<svg
+				viewBox="0 0 262 262"
+				fill="none"
+				class="tw-w-full"
+				role="img"
+				aria-hidden="true"
+			>
+				<!-- Skeleton ring -->
+				<circle
+					v-if="loading || !hasData"
+					:cx="CX"
+					:cy="CY"
+					:r="radius"
+					:stroke="LOADING_BG_COLOR"
+					:stroke-width="strokeWidth"
+					fill="none"
+					class="skeleton-ring tw-opacity-0"
+					:class="{ 'skeleton-ring--hidden': animatedIn }"
+				/>
+
+				<!-- Colored segments -->
+				<circle
+					v-for="segment in visibleSegments"
+					:key="segment.label"
+					:cx="CX"
+					:cy="CY"
+					:r="radius"
+					:stroke="segment.color"
+					:stroke-width="strokeWidth"
+					fill="none"
+					:stroke-dasharray="`${segment.dashLength} ${circumference * 2}`"
+					:transform="`rotate(${segment.startDeg}, ${CX}, ${CY})`"
+					class="segment-circle"
+					:style="{
+						strokeDashoffset: segment.isVisible ? 0 : segment.dashLength,
+						transitionDelay: `${segment.delay}ms`,
+					}"
+				/>
+
+				<!-- "Other" segment -->
+				<circle
+					v-if="otherSegment"
+					:cx="CX"
+					:cy="CY"
+					:r="radius"
+					:stroke="OTHER_SEGMENT_BG_COLOR"
+					:stroke-width="strokeWidth"
+					fill="none"
+					:stroke-dasharray="`${otherSegment.dashLength} ${circumference * 2}`"
+					:transform="`rotate(${otherSegment.startDeg}, ${CX}, ${CY})`"
+					class="segment-circle"
+					:style="{
+						strokeDashoffset: otherSegment.isVisible ? 0 : otherSegment.dashLength,
+						transitionDelay: `${otherSegment.delay}ms`,
+					}"
+				/>
+			</svg>
+		</div>
+
+		<!-- Legend: 2-column grid -->
+		<div
+			v-if="hasData && !loading"
+			class="tw-flex tw-flex-wrap tw-justify-center tw-gap-0.5 tw-w-full tw-pt-0.5"
+		>
+			<!-- Visible segment pills -->
+			<div
+				v-for="(segment, index) in visibleSegments"
+				:key="segment.label"
+				class="
+					tw-bg-gray-100
+					tw-flex tw-gap-0.5 tw-items-center
+					tw-px-1 tw-py-0.5
+					tw-rounded-xs
+				"
+			>
+				<div class="tw-flex tw-gap-0.5 tw-items-center tw-min-w-0 tw-overflow-hidden">
+					<span
+						class="tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot"
+						:style="{
+							backgroundColor: segment.isVisible ? segment.color : '#d1d5db',
+							transitionDelay: `${segment.delay}ms`,
+						}"
+					></span>
+					<span
+						class="
+							tw-font-medium tw-text-small tw-text-primary
+							tw-whitespace-nowrap tw-truncate
+						"
+					>
+						{{ segment.label }}
+					</span>
+				</div>
+				<span
+					class="
+						tw-font-light tw-text-small tw-text-primary
+						tw-text-right tw-shrink-0 tw-tabular-nums
+					"
+					:style="{ minWidth: valueMinWidth }"
+				>
+					{{ formatDisplayValue(index) }}
+				</span>
+			</div>
+
+			<!-- "Other" pill -->
+			<button
+				v-if="otherItems.length > 0"
+				class="
+					tw-bg-gray-100
+					tw-flex tw-gap-0.5 tw-items-center
+					tw-px-1 tw-py-0.5
+					tw-rounded-xs
+					tw-cursor-pointer
+					tw-border-0
+					tw-text-left
+				"
+				type="button"
+				@click="showOtherLightbox = true"
+			>
+				<div class="tw-flex tw-gap-0.5 tw-items-center tw-shrink-0">
+					<span
+						class="tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot"
+						:style="{
+							backgroundColor: otherSegment?.isVisible ? '#C4C4C4' : '#d1d5db',
+							transitionDelay: `${otherSegment?.delay ?? 0}ms`,
+						}"
+					></span>
+					<span class="tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap">
+						Other
+					</span>
+				</div>
+				<span
+					class="
+						tw-font-light tw-text-small tw-text-primary
+						tw-text-right tw-shrink-0 tw-tabular-nums
+					"
+					:style="{ minWidth: valueMinWidth }"
+				>
+					{{ formatOtherDisplayValue() }}
+				</span>
+			</button>
+		</div>
+
+		<!-- "Other" lightbox -->
+		<kv-lightbox
+			v-if="hasData && !loading"
+			:visible="showOtherLightbox"
+			title="Other"
+			@lightbox-closed="showOtherLightbox = false"
+		>
+			<div class="tw-grid tw-grid-cols-2 tw-grid-flow-row tw-gap-0.5">
+				<div
+					v-for="item in allItemsWithColors"
+					:key="item.label"
+					class="
+						tw-bg-gray-100
+						tw-flex tw-gap-0.5 tw-items-center
+						tw-px-1 tw-py-0.5
+						tw-rounded-xs
+						tw-justify-between
+						tw-w-full
+					"
+				>
+					<div class="tw-flex tw-gap-0.5 tw-items-center tw-shrink-0 tw-overflow-hidden">
+						<span
+							class="tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full"
+							:style="{ backgroundColor: item.color }"
+						></span>
+						<span
+							class="
+								tw-font-medium tw-text-small tw-text-primary
+								tw-whitespace-nowrap tw-truncate
+							"
+						>
+							{{ item.label }}
+						</span>
+					</div>
+					<span
+						class="
+							tw-font-light tw-text-small tw-text-primary
+							tw-text-right tw-shrink-0 tw-tabular-nums
+						"
+						style="min-width: 2.8ch;"
+					>
+						{{ formatItemValue(item) }}
+					</span>
+				</div>
+			</div>
+		</kv-lightbox>
+	</figure>
+</template>
+
+<script lang="ts">
+import {
+	ref,
+	computed,
+	toRefs,
+	onMounted,
+	onUnmounted,
+	watch,
+} from 'vue';
+import type { PropType } from 'vue';
+import { getPieChartColor, LOADING_BG_COLOR, OTHER_SEGMENT_BG_COLOR } from '../utils/pieChartColors';
+import { easeInOutCubic } from '../utils/useCountUp';
+import KvLightbox from './KvLightbox.vue';
+
+/**
+ * A data item for the pie chart.
+ */
+export interface KvPieChartV2Item {
+	/** Display label for this segment */
+	label: string;
+	/** Numeric value for this segment */
+	value: number;
+	/** Optional color override (hex string). If omitted, assigned from palette. */
+	color?: string;
+}
+
+export type PieChartUnit = 'percent' | 'amount' | 'count';
+
+// ── Donut geometry ──
+// The donut renders inside a fixed 262x262 viewBox. The radius is derived from
+// strokeWidth so the ring's outer edge always lands on the viewBox boundary —
+// thicker rings grow inward toward center rather than overflowing the SVG.
+const VIEWBOX = 262;
+const CX = VIEWBOX / 2;
+const CY = VIEWBOX / 2;
+
+// ── Animation timing ──
+// STAGGER and GROW_DURATION are intentionally equal so each segment finishes
+// as the next one begins. CSS .segment-circle transition (500ms) must match
+// GROW_DURATION; update both together if you change one.
+const STAGGER = 500;
+const GROW_DURATION = 500;
+
+interface ComputedSegment {
+	label: string;
+	value: number;
+	percent: number;
+	color: string;
+	dashLength: number;
+	startDeg: number;
+	delay: number;
+	isVisible: boolean;
+}
+
+export default {
+	name: 'KvPieChartV2',
+	components: {
+		KvLightbox,
+	},
+	props: {
+		/**
+		 * Chart data items. Each must have a label and numeric value.
+		 */
+		values: {
+			type: Array as PropType<KvPieChartV2Item[]>,
+			default: () => [],
+		},
+		/**
+		 * How values are displayed in legend pills.
+		 * @values percent, amount, count
+		 */
+		unit: {
+			type: String as PropType<PieChartUnit>,
+			default: 'percent',
+			validator: (value: string) => ['percent', 'amount', 'count'].includes(value),
+		},
+		/**
+		 * Shows a skeleton donut ring when true.
+		 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Maximum number of visible segments before remaining items collapse into "Other".
+		 */
+		shownSegments: {
+			type: Number,
+			default: 5,
+		},
+		/**
+		 * Donut ring thickness in SVG user units (viewBox is 262x262). The radius
+		 * shrinks as this grows, so the outer edge always fits within the viewBox.
+		 */
+		strokeWidth: {
+			type: Number,
+			default: 56,
+		},
+		/**
+		 * Visual gap between adjacent segments, in SVG user units along the ring's
+		 * circumference. Set to 0 for no gap.
+		 */
+		segmentGap: {
+			type: Number,
+			default: 2,
+		},
+		/**
+		 * Delay in milliseconds before the first segment starts animating in.
+		 * Subsequent segments stagger from this baseline.
+		 */
+		initialDelay: {
+			type: Number,
+			default: 1000,
+		},
+		/**
+		 * When changed from false to true, plays the reverse sweep-out animation.
+		 */
+		animateOut: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const {
+			values,
+			unit,
+			loading,
+			shownSegments,
+			strokeWidth,
+			segmentGap,
+			initialDelay,
+			animateOut,
+		} = toRefs(props);
+
+		const showOtherLightbox = ref(false);
+		const animatedIn = ref(false);
+
+		// Derived donut geometry. Radius shrinks as strokeWidth grows so the ring's
+		// outer edge always sits on the viewBox boundary.
+		const radius = computed(() => Math.max((VIEWBOX - strokeWidth.value) / 2, 1));
+		const circumference = computed(() => 2 * Math.PI * radius.value);
+
+		// Sort values descending by value
+		const sortedValues = computed(() => {
+			return [...values.value].sort((a, b) => b.value - a.value);
+		});
+
+		const total = computed(() => {
+			return sortedValues.value.reduce((sum, item) => sum + item.value, 0);
+		});
+
+		const hasData = computed(() => values.value.length > 0);
+
+		// Top N items shown as individual segments
+		const topItems = computed(() => {
+			return sortedValues.value.slice(0, shownSegments.value);
+		});
+
+		// Items collapsed into "Other" (used to compute the Other segment + pill).
+		const otherItems = computed(() => {
+			const items = sortedValues.value.slice(shownSegments.value);
+			return items.map((item, i) => ({
+				...item,
+				color: getPieChartColor(shownSegments.value + i, item.color),
+			}));
+		});
+
+		// All items (visible + collapsed) with assigned colors, used in the lightbox.
+		const allItemsWithColors = computed(() => {
+			return sortedValues.value.map((item, i) => ({
+				...item,
+				color: getPieChartColor(i, item.color),
+			}));
+		});
+
+		const otherTotal = computed(() => {
+			return otherItems.value.reduce((sum, item) => sum + item.value, 0);
+		});
+
+		const otherPercent = computed(() => {
+			return total.value > 0 ? otherTotal.value / total.value : 0;
+		});
+
+		// Compute geometry for visible segments
+		const visibleSegments = computed<ComputedSegment[]>(() => {
+			let cumPct = 0;
+			return topItems.value.map((item, i) => {
+				const percent = total.value > 0 ? item.value / total.value : 0;
+				const dashLength = Math.max(percent * circumference.value - segmentGap.value, 0);
+				const startDeg = cumPct * 360 - 90;
+				cumPct += percent;
+
+				return {
+					label: item.label,
+					value: item.value,
+					percent,
+					color: getPieChartColor(i, item.color),
+					dashLength,
+					startDeg,
+					delay: initialDelay.value + i * STAGGER,
+					isVisible: animatedIn.value && !animateOut.value,
+				};
+			});
+		});
+
+		// Compute "Other" segment geometry
+		const otherSegment = computed<ComputedSegment | null>(() => {
+			if (otherItems.value.length === 0) return null;
+
+			let cumPct = 0;
+			topItems.value.forEach((item) => {
+				cumPct += total.value > 0 ? item.value / total.value : 0;
+			});
+
+			const dashLength = Math.max(otherPercent.value * circumference.value - segmentGap.value, 0);
+			const startDeg = cumPct * 360 - 90;
+			const segIndex = topItems.value.length;
+
+			return {
+				label: 'Other',
+				value: otherTotal.value,
+				percent: otherPercent.value,
+				color: '#C4C4C4',
+				dashLength,
+				startDeg,
+				delay: initialDelay.value + segIndex * STAGGER,
+				isVisible: animatedIn.value && !animateOut.value,
+			};
+		});
+
+		// ── Count-up animation state ──
+		// Reactive array of display values for each segment + "Other"
+		const displayValues = ref<number[]>([]);
+		const countUpTimers: ReturnType<typeof setTimeout>[] = [];
+		const countUpRafs: number[] = [];
+
+		// Get the target display value for a segment
+		const getDisplayTarget = (segment: ComputedSegment) => {
+			return unit.value === 'percent'
+				? Math.round(segment.percent * 100)
+				: segment.value;
+		};
+
+		// Animate a single value from startVal to endVal at a given index
+		const animateCountUp = (index: number, startVal: number, endVal: number) => {
+			let startTime: number | null = null;
+
+			function step(timestamp: number) {
+				if (startTime === null) startTime = timestamp;
+				const elapsed = timestamp - startTime;
+				const progress = Math.min(elapsed / GROW_DURATION, 1);
+				const eased = easeInOutCubic(progress);
+				const current = Math.round(startVal + (endVal - startVal) * eased);
+				displayValues.value[index] = current;
+				if (progress < 1) {
+					countUpRafs[index] = requestAnimationFrame(step);
+				}
+			}
+
+			countUpRafs[index] = requestAnimationFrame(step);
+		};
+
+		// Start all count-ups with staggered delays
+		const startCountUps = (reverse = false) => {
+			// Clear previous timers/rafs
+			countUpTimers.forEach(clearTimeout);
+			countUpTimers.length = 0;
+			countUpRafs.forEach(cancelAnimationFrame);
+			countUpRafs.length = 0;
+
+			const allSegments = [
+				...visibleSegments.value,
+				...(otherSegment.value ? [otherSegment.value] : []),
+			];
+
+			// Ensure displayValues array matches segment count
+			while (displayValues.value.length < allSegments.length) {
+				displayValues.value.push(0);
+			}
+
+			allSegments.forEach((seg, i) => {
+				const target = getDisplayTarget(seg);
+				const { delay } = seg;
+				const timer = setTimeout(() => {
+					if (reverse) {
+						animateCountUp(i, displayValues.value[i], 0);
+					} else {
+						animateCountUp(i, 0, target);
+					}
+				}, delay);
+				countUpTimers.push(timer);
+			});
+		};
+
+		// Format a display value based on unit type
+		const formatDisplayValue = (index: number) => {
+			const val = displayValues.value[index] ?? 0;
+			switch (unit.value) {
+				case 'percent':
+					return `${val}%`;
+				case 'amount':
+					return `$${val.toLocaleString()}`;
+				case 'count':
+				default:
+					return `${val.toLocaleString()}`;
+			}
+		};
+
+		const formatItemValue = (item: { value: number }) => {
+			const percent = total.value > 0 ? item.value / total.value : 0;
+			switch (unit.value) {
+				case 'percent':
+					return `${Math.round(percent * 100)}%`;
+				case 'amount':
+					return `$${item.value.toLocaleString()}`;
+				case 'count':
+				default:
+					return `${item.value.toLocaleString()}`;
+			}
+		};
+
+		const formatOtherDisplayValue = () => {
+			const otherIndex = visibleSegments.value.length;
+			return formatDisplayValue(otherIndex);
+		};
+
+		// Reserve enough width for the widest final formatted value so pills
+		// don't shift during the count-up animation.
+		const valueMinWidth = computed(() => {
+			const allSegments = [
+				...visibleSegments.value,
+				...(otherSegment.value ? [otherSegment.value] : []),
+			];
+			let maxLen = 0;
+			allSegments.forEach((seg) => {
+				const target = getDisplayTarget(seg);
+				let formatted: string;
+				switch (unit.value) {
+					case 'percent':
+						formatted = `${target}%`;
+						break;
+					case 'amount':
+						formatted = `$${target.toLocaleString()}`;
+						break;
+					default:
+						formatted = `${target.toLocaleString()}`;
+				}
+				if (formatted.length > maxLen) maxLen = formatted.length;
+			});
+			return `${maxLen}ch`;
+		});
+
+		// Trigger animation on mount or when loading completes.
+		// Double rAF ensures the browser paints the initial state (segments
+		// hidden) before flipping `animatedIn`, so the CSS transition fires.
+		const triggerAnimateIn = () => {
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					animatedIn.value = true;
+					startCountUps(false);
+				});
+			});
+		};
+
+		onMounted(() => {
+			if (!loading.value && hasData.value) {
+				triggerAnimateIn();
+			}
+		});
+
+		watch(loading, (isLoading) => {
+			if (!isLoading && hasData.value) {
+				triggerAnimateIn();
+			}
+		});
+
+		watch(animateOut, (shouldAnimateOut) => {
+			if (shouldAnimateOut) {
+				animatedIn.value = false;
+				startCountUps(true);
+			}
+		});
+
+		onUnmounted(() => {
+			countUpTimers.forEach(clearTimeout);
+			countUpRafs.forEach(cancelAnimationFrame);
+		});
+
+		return {
+			// Constants
+			CX,
+			CY,
+			radius,
+			circumference,
+			LOADING_BG_COLOR,
+			OTHER_SEGMENT_BG_COLOR,
+			// State
+			showOtherLightbox,
+			animatedIn,
+			displayValues,
+			// Computed
+			hasData,
+			visibleSegments,
+			otherSegment,
+			otherItems,
+			allItemsWithColors,
+			valueMinWidth,
+			// Methods
+			formatDisplayValue,
+			formatItemValue,
+			formatOtherDisplayValue,
+		};
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+.segment-circle {
+	transition: stroke-dashoffset 500ms ease-in-out;
+}
+
+.skeleton-ring {
+	transition: opacity 500ms ease-in-out;
+}
+
+.legend-dot {
+	transition: background-color 500ms ease-in-out;
+}
+</style>
diff --git a/@kiva/kv-components/src/vue/index.ts b/@kiva/kv-components/src/vue/index.ts
index 757a7744..5fd28159 100644
--- a/@kiva/kv-components/src/vue/index.ts
+++ b/@kiva/kv-components/src/vue/index.ts
@@ -58,6 +58,7 @@ export { default as KvMaterialIcon } from './KvMaterialIcon.vue';
 export { default as KvPageContainer } from './KvPageContainer.vue';
 export { default as KvPagination } from './KvPagination.vue';
 export { default as KvPieChart } from './KvPieChart.vue';
+export { default as KvPieChartV2 } from './KvPieChartV2.vue';
 export { default as KvPill } from './KvPill.vue';
 export { default as KvPopper } from './KvPopper.vue';
 export { default as KvProgressBar } from './KvProgressBar.vue';
diff --git a/@kiva/kv-components/src/vue/stories/KvPieChartV2.stories.js b/@kiva/kv-components/src/vue/stories/KvPieChartV2.stories.js
new file mode 100644
index 00000000..adb326cb
--- /dev/null
+++ b/@kiva/kv-components/src/vue/stories/KvPieChartV2.stories.js
@@ -0,0 +1,475 @@
+import KvPieChartV2 from '../KvPieChartV2.vue';
+import KvPieChartV2DocsMdx from './KvPieChartV2Docs.mdx';
+
+const sampleValues = [
+	{ label: 'Agriculture', value: 28 },
+	{ label: 'Eco-friendly', value: 28 },
+	{ label: 'Services', value: 17 },
+	{ label: 'Water', value: 13 },
+	{ label: 'Food', value: 12 },
+	{ label: 'Other', value: 5 },
+];
+
+const fewValues = [
+	{ label: 'Female', value: 75 },
+	{ label: 'Male', value: 25 },
+];
+
+const manyValues = [
+	{ label: 'Food', value: 575 },
+	{ label: 'Retail', value: 377 },
+	{ label: 'Agriculture', value: 285 },
+	{ label: 'Services', value: 211 },
+	{ label: 'Clothing', value: 183 },
+	{ label: 'Arts', value: 65 },
+	{ label: 'Housing', value: 65 },
+	{ label: 'Education', value: 36 },
+	{ label: 'Construction', value: 28 },
+	{ label: 'Health', value: 27 },
+	{ label: 'Transportation', value: 23 },
+	{ label: 'Personal Use', value: 19 },
+	{ label: 'Manufacturing', value: 13 },
+	{ label: 'Entertainment', value: 10 },
+	{ label: 'Wholesale', value: 5 },
+];
+
+const customColorValues = [
+	{ label: 'Category A', value: 40, color: '#FF6B6B' },
+	{ label: 'Category B', value: 30, color: '#4ECDC4' },
+	{ label: 'Category C', value: 20 },
+	{ label: 'Category D', value: 10 },
+];
+
+export default {
+	title: 'Charts/KvPieChartV2',
+	component: KvPieChartV2,
+	parameters: {
+		docs: {
+			page: KvPieChartV2DocsMdx,
+			title: 'KvPieChartV2 Docs',
+		},
+	},
+	argTypes: {
+		/**
+		 * Chart data items. Each must have a label and numeric value; optional color override.
+		 */
+		values: {
+			control: 'object',
+			description: 'Chart data items. Each must have a label and numeric value; optional color override.',
+			table: {
+				type: { summary: 'KvPieChartV2Item[]' },
+				defaultValue: { summary: '[]' },
+			},
+		},
+		/**
+		 * How values are displayed in legend pills.
+		 */
+		unit: {
+			control: { type: 'radio' },
+			options: ['percent', 'amount', 'count'],
+			description: 'How values are displayed in legend pills.',
+			table: {
+				type: { summary: "'percent' | 'amount' | 'count'" },
+				defaultValue: { summary: "'percent'" },
+			},
+		},
+		/**
+		 * Shows a skeleton donut ring when true.
+		 */
+		loading: {
+			control: 'boolean',
+			description: 'Shows a skeleton donut ring when true.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		/**
+		 * Maximum number of visible segments before remaining items collapse into "Other".
+		 */
+		shownSegments: {
+			control: { type: 'number', min: 1, max: 20 },
+			description: 'Maximum number of visible segments before remaining items collapse into "Other".',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '5' },
+			},
+		},
+		/**
+		 * Donut ring thickness in SVG user units. The radius shrinks as this grows,
+		 * so the outer edge always fits within the viewBox.
+		 */
+		strokeWidth: {
+			control: {
+				type: 'range', min: 8, max: 200, step: 2,
+			},
+			description: 'Donut ring thickness in SVG user units.',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '56' },
+			},
+		},
+		/**
+		 * Visual gap between adjacent segments, in SVG user units along the circumference.
+		 */
+		segmentGap: {
+			control: {
+				type: 'range', min: 0, max: 20, step: 1,
+			},
+			description: 'Visual gap between adjacent segments, in SVG user units along the circumference.',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '2' },
+			},
+		},
+		/**
+		 * Delay in milliseconds before the first segment starts animating in.
+		 */
+		initialDelay: {
+			control: {
+				type: 'range', min: 0, max: 5000, step: 100,
+			},
+			description: 'Delay in milliseconds before the first segment starts animating in.',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '1000' },
+			},
+		},
+		/**
+		 * Reverses the entrance animation (segments shrink back to 0).
+		 */
+		animateOut: {
+			control: 'boolean',
+			description: 'Reverses the entrance animation (segments shrink back to 0).',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+	},
+};
+
+/**
+ * Default story - Interactive playground for exploring all props.
+ */
+export const Default = {
+	args: {
+		values: sampleValues,
+		unit: 'percent',
+		loading: false,
+		shownSegments: 5,
+		strokeWidth: 56,
+		segmentGap: 2,
+		initialDelay: 1000,
+		animateOut: false,
+	},
+	render: (args) => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return { args };
+		},
+		template: `
+			<div class="tw-bg-gray-50 tw-rounded-md tw-p-6 tw-inline-block">
+				<div style="max-width: 262px;">
+					<KvPieChartV2 v-bind="args" />
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * Component Overview - Key visual variants at a glance.
+ */
+export const ComponentOverview = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return { sampleValues, fewValues, manyValues };
+		},
+		template: `
+			<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">Default (6 items)</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="fewValues" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">Few items</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="manyValues" :shown-segments="5" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">Many items (Other pill)</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="[]" :loading="true" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">Loading skeleton</p>
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * All Variations - Every prop axis shown in organized groups.
+ */
+export const AllVariations = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return {
+				sampleValues, manyValues, customColorValues,
+			};
+		},
+		template: `
+			<div class="tw-space-y-8">
+				<div>
+					<h3 class="tw-text-h4 tw-mb-4">Unit Formats</h3>
+					<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" unit="percent" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">percent</p>
+						</div>
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" unit="amount" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">amount</p>
+						</div>
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" unit="count" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">count</p>
+						</div>
+					</div>
+				</div>
+
+				<div>
+					<h3 class="tw-text-h4 tw-mb-4">Ring Thickness</h3>
+					<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" :stroke-width="24" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">strokeWidth: 24</p>
+						</div>
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" :stroke-width="56" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">strokeWidth: 56 (default)</p>
+						</div>
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" :stroke-width="100" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">strokeWidth: 100</p>
+						</div>
+					</div>
+				</div>
+
+				<div>
+					<h3 class="tw-text-h4 tw-mb-4">Segment Gap</h3>
+					<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" :segment-gap="0" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">segmentGap: 0</p>
+						</div>
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" :segment-gap="2" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">segmentGap: 2 (default)</p>
+						</div>
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="sampleValues" :segment-gap="10" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">segmentGap: 10</p>
+						</div>
+					</div>
+				</div>
+
+				<div>
+					<h3 class="tw-text-h4 tw-mb-4">Data Density</h3>
+					<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="[{ label: 'Total', value: 100 }]" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">Single value</p>
+						</div>
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="manyValues" :shown-segments="4" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">Many values, shownSegments: 4</p>
+						</div>
+						<div style="width: 262px;">
+							<KvPieChartV2 :values="customColorValues" />
+							<p class="tw-text-small tw-mt-2 tw-text-center">Custom color overrides</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * Loading State - Skeleton ring while data is unavailable.
+ */
+export const LoadingState = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		template: `
+			<div class="tw-bg-gray-50 tw-rounded-md tw-p-6 tw-inline-block">
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="[]" :loading="true" />
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * Unit Formats - Side-by-side comparison of the three display modes.
+ */
+export const UnitFormats = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return { sampleValues };
+		},
+		template: `
+			<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" unit="percent" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">percent</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" unit="amount" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">amount</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" unit="count" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">count</p>
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * Ring Thickness - strokeWidth scales inward so outer diameter stays constant.
+ */
+export const RingThickness = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return { sampleValues };
+		},
+		template: `
+			<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :stroke-width="16" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">16 (thin)</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :stroke-width="56" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">56 (default)</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :stroke-width="120" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">120 (thick)</p>
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * Segment Gap - Visual spacing between adjacent segments.
+ */
+export const SegmentGap = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return { sampleValues };
+		},
+		template: `
+			<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :segment-gap="0" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">No gap</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :segment-gap="2" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">2 (default)</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :segment-gap="10" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">10 (wide)</p>
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * Data Density - Single value, few items, and overflow into "Other".
+ */
+export const DataDensity = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return { fewValues, manyValues };
+		},
+		template: `
+			<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="[{ label: 'Total', value: 100 }]" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">Single value</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="fewValues" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">Few items</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="manyValues" :shown-segments="4" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">Many items (click Other)</p>
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * Custom Colors - Partial or full color overrides per item.
+ */
+export const CustomColors = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return { customColorValues };
+		},
+		template: `
+			<div class="tw-bg-gray-50 tw-rounded-md tw-p-6 tw-inline-block">
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="customColorValues" />
+				</div>
+			</div>
+		`,
+	}),
+};
+
+/**
+ * Animation Timing - Initial delay options including no delay.
+ */
+export const AnimationTiming = {
+	render: () => ({
+		components: { KvPieChartV2 },
+		setup() {
+			return { sampleValues };
+		},
+		template: `
+			<div class="tw-flex tw-items-start tw-gap-6 tw-flex-wrap tw-p-6 tw-bg-gray-50 tw-rounded-md">
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :initial-delay="0" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">initialDelay: 0</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :initial-delay="1000" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">initialDelay: 1000 (default)</p>
+				</div>
+				<div style="width: 262px;">
+					<KvPieChartV2 :values="sampleValues" :initial-delay="2500" />
+					<p class="tw-text-small tw-mt-2 tw-text-center tw-text-secondary">initialDelay: 2500</p>
+				</div>
+			</div>
+		`,
+	}),
+};
diff --git a/@kiva/kv-components/src/vue/stories/KvPieChartV2Docs.mdx b/@kiva/kv-components/src/vue/stories/KvPieChartV2Docs.mdx
new file mode 100644
index 00000000..e1389eba
--- /dev/null
+++ b/@kiva/kv-components/src/vue/stories/KvPieChartV2Docs.mdx
@@ -0,0 +1,272 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/addon-docs/blocks';
+import * as KvPieChartV2Stories from './KvPieChartV2.stories.js';
+
+<Meta title="Charts/KvPieChartV2" component={KvPieChartV2Stories.Component} />
+
+# KvPieChartV2
+
+An animated donut chart with an accompanying legend, designed for compact displays of categorical breakdowns with optional overflow into an "Other" lightbox.
+
+## Component Overview
+
+KvPieChartV2 renders a sorted donut chart with one ring segment per data item and a two-column legend of color-coded pills. Segments animate in with a staggered grow effect while their values count up from zero. When the dataset exceeds `shownSegments`, the remaining items collapse into an "Other" segment whose pill opens a lightbox listing every item in descending order.
+
+<Story of={KvPieChartV2Stories.ComponentOverview} />
+
+## Table of Contents
+
+- [Variations](#variations)
+- [Usage Information](#usage-information)
+- [Behavior](#behavior)
+- [Anatomy](#anatomy)
+- [Specs](#specs)
+- [Best Practices](#best-practices)
+- [Accessibility](#accessibility)
+- [Component Properties + Demo](#component-properties)
+- [Code Examples](#code-examples)
+
+---
+
+## Variations
+
+The component exposes several axes of customization:
+
+- **Unit Format**: Display legend values as `percent`, `amount` (with `$` prefix), or raw `count`
+- **Ring Thickness**: `strokeWidth` controls how thick the donut ring is; the radius shrinks as it grows so the outer edge always fits the viewBox
+- **Segment Gap**: `segmentGap` adds visual breathing room between adjacent segments
+- **Segment Cap**: `shownSegments` caps the number of distinct segments before the rest collapse into "Other"
+- **Custom Colors**: Each item can override its assigned palette color via an optional `color` field
+- **Animation Timing**: `initialDelay` postpones the entrance animation; `animateOut` reverses it
+
+<Story of={KvPieChartV2Stories.AllVariations} />
+
+## Usage Information
+
+KvPieChartV2 is intended for compact dashboard tiles, profile cards, and modal panels where a categorical breakdown should feel approachable rather than data-dense. The animated entrance draws attention to the chart on first view, and the "Other" overflow keeps the legend scannable even when the underlying dataset is long.
+
+### When to Use
+
+- To show how a small number of categories add up to a whole (sectors, gender, status, etc.)
+- In compact contexts (~262px wide) where a full chart library would be overkill
+- When animated reveals add value to the experience (e.g., on loan or impact pages)
+- When you want a clickable "Other" affordance for long-tail data
+
+### When Not to Use
+
+- For precise, comparison-heavy data — use a bar chart or table instead
+- For time-series data — use [KvLineGraph](/?path=/docs/charts-kvlinegraph--docs)
+- When the dataset has dozens of equally-weighted categories that resist meaningful collapse
+- For interactive drill-down or hover tooltips — the component is read-only beyond the "Other" lightbox
+
+---
+
+## Behavior
+
+The chart's behavior centers on its entrance animation, the "Other" overflow affordance, and the loading skeleton.
+
+### Loading State
+
+When `loading` is true, the chart renders a neutral gray skeleton ring in place of the segments and hides the legend. This keeps layout stable while data fetches and avoids partial renders. As soon as `loading` flips to false (with `values` present), the entrance animation begins after `initialDelay`.
+
+<Story of={KvPieChartV2Stories.LoadingState} />
+
+### Other Segment Overflow
+
+When the number of items exceeds `shownSegments`, all overflow items are merged into a single gray "Other" segment in the ring and a corresponding "Other" pill in the legend. Clicking the pill opens a lightbox showing **every** item — both visible and collapsed — sorted in descending order with their assigned colors. This lets consumers scan the long tail without inflating the chart itself.
+
+<Story of={KvPieChartV2Stories.DataDensity} />
+
+## Anatomy
+
+The component is composed of:
+
+- **Donut ring**: An SVG with one `<circle>` per visible segment and an optional gray "Other" circle, all rendered with `stroke-dasharray` to control segment length
+- **Skeleton ring**: A neutral gray placeholder circle shown while `loading` is true or when no data is present
+- **Legend grid**: A two-column grid of color-coded pills, each showing the segment label and its animated value
+- **Other pill**: A trigger pill that opens the lightbox when overflow exists
+- **Other lightbox**: A modal listing all items in descending order, rendered via [KvLightbox](/?path=/docs/components-kvlightbox--docs)
+
+---
+
+## Specs
+
+### Ring Thickness
+
+The donut renders inside a fixed `262 × 262` viewBox. The radius is derived from `strokeWidth` so the outer edge always lands on the viewBox boundary — thicker rings grow inward toward center rather than overflowing the SVG. Common values:
+
+- **16-24**: Thin, subtle rings
+- **56** (default): Balanced standard appearance
+- **80-120**: Bold, prominent rings (smaller inner hole)
+
+<Story of={KvPieChartV2Stories.RingThickness} />
+
+### Segment Gap
+
+The `segmentGap` prop subtracts visual length (in SVG user units along the circumference) from each segment so adjacent segments appear separated. A value of `0` produces a continuous ring; the default of `2` matches the design spec; values around `8-10` create distinct "petal" segments.
+
+### Animation Timing
+
+The entrance animation runs in three coordinated phases:
+
+- **Initial delay** (`initialDelay`, default `1000ms`): Wait before any segment animates
+- **Per-segment grow** (500ms): Each segment expands clockwise from its starting angle
+- **Stagger** (500ms): Each segment begins as the previous one completes
+
+Count-up animations on legend pill values run in parallel with their corresponding segment animations using cubic ease-in-out.
+
+---
+
+## Best Practices
+
+<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1.5rem', margin: '2rem 0'}}>
+	<div>
+		<div style={{marginBottom: '0.5rem'}}>
+			<img src="KvPieChartV2/do-limit-segments.png" alt="" style={{borderRadius: '8px'}} />
+		</div>
+		<div style={{fontWeight: 600, marginBottom: '0.5rem', color: '#2e7d32'}}>✓ Do</div>
+		<p style={{fontSize: '0.875rem', margin: 0}}>Cap visible segments at 5–6 with `shownSegments` and let the rest collapse into "Other" so the legend stays scannable.</p>
+	</div>
+
+	<div>
+		<div style={{marginBottom: '0.5rem'}}>
+			<img src="KvPieChartV2/dont-show-too-many.png" alt="" style={{borderRadius: '8px'}} />
+		</div>
+		<div style={{fontWeight: 600, marginBottom: '0.5rem', color: '#c62828'}}>✗ Don't</div>
+		<p style={{fontSize: '0.875rem', margin: 0}}>Render every category as its own segment. Crowded rings make individual slices unreadable and force the legend to grow indefinitely.</p>
+	</div>
+
+	<div>
+		<div style={{marginBottom: '0.5rem'}}>
+			<img src="KvPieChartV2/do-match-unit.png" alt="" style={{borderRadius: '8px'}} />
+		</div>
+		<div style={{fontWeight: 600, marginBottom: '0.5rem', color: '#2e7d32'}}>✓ Do</div>
+		<p style={{fontSize: '0.875rem', margin: 0}}>Pick the `unit` that matches the underlying data: `percent` for share-of-whole, `amount` for currency, `count` for raw tallies.</p>
+	</div>
+
+	<div>
+		<div style={{marginBottom: '0.5rem'}}>
+			<img src="KvPieChartV2/dont-mix-units.png" alt="" style={{borderRadius: '8px'}} />
+		</div>
+		<div style={{fontWeight: 600, marginBottom: '0.5rem', color: '#c62828'}}>✗ Don't</div>
+		<p style={{fontSize: '0.875rem', margin: 0}}>Display amounts as percents (or vice versa) just because it looks tidier. The unit must reflect what the chart actually measures.</p>
+	</div>
+</div>
+
+---
+
+## Accessibility
+
+- The chart `<figure>` carries an `aria-label="Pie chart"` so it is announced as an image to assistive tech
+- The decorative SVG is marked `aria-hidden="true"` since the legend pills carry the same data in textual form
+- The "Other" pill is a real `<button>` with an accessible name, supporting keyboard activation and focus styles
+- The lightbox triggered from "Other" is a focus-trapped dialog (`role="dialog"`) provided by [KvLightbox](/?path=/docs/components-kvlightbox--docs)
+- Segment colors are drawn from the design-system palette to maintain WCAG-friendly contrast against the page background; custom overrides are the consumer's responsibility
+- Animated entrance respects standard motion: pure CSS transitions on stroke offsets and rAF-based count-up, with no parallax or large movement
+
+---
+
+## Component Properties + Demo
+
+<Canvas of={KvPieChartV2Stories.Default} />
+<Controls of={KvPieChartV2Stories.Default} />
+
+---
+
+## Code Examples
+
+### Basic Donut with Percent Legend
+
+```vue
+<template>
+  <div style="width: 262px;">
+    <KvPieChartV2 :values="sectorValues" />
+  </div>
+</template>
+
+<script>
+import { KvPieChartV2 } from '@kiva/kv-components';
+
+export default {
+  components: { KvPieChartV2 },
+  setup() {
+    const sectorValues = [
+      { label: 'Agriculture', value: 28 },
+      { label: 'Eco-friendly', value: 28 },
+      { label: 'Services', value: 17 },
+      { label: 'Water', value: 13 },
+      { label: 'Food', value: 12 },
+      { label: 'Other', value: 5 },
+    ];
+    return { sectorValues };
+  },
+};
+</script>
+```
+
+### Currency Breakdown with Custom Thickness
+
+```vue
+<template>
+  <div style="width: 262px;">
+    <KvPieChartV2
+      :values="spendByCategory"
+      unit="amount"
+      :stroke-width="40"
+      :segment-gap="4"
+    />
+  </div>
+</template>
+
+<script>
+import { KvPieChartV2 } from '@kiva/kv-components';
+
+export default {
+  components: { KvPieChartV2 },
+  setup() {
+    const spendByCategory = [
+      { label: 'Housing', value: 1450 },
+      { label: 'Food', value: 620 },
+      { label: 'Transport', value: 310 },
+      { label: 'Utilities', value: 180 },
+    ];
+    return { spendByCategory };
+  },
+};
+</script>
+```
+
+### Long Dataset with "Other" Overflow
+
+```vue
+<template>
+  <div style="width: 262px;">
+    <KvPieChartV2
+      :values="loansBySector"
+      :shown-segments="5"
+      unit="count"
+    />
+  </div>
+</template>
+
+<script>
+import { KvPieChartV2 } from '@kiva/kv-components';
+
+export default {
+  components: { KvPieChartV2 },
+  setup() {
+    const loansBySector = [
+      { label: 'Food', value: 575 },
+      { label: 'Retail', value: 377 },
+      { label: 'Agriculture', value: 285 },
+      { label: 'Services', value: 211 },
+      { label: 'Clothing', value: 183 },
+      { label: 'Arts', value: 65 },
+      { label: 'Housing', value: 65 },
+      { label: 'Education', value: 36 },
+      { label: 'Construction', value: 28 },
+    ];
+    return { loansBySector };
+  },
+};
+</script>
+```
diff --git a/@kiva/kv-components/tests/unit/.eslintrc b/@kiva/kv-components/tests/unit/.eslintrc
index e0937e02..c419b4c9 100644
--- a/@kiva/kv-components/tests/unit/.eslintrc
+++ b/@kiva/kv-components/tests/unit/.eslintrc
@@ -1,5 +1,8 @@
 {
 	"env": {
 		"jest": true
+	},
+	"rules": {
+		"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
 	}
 }
diff --git a/@kiva/kv-components/tests/unit/specs/components/KvPieChartV2.spec.ts b/@kiva/kv-components/tests/unit/specs/components/KvPieChartV2.spec.ts
new file mode 100644
index 00000000..f4488d6c
--- /dev/null
+++ b/@kiva/kv-components/tests/unit/specs/components/KvPieChartV2.spec.ts
@@ -0,0 +1,174 @@
+import { render, fireEvent } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvPieChartV2 from '#components/KvPieChartV2.vue';
+
+const defaultValues = [
+	{ label: 'Agriculture', value: 28 },
+	{ label: 'Eco-friendly', value: 28 },
+	{ label: 'Services', value: 17 },
+	{ label: 'Water', value: 13 },
+	{ label: 'Food', value: 12 },
+	{ label: 'Other Category', value: 5 },
+];
+
+const manyValues = [
+	{ label: 'Food', value: 575 },
+	{ label: 'Retail', value: 377 },
+	{ label: 'Agriculture', value: 285 },
+	{ label: 'Services', value: 211 },
+	{ label: 'Clothing', value: 183 },
+	{ label: 'Arts', value: 65 },
+	{ label: 'Housing', value: 65 },
+	{ label: 'Education', value: 36 },
+];
+
+describe('KvPieChartV2', () => {
+	it('should have no automated accessibility violations', async () => {
+		const { container } = render(KvPieChartV2, {
+			props: { values: defaultValues, loading: false },
+		});
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+
+	it('renders the correct number of segment circles for given data', () => {
+		const { container } = render(KvPieChartV2, {
+			props: { values: defaultValues, loading: false, shownSegments: 6 },
+		});
+		const segments = container.querySelectorAll('.segment-circle');
+		// 6 items, shownSegments=6 -> 6 segments, no Other
+		expect(segments.length).toBe(6);
+	});
+
+	it('uses default shownSegments of 5, collapsing the 6th item into Other', () => {
+		const { container, getByRole } = render(KvPieChartV2, {
+			props: { values: defaultValues, loading: false },
+		});
+		const segments = container.querySelectorAll('.segment-circle');
+		// 6 items, default shownSegments=5 -> 5 visible + 1 Other = 6 circles
+		expect(segments.length).toBe(6);
+		getByRole('button', { name: /Other/i });
+	});
+
+	it('shows skeleton ring when loading is true', () => {
+		const { container } = render(KvPieChartV2, {
+			props: { values: [], loading: true },
+		});
+		const skeletonRing = container.querySelector('.skeleton-ring');
+		expect(skeletonRing).toBeTruthy();
+	});
+
+	it('does not show legend when loading', () => {
+		const { queryByText } = render(KvPieChartV2, {
+			props: { values: defaultValues, loading: true },
+		});
+		expect(queryByText('Agriculture')).toBeNull();
+	});
+
+	it('respects shownSegments prop and collapses excess into Other', () => {
+		const { container, getByRole } = render(KvPieChartV2, {
+			props: { values: manyValues, loading: false, shownSegments: 4 },
+		});
+		// 4 visible segments + 1 "Other" segment = 5 circles
+		const segments = container.querySelectorAll('.segment-circle');
+		expect(segments.length).toBe(5);
+		// "Other" pill button should be present
+		getByRole('button', { name: /Other/i });
+	});
+
+	it('displays percent unit formatting in lightbox items', async () => {
+		const { getByRole, getAllByRole } = render(KvPieChartV2, {
+			props: {
+				values: [
+					{ label: 'A', value: 80 },
+					{ label: 'B', value: 20 },
+					{ label: 'C', value: 10 },
+				],
+				loading: false,
+				shownSegments: 1,
+				unit: 'percent',
+			},
+		});
+		// Click "Other" pill button to open lightbox with static (non-animated) values
+		const otherButton = getByRole('button', { name: /Other/i });
+		await fireEvent.click(otherButton);
+		// Multiple dialog roles may exist (lightbox + nested); pick the one with content
+		const dialogs = getAllByRole('dialog');
+		const allText = dialogs.map((d) => d.textContent).join('');
+		// Lightbox items use formatItemValue which is not animated
+		expect(allText).toContain('18%'); // 20/110 ≈ 18%
+	});
+
+	it('displays amount unit with dollar prefix in lightbox items', async () => {
+		const { getByRole, getAllByRole } = render(KvPieChartV2, {
+			props: {
+				values: [
+					{ label: 'A', value: 1000 },
+					{ label: 'B', value: 500 },
+				],
+				loading: false,
+				shownSegments: 1,
+				unit: 'amount',
+			},
+		});
+		const otherButton = getByRole('button', { name: /Other/i });
+		await fireEvent.click(otherButton);
+		const allText = getAllByRole('dialog').map((d) => d.textContent).join('');
+		expect(allText).toContain('$500');
+	});
+
+	it('displays count unit as raw number in lightbox items', async () => {
+		const { getByRole, getAllByRole } = render(KvPieChartV2, {
+			props: {
+				values: [
+					{ label: 'A', value: 80 },
+					{ label: 'B', value: 42 },
+				],
+				loading: false,
+				shownSegments: 1,
+				unit: 'count',
+			},
+		});
+		const otherButton = getByRole('button', { name: /Other/i });
+		await fireEvent.click(otherButton);
+		const allText = getAllByRole('dialog').map((d) => d.textContent).join('');
+		expect(allText).toContain('42');
+	});
+
+	it('applies custom colors when provided', () => {
+		const { container } = render(KvPieChartV2, {
+			props: {
+				values: [{ label: 'Custom', value: 100, color: '#FF0000' }],
+				loading: false,
+			},
+		});
+		const segment = container.querySelector('.segment-circle');
+		expect(segment?.getAttribute('stroke')).toBe('#FF0000');
+	});
+
+	it('shows Other pill when data exceeds shownSegments', () => {
+		const { getByRole } = render(KvPieChartV2, {
+			props: { values: manyValues, loading: false, shownSegments: 4 },
+		});
+		const otherButton = getByRole('button', { name: /Other/i });
+		expect(otherButton).toBeTruthy();
+	});
+
+	it('opens lightbox when Other pill is clicked', async () => {
+		const { getByRole } = render(KvPieChartV2, {
+			props: { values: manyValues, loading: false, shownSegments: 4 },
+		});
+		const otherButton = getByRole('button', { name: /Other/i });
+		await fireEvent.click(otherButton);
+		// Lightbox should have role="dialog"
+		getByRole('dialog');
+	});
+
+	it('renders no segments when values is empty', () => {
+		const { container } = render(KvPieChartV2, {
+			props: { values: [], loading: false },
+		});
+		const segments = container.querySelectorAll('.segment-circle');
+		expect(segments.length).toBe(0);
+	});
+});
diff --git a/@kiva/kv-components/tests/unit/specs/utils/pieChartColors.spec.ts b/@kiva/kv-components/tests/unit/specs/utils/pieChartColors.spec.ts
new file mode 100644
index 00000000..143b5e31
--- /dev/null
+++ b/@kiva/kv-components/tests/unit/specs/utils/pieChartColors.spec.ts
@@ -0,0 +1,50 @@
+import { PIE_CHART_COLORS, getPieChartColor } from '#utils/pieChartColors';
+
+describe('pieChartColors', () => {
+	describe('PIE_CHART_COLORS', () => {
+		it('should have 14 colors in the palette', () => {
+			expect(PIE_CHART_COLORS).toHaveLength(14);
+		});
+
+		it('should have tier 1 bold colors first', () => {
+			expect(PIE_CHART_COLORS[0]).toBe('#276A43'); // eco-green-3
+			expect(PIE_CHART_COLORS[1]).toBe('#F4B539'); // marigold
+			expect(PIE_CHART_COLORS[2]).toBe('#C45F4F'); // desert-rose
+			expect(PIE_CHART_COLORS[3]).toBe('#2E3BAD'); // custom blue
+			expect(PIE_CHART_COLORS[4]).toBe('#874FFF'); // custom purple
+			expect(PIE_CHART_COLORS[5]).toBe('#635544'); // stone-3
+			expect(PIE_CHART_COLORS[6]).toBe('#4AB67E'); // brand-500
+			expect(PIE_CHART_COLORS[7]).toBe('#996210'); // marigold-3
+		});
+
+		it('should have tier 2 lighter colors after', () => {
+			expect(PIE_CHART_COLORS[8]).toBe('#78C79F'); // eco-green-2
+			expect(PIE_CHART_COLORS[9]).toBe('#F8CD69'); // marigold-2
+			expect(PIE_CHART_COLORS[10]).toBe('#E0988D'); // desert-rose-2
+			expect(PIE_CHART_COLORS[11]).toBe('#AA9E8D'); // stone-2
+			expect(PIE_CHART_COLORS[12]).toBe('#95D4B3'); // brand-300
+			expect(PIE_CHART_COLORS[13]).toBe('#A24536'); // desert-rose-3
+		});
+	});
+
+	describe('getPieChartColor', () => {
+		it('should return the color at the given index', () => {
+			expect(getPieChartColor(0)).toBe('#276A43');
+			expect(getPieChartColor(7)).toBe('#996210');
+		});
+
+		it('should cycle colors when index exceeds palette length', () => {
+			expect(getPieChartColor(14)).toBe('#276A43'); // wraps to index 0
+			expect(getPieChartColor(15)).toBe('#F4B539'); // wraps to index 1
+			expect(getPieChartColor(28)).toBe('#276A43'); // wraps twice
+		});
+
+		it('should return the custom color when provided', () => {
+			expect(getPieChartColor(0, '#FF0000')).toBe('#FF0000');
+		});
+
+		it('should use palette color when custom color is undefined', () => {
+			expect(getPieChartColor(0, undefined)).toBe('#276A43');
+		});
+	});
+});
diff --git a/@kiva/kv-components/tests/unit/specs/utils/useCountUp.spec.ts b/@kiva/kv-components/tests/unit/specs/utils/useCountUp.spec.ts
new file mode 100644
index 00000000..ff6f861c
--- /dev/null
+++ b/@kiva/kv-components/tests/unit/specs/utils/useCountUp.spec.ts
@@ -0,0 +1,110 @@
+import {
+	createApp,
+	defineComponent,
+	h,
+	ref,
+	nextTick,
+	type App,
+} from 'vue';
+import { useCountUp } from '#utils/useCountUp';
+
+// Run a composable inside a real component instance so lifecycle hooks
+// (onUnmounted, etc.) attach to an active instance instead of warning.
+function withSetup<T>(composable: () => T): { result: T; app: App } {
+	let result!: T;
+	const app = createApp(defineComponent({
+		setup() {
+			result = composable();
+			return () => h('div');
+		},
+	}));
+	app.mount(document.createElement('div'));
+	return { result, app };
+}
+
+let rafCallbacks: Array<(ts: number) => void> = [];
+let rafId = 0;
+
+beforeEach(() => {
+	rafCallbacks = [];
+	rafId = 0;
+	jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+		rafId += 1;
+		rafCallbacks.push(cb);
+		return rafId;
+	});
+	jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+});
+
+afterEach(() => {
+	jest.restoreAllMocks();
+});
+
+function flushRaf(frames: number, startTime = 0, timeStep = 100) {
+	for (let i = 0; i < frames; i += 1) {
+		const cbs = [...rafCallbacks];
+		rafCallbacks = [];
+		cbs.forEach((cb) => cb(startTime + i * timeStep));
+	}
+}
+
+describe('useCountUp', () => {
+	it('should return 0 when not active', () => {
+		const target = ref(100);
+		const active = ref(false);
+		const { result: { displayValue }, app } = withSetup(() => useCountUp(target, active));
+		expect(displayValue.value).toBe(0);
+		app.unmount();
+	});
+
+	it('should start animation when active becomes true', async () => {
+		const target = ref(50);
+		const active = ref(false);
+		const { app } = withSetup(() => useCountUp(target, active, 500));
+
+		active.value = true;
+		await nextTick();
+
+		// rAF should have been requested
+		expect(window.requestAnimationFrame).toHaveBeenCalled();
+		app.unmount();
+	});
+
+	it('should reach the target value when animation completes', async () => {
+		const target = ref(100);
+		const active = ref(false);
+		const { result: { displayValue }, app } = withSetup(() => useCountUp(target, active, 500));
+
+		active.value = true;
+		await nextTick();
+
+		// Simulate enough frames to complete the animation (duration = 500ms)
+		flushRaf(1, 0); // first frame sets start time
+		flushRaf(1, 600); // second frame at t=600ms > duration, progress = 1
+
+		expect(displayValue.value).toBe(100);
+		app.unmount();
+	});
+
+	it('should animate back to 0 when active becomes false', async () => {
+		const target = ref(50);
+		const active = ref(true);
+		const { result: { displayValue }, app } = withSetup(() => useCountUp(target, active, 500));
+
+		await nextTick();
+		// Complete the animation forward
+		flushRaf(1, 0);
+		flushRaf(1, 600);
+		expect(displayValue.value).toBe(50);
+
+		// Now deactivate
+		active.value = false;
+		await nextTick();
+
+		// Complete the animation back to 0
+		flushRaf(1, 0);
+		flushRaf(1, 600);
+		expect(displayValue.value).toBe(0);
+		app.unmount();
+	});
+});