feat(Progress): add circular variant

[aovee]

🔗 Linked issue

Resolves #6151

Note

Opening as a draft: implementation is ready for review, documentation is still WIP.

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Adds circular progress support to UProgress as a variant rather than a separate UCircularProgress component, as suggested in the issue. This keeps a single API surface and lets the existing color, size, animation, inverted, status and orientation props carry over.

<UProgress variant="circular" :model-value="75" status />

What's included

• variant prop — linear (default) or circular. Defaults preserve current behaviour, so this is non-breaking.
• SVG-based rendering — the circular variant renders a <circle> track plus a ProgressIndicator circle with pathLength="100", driven by stroke-dasharray. A new track slot is exposed for the background circle.
• thickness prop — auto (default) derives the stroke width from size, or pass a number of pixels. Both go through the --ui-progress-thickness CSS variable, which also drives the radius (r: calc(50px - thickness / 2)) so the stroke never overflows the viewBox.
• Sizes — 2xs → 2xl map to both a diameter and a default thickness.
• Status — for the circular variant the status slot is rendered centered inside the circle instead of above/beside the bar.
• Indeterminate — all four animation values (carousel, carousel-inverse, swing, elastic) have circular equivalents, added as new keyframes in keyframes.css.
• inverted — flips the sweep direction of the circle.

Theme refactor

The progress theme has been reorganised so most existing orientation/size/animation compound variants are now scoped under variant: 'linear', with variant: 'circular' counterparts added. Some slot classes moved from slots into the linear variant (e.g. overflow-hidden rounded-full bg-accented on base). Rendered output for the default linear variant is unchanged apart from class ordering — snapshots were updated accordingly (Progress, and Toast which embeds a progress bar).

Playground

playgrounds/nuxt/app/pages/components/progress.vue now exercises the circular variant across sizes, colors, animations and a custom thickness.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6747

commit: 187e8e7