Tab

import "@taprootio/espalier/tabs/tab";

<esp-tab>

A single tab panel used inside esp-tab-group. Each tab provides a label that appears in the generated tab strip and a default slot for the panel content.

Pre-selected tab

Set the active attribute to make a tab active on load:

Disabled tab

Slots

<esp-tab> has a slot:

Default

The default slot holds the panel content displayed when this tab is active. Label, active-state, and disabled-state updates are reported through a private coordination event consumed by the parent tab group.

Attributes

<esp-tab> has the following attributes:

label

label has a default value of "".

The text displayed in the tab button within the tab strip.

active

active has a default value of false.

Whether this tab is currently active (its panel is visible).

disabled

disabled has a default value of false.

Whether this tab is disabled (cannot be selected).

intent

intent has a default value of undefined.

The element's intent — its meaning: neutral (no pin), or success, warning, danger, info — each pinned to its fixed status family (blue for info), retunable per theme via intents. On token-emitting controls a non-neutral intent pins the filled-action pair to that family, derived over the governing zone's theme; class-styled chrome (badges, callouts, status pills) opts out of inline emission and renders its treatment from CSS classes instead. An intent never repaints the surrounding zone, which is what contexts are for. Removing the attribute restores the element's own default intent.

context

context has a default value of undefined.

A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.

Methods

<esp-tab> has the following methods:

traverseToClosest

Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.

CSS Parts

<esp-tab> has a CSS part:

panel

The panel wrapper element.

CSS Properties

<esp-tab> has the following CSS properties:

--esp-tab-size-padding

Padding inside the panel area.

--esp-field-background

Background color of the shared field shell. Defaults to var(--esp-color-layer-2).

--esp-field-border-color

Border color of the shared field shell. Defaults to var(--esp-color-border).

--esp-field-border-width

Border width of the shared field shell. Defaults to 1px.

--esp-field-text-color

Text color used inside the shared field shell. Defaults to var(--esp-color-text).

--esp-field-hover-bg

Hover background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-bg

Focus background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-shadow

Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).

Tab