Team and roles

Datasheet

Mechanism

Role select per row, Two step state, Pending invite resend, Search and filter toolbar, Bulk bar, Row menu, Invite dialog validation, Role capabilities checklist, Phone cards, Keyboard range selection, Finish following, Quiet volume

Stack

Vanilla ES modules, CSS

Needs

Nothing, no dependencies

States

11 documented

Version

0.1.0

Licence

With a Pass

States

1. At restThe page head with the title, the seats used, the lead and the Invite key; the People panel with its toolbar, five rows, pagination and the roles legend beside it. Nothing runs.
2. Invite dialogThe Invite key opens a native dialog: Email (placeholder name@studio.com), Role at Member, the line that explains the role, and the read-only checklist that follows the role. Cancel is flat; Send invite is the contrast key. Focus starts in the Email field.
3. Already on the teamAn active member’s address, for example priya@halden.studio, puts That email is already on the team. in the field’s hint, marks the field in error and leaves the focus in the field. The dialog stays open.
4. Invite sentSending to nia@halden.studio closes the dialog, shows the toast Invite sent to nia@halden.studio., and puts her row at Invited just now. A new address is added as a row in the same state.
5. Selected rowsSpace checks a row, Shift+Space extends the range from the last row checked, and the header key selects every row in view. The bulk bar slides up from the foot of the panel with 2 people selected and the keys Change role, Resend invite, Remove and Clear. Escape or Clear releases the rows.
6. LoadingThe avatar and name print; the role, state, two-step and action cells are skeleton bars. The toolbar is inert. Nothing else runs.
7. EmptyNo one else yet, the sentence Invite the first person, and the roles legend shows under it., and one contrast key, Invite someone. The roles legend moves under the empty state.
8. PhoneUnder 700px the table is one card per person: check key, avatar, name, email, menu key, a full-width role select, then the state and the two-step state. The page head keeps the title and an icon Invite key; the bulk bar pins above the home indicator.
9. KeyboardSpace checks a row, Shift+Space extends the range, the header key selects all. The role select opens with Alt+Down (the platform’s own select). Escape closes the invite dialog and returns the focus to the Invite key; Escape in the bulk bar releases the rows and returns the focus to the table.
10. Reduced motionThe bulk bar appears in place; the dialog changes at once; nothing else moves.
11. Finishes and volumeEvery surface and lamp reads the kit’s tokens, so all twelve finishes follow. The screen is set in the Quiet volume; its parts keep their sizes and draw hairlines and a whisper of depth.