feat(ProgressGroup): new component

[IgorShevchik]

Port of nuxt/ui@14ac2438 (nuxt/ui#6860). Last of six in the queue, after #442.

Two things at once: a new component, and a fix to the existing Progress that stands on its own.

Half one — the Progress fix

statusStyle wrote the size inline:

{ [orientation === 'vertical' ? 'height' : 'width']: `${percent}%` }

An inline style beats any class, so b24ui.status could not change the size — the override was accepted and silently ignored. It moves to a CSS variable the theme reads: w-(--percent) horizontally, h-(--percent) vertically, with transition-[width]/transition-[height] moved out of the base slot to match.

This fork's statusStyle was not upstream's. Ours falls back to fit-content when there is no percent; upstream has no fallback. It survives the move because w-(--percent) emits width: var(--percent) whatever the value is — but nothing tested it, so ['with status at zero', …] is new. Mutation-verified: replacing the fallback with ${percent ?? 0}% fails that case and only that case.

The commit's progress.md changes come too — the note pointing at ProgressGroup, and the tip about :b24ui="{ status: 'w-full' }", which is exactly what this change makes possible.

Half two — the component

Adopted by decision, as with Splitter.

The colour mechanism is an adaptation, not a translation

Upstream colours the indicator directly: indicator: bg-${color}. Here a colour is a style-* class that defines --b24ui-background, which the indicator reads — Progress puts that class on root.

A group needs a colour per segment, so the class moves down one level: onto segment, and onto the legend's itemLeadingDot and itemLeadingIcon, each reading the variable it defines.

Checked in the rendered output rather than the source:

data-slot="segment"         class="… style-filled-alert"
data-slot="indicator"       class="size-full bg-(--b24ui-background)"
data-slot="itemLeadingDot"  class="… style-filled-warning bg-(--b24ui-background) size-2"

Arbitrary CSS colours: deliberately not taken

Upstream widens color to (string & {}) and applies an off-palette value inline. Removed here along with the themeColors/customColors computeds it needs, its tip in progress.md, and ProgressGroupCustomColorExample.

Two reasons, both recorded when the decision was taken: the mechanism keys off bg-${color} on the indicator, which is not how this fork colours anything; and (string & {}) for a colour would be the library's first — the pattern exists here only for target, rel and slot names.

One difference a reader will notice

The leading icon renders data-slot="icon", not data-slot="itemLeadingIcon". That is not this component: b24icons set data-slot="icon" on their own root and shadow whatever is passed. Uniform across the fork — 6672 occurrences in the snapshots and zero component-specific icon slots, Accordion included. The class still arrives, which is what carries the colour.

Not ported

• docs/public/components/{light,dark}/progress-group.png — a preview grid this fork does not have.
• ComponentProps.vue / ComponentPropsSchema.vue — upstream's docs plumbing for the (string & {}) colour type, which is not here.

Verify (CI=true)

dev:prepare (all four apps) · lint · typecheck · test · build · docs:generate — all green. Tests 6790 passed | 6 skipped across 298 files.

52 snapshots written for ProgressGroup, 8 moved for Progress. docs:generate prerenders 1255 routes, up from 1248 — the page and its two examples build and render.

Ledger

2beb2345 and a630c943 reconciled with #442 and squash b6252d89. cursor → 14ac2438, entry and log added, .sync/dep-parity.json refreshed.

This closes the queue: cursor reaches nuxt/ui@v4 HEAD as of this run. A bookkeeping PR follows to fill in this entry's own pr/b24ui_sha.

---

Generated by Claude Code