Tab Group
import "@taprootio/espalier/tabs";
<esp-tab-group>
A tabbed interface that groups multiple
esp-tab elements. The tab strip is
generated automatically from each child's label attribute.
Only one tab panel is visible at a time.
Pre-selected tab
Set active on a child esp-tab to make it the initially
visible panel:
Disabled tab
Individual tabs can be disabled:
Disabled group
Set disabled on the group to disable all tabs at once:
Zone theming
Tab groups pick up zone theming from a context attribute:
Listening for tab changes
Slots
<esp-tab-group> has a slot:
Default
Place esp-tab elements in the default slot.
Attributes
<esp-tab-group> has the following attributes:
disabled
disabled has a default value of false.
Disables all tabs in the group, preventing any tab from being 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-group> 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.
Events
<esp-tab-group> emits the following events:
esp-tab-group-changed
esp-tab-group-changed is of type CustomEvent<{ index: number; label: string }>.
Fired when the active tab changes. The detail contains the index and label of the newly active tab.
CSS Parts
<esp-tab-group> has the following CSS parts:
tab-list
The tab strip container.
tab-button
Each individual tab button in the strip.
panels
The panel area below the tab strip.
CSS Properties
<esp-tab-group> has the following CSS properties:
--esp-tab-color-border
Border color of the tab group container.
--esp-tab-color-background
Background color of the overall component.
--esp-tab-color-strip-background
Background color of the tab strip.
--esp-tab-color-button-hover
Tab button hover background.
--esp-tab-color-button-active
Active tab button background.
--esp-tab-color-text
Text color for tab buttons.
--esp-tab-size-padding
Padding inside the panel area and tab buttons.
--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).