Status Indicator
import "@taprootio/espalier/status-indicator";
<esp-status-indicator>
A compact, keyboard-accessible status icon that reveals explanatory
content in an esp-popover on hover, focus, or tap.
Chrome modes
The chrome attribute controls the chip treatment around the icon.
pill (the default) renders the filled circular background, outline
keeps only the border, and none drops both — leaving just the
intent-colored icon and its popover affordance. chrome="none" is the
right choice when the indicator sits inside dense metadata rows where
a full pill would feel heavy.
Wide chip with a non-square SVG
The built-in icon attribute pulls from the Espalier sprite, which is
authored for square glyphs at the chip's default size. When you
need a non-square mark — a file-type badge, a short token of text, a
pill of dimensions — slot your own SVG into the icon slot and size
the chip through the three CSS hooks: --esp-status-indicator-width,
--esp-status-indicator-height, and --esp-status-indicator-border-radius.
The slotted SVG fills the chip, so give it a matching viewBox and
use chrome="none" if you don't want the chip's pill background
fighting your art.
Rich popover content
The default slot accepts any HTML, not just plain text. Small blocks
of structured content — a heading, a list of values, a definition
list — render inside the popover and are clamped by
--esp-status-indicator-popover-max-width (default 32ch). Raise the
hook when the content needs more room.
Slots
<esp-status-indicator> has the following slots:
Default
Body of the popover that opens when the indicator is hovered, focused, or tapped. Accepts plain text or arbitrary HTML — small blocks of structured content (lists, key/value pairs) render inside the popover at --esp-status-indicator-popover-max-width.
icon
Optional custom status icon. When provided, it overrides both the icon attribute and built-in intent icon.
Attributes
<esp-status-indicator> has the following attributes:
icon
icon has a default value of "".
Optional icon name from the Espalier SVG sprite.
label
label has a default value of "".
Accessible label for the indicator button.
placement
placement has a default value of undefined.
Preferred popover placement.
chrome
chrome has a default value of undefined.
Visual chrome around the status icon. pill renders the filled
circular treatment, outline keeps only the border, and none
renders the intent-colored icon alone.
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-status-indicator> 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 Properties
<esp-status-indicator> has the following CSS properties:
--esp-status-indicator-width
Width of the indicator chip. Override on the host to render a non-square indicator (for example, a file-type badge).
--esp-status-indicator-height
Height of the indicator chip. Defaults to the width so the chip stays square.
--esp-status-indicator-border-radius
Corner radius of the indicator chip. Lower it (for example, to var(--esp-size-border-radius)) for a rounded-rectangle chip.
--esp-status-indicator-popover-max-width
Maximum width of the popover body. Raise this when slotting structured content such as a <ul> of values.
--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).