Department Setup Onboarding Block for Svelte

So nothing moves. Remove turns the row into “Design removed.” with an Undo button inside the same 56-pixel row, and focus goes to that button. Undo brings the department back and focus returns to its pencil. A removed row does not count: the total drops at once. Adding a department when the list is full lets the oldest removed row go.

An empty name, a name that is already there (capitals aside), and more than eight rows. Typing the name of a removed department brings it back instead of adding a copy. Each refusal is said under the field, in a slot that is always reserved, and in the status. Names stop at 28 characters.

They are typed: the three starting departments carry 12, 5 and 4 people, and the typical ones carry example counts. A department you type yourself starts with “No people yet”. The total is worked out from the rows that are kept, so it is never typed twice.

Enter in the name field adds the department without sending the step. Each row's pencil opens its name: Enter keeps it and Escape puts the old one back. Remove and Undo are named for the department (“Remove Design”). The list is a region of fixed height that scrolls when it is full.

Everything. The departments and their counts live in the tab and Continue only says “Saved in this demo. Nothing was stored.” In your app create the departments where submit says so, and take the people counts from your directory.

The same, in one column: the heading's sentence is kept for screen readers only, the list keeps its height and scrolls, and Continue pins to the foot of the screen with Skip for now beside it.