capacity-plan

Overview

The <capacity-plan> stitches the planning chain together visibly. It reads three numbers — capacity from a paired <iron-triangle>, quality spend from a paired <quality-target>, and feature spend from slotted elements with data-capacity-cost — and renders a four-row ledger with proportional bars: capacity vs quality vs features vs slack.

It's the answer to "where did my capacity go?" Without it, the chain is implicit; with it, the math is the first thing the team sees on the requirements page.

Live demo

Edit the iron-triangle inputs to grow capacity. Pick quality priorities to spend it. The ledger rebalances live; the slack row turns red when overdrawn.

The arithmetic

Plain subtraction:

When capacityPoints is unbounded (no triangle bound and no data-capacity-points on the target), slack is reported as ∞ and the bar visualization scales against actual spend.

Two ways to supply feature spend

The component sums any descendant element with data-capacity-cost="N". Authors typically slot <work-item> children:

For server-rendered planning surfaces or programmatic flows, set featureSum directly:

Property override wins over slot inference. Mutation observation: changes to slotted children's data-capacity-cost trigger a re-render automatically.

Attributes

Properties & events

Theme tokens