Stepper - Circular appears at the top of multi-step flows (onboarding, KYC, form wizards) to show position and total count. Consumers pair it with a screen title and step-specific content.

• Step count is modeled as 9 sibling components instead of a steps prop. Today the family ships as Stepper - Circular - 2 Steps, … - 3 Steps, … … - 10 Steps — 9 top-level components that differ only by hardcoded count. Every other design system exposes one Stepper with steps: Int (or total: Int + current: Int). 9× maintenance, 9× Code Connect mapping, and no path to N=11+ without adding a 10th file. C1 · Layer Structure & Naming
• Step ring arcs are pre-rendered raster <img> assets, one per step index. Each number=N symbol's ring is a baked PNG — the progressive fill is achieved by image swap, not by math. Blocks theming (can't retint), breaks at high DPI, and ships dozens of assets the native renderer doesn't need. Should be a stroked SVG arc with strokeDasharray (or Circle().trim(from:to:) on iOS, drawArc on Compose). C6 · Asset & Icon Quality
• Variant axis number encodes position, not a property. The inner symbol uses number = 1 | 2 | … | N which both labels the circle (the displayed digit) and implicitly sets the ring-arc raster. Two concerns collapsed into one enum. Should be: index: Int (the number shown) and status: completed | current | upcoming (the visual). C2 · Variant & Property Naming
• No native primitive is a 1:1 match — this needs a custom component. SwiftUI has no built-in circular stepper; Material 3 shows only a linear Stepper. Both platforms require a custom EBStepperCircular built from a Row/HStack of Circle/Box shapes with arc-drawn progress. Today's raster baking makes this worse — the dev can't reuse the asset. C4 · Native Mappability
• No pressed / focused / disabled state modeled. Wizards often allow tapping a completed step to return to it. With no interaction states in Figma, the developer has to invent hover / pressed treatment and the designer has no reference. C5 · Interaction State Coverage
• Code Connect mappings not registered. Blocked until the family collapses to one component and the raster arcs are replaced with vector strokes. Mapping 9 separate siblings would codify the anti-pattern into the tooling. C7 · Code Connect Linkability

• Collapse all 9 siblings into one Stepper - Circular with steps and current properties. Delete Stepper - Circular - 2 Steps through … - 10 Steps as separate components. Create one Stepper - Circular with steps: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 (enum) and current: 1 | 2 | … | 10 — or, if Figma supports integer ranges, a numeric property. Variant math drops from 9 top-level components × ~10 step symbols = ~90 variant assets to 1 component with a runtime-computed arc. Native API: EBStepperCircular(current: Int, total: Int). Family
• Split the inner symbol's number axis into index (digit shown) and status (ring treatment). Today one enum does both. Separate them: index: Int for the label text and status: completed | current | upcoming for the ring fill. The outer component then computes status per slot from current. Property
• Replace raster ring arcs with stroked SVG / vector arcs. Each step circle's ring should be a 2-px stroked circle with stroke-dasharray (or two half-circles via trim). Colors bound to main/stepper/color/bg-track (unfilled) and main/stepper/color/bg (filled). Same visual output, theme-able, resolution-independent, no PNG assets. Asset
• Add a completed visual state with a checkmark icon option. Many wizards replace the digit with a check once a step is done. Today there's no variant for this — everything shows a number. Add showCheckOnComplete: Bool (or model it into the status enum as completed-check). State
• Add an orientation property for vertical layouts. Long flows (8+ steps) don't fit a phone-width row. Vertical stacks are common for checkout or document review wizards. Add orientation: horizontal | vertical and spec the connector line between circles for both axes. Property
• Spec a connector line between circles. Today the 9 sibling frames space circles with a 20-px gap but no visible connector. Most steppers draw a line from the trailing edge of one circle to the leading edge of the next, tinted to match completed (brand) vs upcoming (track) states. Add this to the spec — it's the difference between "a row of circles" and "a stepper". Property
• Rename layers step-container → Ring (and the ring arc layer → Arc). "step-container" is a technical label; "Ring" is what a designer or developer searches for. Rename
• Build as a custom native component, not a ProgressView wrapper. Neither SwiftUI ProgressView nor Material LinearProgressIndicator visually match this pattern. Ship a dedicated EBStepperCircular: iOS uses an HStack of ZStack { Circle().stroke(track); Circle().trim(from:0,to:progress).stroke(fill); Text(index) }; Android uses a Row of Box(Modifier.size(45.dp)) with Canvas drawing drawArc(sweepAngle = progress * 360f). Composition
• Announce "Step X of Y" to screen readers. The component is decorative by default — assistive tech reads only the number. Wrap in a semantic container that announces "Step \(current) of \(total)" (SwiftUI .accessibilityLabel, Compose Modifier.semantics { contentDescription = … }). A11y
• Document the canonical composition and retire the sibling names. Update the sticker sheet page to show one Stepper - Circular with property controls; add a migration note pointing Stepper - Circular - N Steps consumers to the new steps prop. Docs