Form Repeater
A list of items people add to and remove, each a row of fields: members, line items, links. Items are ordinary Fields in a .canon-repeater, written once: Add copies the first item, empty, and numbers it. The Add and Remove buttons name the repeater with commandfor (command="--canon-add", "--canon-remove"), and canon.js does the rest. Without JavaScript the items the page starts with are an ordinary form. Specification: docs/components/form-repeater.md
Items
Each item is a row of Fields and a Remove button. The labels show over the first item, as column headers; later items keep theirs for screen readers, so each control is still named. Add copies the first item, empty, with the next number in its ids and names (team-0-name becomes team-3-name, team[0][name] team[3][name]), and moves focus into it. Remove shows once there is more than one item.
Limit
data-max on the repeater: the most items. Once there are that many, Add disappears; it comes back when an item is removed. Say the limit in the description, so people know before they reach it.
Fewest items
data-min: the fewest items, 1 by default (Remove is hidden while there are that many). With data-min="0" every item can go, leaving the Add button. A list that can start empty has no item to copy, so it gives one in a <template>, with {index} where the number goes: id="none-{index}-team", name="none[{index}][team]".
Without labels
Labels are optional: put the boxes in the item without a Field, each control named by aria-label, and there are no column headers. For lists whose columns explain themselves, or that sit under a heading saying what they hold.
Columns
Columns share the width equally. --canon-repeater-columns on the repeater sets them like grid-template-columns, one per Field: here the team is narrower than the name. It is layout, set wherever the page sets its layout.
Messages
Each Field keeps its message under its box. The boxes and Remove buttons stay in line whatever is above or below them.
Size
data-size on the repeater or a container sizes the Fields and buttons, and the spaces between items.
Edge cases
A disabled fieldset disables every control in it, the buttons too.