Action Menu Item

import "@taprootio/espalier/action-menu/item";

Default

Label text for the action.

icon

Optional custom leading icon. Slotted icons override the generated SVG from the icon attribute. Activation is reported through a private coordination event consumed by the parent action menu.

icon

icon has a default value of "".

Optional icon name from the configured Espalier SVG sprite. Slotted icon content remains supported and overrides this generated icon.

value

value has a default value of "".

Value included in the parent menu's esp-action-menu-select event detail.

disabled

disabled has a default value of false.

Prevents pointer and keyboard activation for this item.

icon-position

icon-position has a default value of undefined.

Where the optional icon slot is positioned within the item.

Use "right" for Taproot-style action rows where the icon sits in a differentiated trailing cell with a dotted divider.

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.

activate

Activates the item and notifies the parent action menu.

inheritIconPosition

Applies the parent menu's icon position unless this item has its own override.

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.

--esp-action-menu-item-padding

Padding inside each menu item. Defaults to var(--esp-size-tiny) var(--esp-size-small).

--esp-action-menu-item-gap

Space between the optional icon and label. Defaults to var(--esp-size-tiny).

--esp-action-menu-item-hover-background

Background used when an enabled item is hovered or focused. Defaults to var(--esp-color-layer-2).

--esp-action-menu-item-focus-shadow

Focus ring applied to keyboard-focused items. Defaults to 0 0 0 2px var(--esp-color-link).

--esp-action-menu-item-icon-background

Background used behind right-positioned icons. Defaults to var(--esp-color-layer-2).

--esp-action-menu-item-icon-hover-background

Background used behind right-positioned icons when an enabled item is hovered or focused. Defaults to var(--esp-color-layer-3).

--esp-action-menu-item-icon-border-color

Divider color used before right-positioned icons. Defaults to var(--esp-color-border).

--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).