feat(Timeline): cascade color to indicator Avatar

[IgorShevchik]

Summary

• The existing top-level color prop on B24Timeline now also tints the indicator B24Avatar of every item.
• Explicit item.avatar.color still wins, since v-bind="item.avatar" is applied after :color="props.color".
• Timeline.variants.color is a strict subset of AvatarProps['color'] (only air-primary*), so the binding casts to the Avatar color type at the template site. No API change, no theme change.
• Existing renders with air-primary color correctly snapshot is updated: the indicator span now renders style-filled instead of style-outline-no-accent.
• New renders with color and avatar correctly snapshot witnesses the cascade with avatar items.

Follow-up to #24 (Avatar/AvatarGroup color), #27 (User), #28 (ChatMessage), #29 (Alert), #30 (Toast).

Test plan

• pnpm run lint passes
• pnpm run typecheck passes
• pnpm run test passes — Timeline snapshots witness the cascade
• Open docs page → Timeline → Color section, verify indicators tint
• Verify explicit item.avatar.color overrides the cascade

🤖 Generated with Claude Code

[IgorShevchik]

Closing this. It belongs with #29 (Alert) and #30 (Toast) — a container-level cascade — and it has one problem those two do not: it does not add a colour to the indicator, it removes a distinction the theme already makes.

The indicator is already coloured by the timeline, per state. src/theme/timeline.ts:13 defines the slot as:

group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description
group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)

The colour variant writes style-filled* to root, which defines those custom properties, and the indicator inherits them — the same mechanism by which the leading icon in Alert takes the alert's colour. Note the two different backgrounds: --b24ui-background for completed, --b24ui-background-active for active.

Binding :color="props.color" on the B24Avatar makes the avatar emit its own style-* class, which defines --b24ui-background locally on the indicator. The per-state rules then all resolve against the same local value, so completed, active and default paint identically. The states stop being distinguishable.

It also changes what existing code renders. git diff --numstat against the branch gives 49 / 4 on test/components/__snapshots__/Timeline.spec.ts.snap, and the four deletions are not context — they are inside the live renders with air-primary color correctly entry, where three indicators lose style-outline-no-accent and gain style-filled. Anyone already using <B24Timeline color="air-primary-*"> sees a different timeline.

And, as with Toast, there is no non-filled colour to fall back on. src/theme/timeline.ts offers five keys, all air-primary*, all resolving to a style-filled* class on the root.

Upstream does not do this either — nuxt/ui's Timeline binds no colour onto the indicator avatar (cursor 2b29c33).

If the indicator's colouring is genuinely wrong for some state today, that is a fix in src/theme/timeline.ts, where the state rules live — not a prop passed into B24Avatar that overrides them.

Of this series, #27 is the one that landed: User got a color prop, and User, Error and ChatMessage were fixed to keep the cascade when avatar.color is present but undefined. Those three put the avatar on a neutral surface, where tinting makes it stand out rather than collapse into its container.

Nothing was committed while investigating.

---

Generated by Claude Code