Tab

The title, which is also the start of the accessible name.

The glyph before the title; none when not bound.

Whether the tab is the selected one, which is highlighted and in the tab order; false when not bound.

Whether the tab is a preview, which the next preview replaces; it shows in italics and assistive technology describes it as a preview. False when not bound.

Whether the tab's content is busy, which shows a spinner where the close button is, or before the title with TabComponent.leadingSpinner, and marks the tab busy; false when not bound.

Whether the tab waits for the person, for example for an approval, which shows a raised hand in the spinner's place and at its size, and adds "waiting for your answer" to the end of the accessible name. It wins over TabComponent.working: the hand shows instead of the spinner and the tab is not marked busy. As while working, the close button takes the hand's place on hover and focus, and a tab that can't close keeps the hand. False when not bound.

Whether the person can close the tab, which shows its close button; true when not bound.

What the badge means, which the accessible name includes after the title and any status, marker and underline, or null for no badge; null when not bound.

The count the badge shows, or null for a dot; shown only with a TabComponent.badge. Null when not bound.

The address of a small image before the title, such as a site's icon, 0.875rem square with 0.1875rem corners and never stretched, in place of TabComponent.icon; null when not bound. It shows once it has loaded; TabComponent.imageGlyph stands in its place before then, after it fails, and in forced colors.

The glyph in the image's place, such as public, while there is no image, while it loads, after it fails to load, and in forced colors, 0.875rem in the icon color; null when not bound, which shows public for an image and nothing without one.

A status glyph in the image's place, colored by its tone, whose description the accessible name includes after the title; null when not bound.

Whether a working tab shows its spinner before the title, 0.75rem with a 1.5px stroke, in place of its image, status or icon, and keeps its close button at the end, as it is when not working; false when not bound, which keeps the spinner at the end. The waiting hand still wins.

A glyph before everything else, in the accent color, with its own tooltip, whose label the accessible name includes after the status's description; null when not bound.

What the accent underline means, such as "A teammate is using this page": set, the tab draws a 2px accent line inside its bottom edge, in the highlight color under forced colors, and the accessible name includes it after the marker's label and before the badge; null when not bound.

Whether the title is being edited in place: set, the label becomes the kit's text field, named "Tab title", on the label's own box, so its text starts where the label's text started and the tab, its icon, badge and close button keep their size and place. The field starts with the current title, focused and selected; a title changed meanwhile never overwrites what is typed, and the field's keys and clicks never activate or close the tab. The owner sets it back to false when TabComponent.labelKept or TabComponent.labelCancelled emits, which restores the label and, when the field had the focus, gives it back to the tab. False when not bound.

Emits when the person activates the tab; the owner selects it.

Emits when the person closes a closable tab; the owner removes it.

Emits the field's trimmed text, possibly empty, when the person presses Enter or the field loses the focus while editing; the owner decides what the text means and leaves the mode. Emits at most once per editing session, and not for an Enter that ends a composition.

Emits when the person presses Escape while editing; the owner leaves the mode and keeps the title. Emits at most once per editing session, and never after TabComponent.labelKept.