## When to use

Funnel charts ship with a lot of visual baggage (trapezoidal segments, angled labels) that don't compose well inside a card. A stack of labeled progress rows reads clearer, hits the same "big → small" shape, and stays accessible: every step is a real DOM element with a percentage. Use this whenever a user needs to see sequential drop-off — onboarding, checkout, activation, paywall.

## Four-step funnel

Top step is an explicit 100% baseline (no progress bar — it's the anchor). Subsequent steps use `progress-row-ui` with the count + percentage in the meta slot.

### Conversion funnel

Visit → Sign up → Activate → Convert
Visited landing page 28,432 visitors 100%

## With segment comparison

Pair the funnel card with a segmented control in `slot="action"` so users can switch between cohorts (e.g. new-vs-returning, mobile-vs-desktop). Swap the `value` + `meta` attributes in setup.js on segment change.

### Checkout funnel

Last 30 days · by first-time vs returning
Cart viewed 42,180 sessions 100%

## Wide summary with step-over-step delta

For board reporting, combine the funnel with a step-over-step delta column so stakeholders can see exactly where the biggest drop-off happens. Delta is a `badge-ui` colored by severity.

### Signup funnel

Step-over-step conversion, last 7 days
Signup form viewed 8,420 visitors 100%

## Variants & knobs

- Step count. Keep to 3–6 steps. Beyond 6 the drop-off numbers lose impact; split into nested funnels.
- Top-row value. Always show the absolute count next to a 100% label — it anchors every subsequent percentage.
- Meta format. `meta="count · percent"` is the canonical order. Count first reads as data, percent second reads as insight.
- Color coding. Don't tint the progress bars by drop-off severity — it implies "bad" for inherently-lossy funnels. Use a neutral progress color and let the numbers speak.
- Delta column (optional). When step-over-step matters more than overall conversion, add a `badge-ui` in a sibling column: `warning` for 20–40% drop, `danger` above 40%.

## Anti-patterns

- Don't use a trapezoidal funnel SVG. The angled geometry burns horizontal space, makes labels hard to align, and provides no precision benefit over a stacked progress pattern.
- Don't fill the bar for step 1. 100% is the anchor, not data. Render it as a plain row so step 2 becomes the first visible drop.
- Don't encode drop-off in bar color alone. CVD users can't distinguish severities by hue — always pair with a numeric badge or explicit text.

## Authoring rules

- Steps must be ordered by drop-off severity — widest bar at top (entry), narrowest at bottom (conversion). Do not reorder steps for aesthetic reasons.
- Label every step with the action, not the state. "Started checkout" not "Checkout". The label describes what the user did to enter this stage.
- Always show the percentage alongside the absolute count — absolute numbers without percentages hide relative drop-off; percentages without absolutes hide scale.
- Use `chart-in-card` pattern for standalone KPI surfaces, not `conversion-funnel`. Funnels require at least 3 sequential stages and a meaningful conversion event.