Owner chip

Avatar and name for a person, agent or team.

<mm-owner-chip name="Jane Doe" href="/people/jane-doe" hover-card job-title="Analytics engineer"></mm-owner-chip>
<mm-owner-chip name="support-triage-agent" kind="agent" service-account="svc-support"></mm-owner-chip>
<mm-owner-chip name="Analytics Engineering" kind="team" removable></mm-owner-chip>

Guidance

An owner chip names who owns or did something: a person, an agent or a team, as an avatar and a name. Agents are shown by the robot avatar and teams by the group avatar, with the kind word ("Agent", "Team") given to screen readers only: there is no "AGENT" text tag. Agents may show the service account they run as, after the name in a quiet caption. The difference is always an icon (and, for assistive technology, a word), never the avatar tint alone.

By default it is plain inline content with no box: an owner appears in table cells, feed rows and page headers, and a filled chip in every row would be chrome competing with the data (structure felt, not seen). radius-full is reserved for avatars and pills, so when the owner is being edited (removable), it becomes a radius-sm chip on mm-sunken like a tag, so the remove button visibly belongs to it.

With href, the name is a link in ink with an underline on hover and focus, never burnt sienna: links in rows, tables and cards are ink. With hover-card as well, people and agents get an mm-person-card preview after 300ms. The remove button is named "Remove Jane Doe", fires mm-remove on click, Enter, Space, Delete or Backspace, and never removes the chip itself: move focus to a sensible neighbour when you remove it.

Properties

Property	Attribute	Type	Default	Description
name	name	string	''	The person's name, the agent's identifier or the team's name.
kind	kind	AvatarKind	'person'	person (default), agent or team.
src	src	string	''	Photo URL for people.
href	href	string	''	Links the name to the profile, agent or team page.
serviceAccount	service-account	string	''	For agents: the service account it runs as, such as svc-support, shown as a quiet caption.
avatarSize	avatar-size	20 | 24	20	Avatar size: 20 (default) or 24.
removable	removable	boolean	false	Shows a remove button and draws the chip as a box, for editing owners.
hoverCard	hover-card	boolean	false	With href, previews people and agents in an mm-person-card on hover and focus.
jobTitle	job-title	string	''	Job title for the hover card.
team	team	string	''	Team (or, for agents, the owning team) for the hover card.
email	email	string	''	Email for the hover card.

Events

Event	Detail	Description
mm-remove	CustomEvent<OwnerRemoveDetail>	The remove button was activated. Cancelable.

CSS parts

Part	Description
chip	The wrapper (the box when removable).
avatar	The mm-avatar.
name	The name, a link with href.
kind	The "Agent" or "Team" word, visually hidden.
service-account	The service account caption.
remove	The remove button.

Examples

Every state of mm-owner-chip in Storybook, with keyboard and screen reader tests.