# `src/components/action-bar/ActionItem.ts`:

## class: `ActionItem`, `btu-action-item`

### Superclass

| Name         | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` |        | lit     |

### Mixins

| Name                | Module                         | Package |
| ------------------- | ------------------------------ | ------- |
| `TooltipMixin`      | /src/util/TooltipMixin.js      |         |
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |

### Fields

| Name               | Privacy | Type                                     | Default         | Description                                                                                                                                                                                                                                                                                               | Inherited From |
| ------------------ | ------- | ---------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `label`            |         | `string`                                 | `''`            | Button label text.                                                                                                                                                                                                                                                                                        |                |
| `variant`          |         | `ActionItemVariant`                      | `'secondary'`   | Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.                                                                                                                                                                                                                                        |                |
| `symbol`           |         | `string`                                 | `''`            | Lucide icon symbol for the leading icon.                                                                                                                                                                                                                                                                  |                |
| `iconOnly`         |         | `boolean`                                | `false`         | Show icon only, hiding the label. Tooltip activates automatically with the label text.                                                                                                                                                                                                                    |                |
| `disabled`         |         | `boolean`                                | `false`         | Disables the action item. The button remains focusable for accessibility&#xA;but click events are suppressed.                                                                                                                                                                                             |                |
| `loading`          |         | `boolean`                                | `false`         | Shows a loading spinner and prevents interaction.                                                                                                                                                                                                                                                         |                |
| `zone`             |         | `'start' \| 'end' \| ''`                 | `''`            | Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout.&#xA;If unset, auto-detected from variant (destructive → start, others → end).                                                                                                                                                    |                |
| `compactable`      |         | `boolean`                                | `false`         | Opt-in for progressive label compacting. When the parent bar has \`compact\`&#xA;enabled and space shrinks, compactable items with icons have their labels&#xA;hidden one-by-one (least important first) before overflowing.&#xA;Items without an icon ignore this attribute and go directly to overflow. |                |
| `tooltip`          |         | `string`                                 | `''`            | Tooltip text content. Set to empty string to remove the tooltip.                                                                                                                                                                                                                                          | TooltipMixin   |
| `tooltipPosition`  |         | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'`         | Position relative to the host element. Auto-flips when constrained by the viewport.                                                                                                                                                                                                                       | TooltipMixin   |
| `tooltipDelay`     |         | `number`                                 | `300`           | Show delay in milliseconds (hover trigger only).                                                                                                                                                                                                                                                          | TooltipMixin   |
| `tooltipOffset`    |         | `TooltipOffset \| null`                  | `null`          | Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).                                                                                                                                                                                                                                          | TooltipMixin   |
| `tooltipNoArrow`   |         | `boolean`                                | `false`         | Hide the arrow pseudo-element.                                                                                                                                                                                                                                                                            | TooltipMixin   |
| `tooltipTrigger`   |         | `string`                                 | `'hover focus'` | Space-separated trigger types: 'hover', 'focus', 'click'.                                                                                                                                                                                                                                                 | TooltipMixin   |
| `_onMouseLeave`    | private |                                          |                 |                                                                                                                                                                                                                                                                                                           | TooltipMixin   |
| `_onFocusIn`       | private |                                          |                 |                                                                                                                                                                                                                                                                                                           | TooltipMixin   |
| `_onFocusOut`      | private |                                          |                 |                                                                                                                                                                                                                                                                                                           | TooltipMixin   |
| `_onClick`         | private |                                          |                 |                                                                                                                                                                                                                                                                                                           | TooltipMixin   |
| `_onNativeToggle`  | private |                                          |                 |                                                                                                                                                                                                                                                                                                           | TooltipMixin   |
| `_onKeyDown`       | private |                                          |                 |                                                                                                                                                                                                                                                                                                           | TooltipMixin   |
| `_onDocumentClick` | private | `((e: MouseEvent) => void) \| null`      | `null`          |                                                                                                                                                                                                                                                                                                           | TooltipMixin   |

### Methods

| Name                  | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return                   | Inherited From    |
| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------------ | ----------------- |
| `_relayTooltipAttrs`  | private |                                                                                                                                                                                                                                                                                    |                                                         | `void`                   |                   |
| `_handleClick`        | private |                                                                                                                                                                                                                                                                                    |                                                         | `void`                   |                   |
| `_getSpinnerColor`    | private |                                                                                                                                                                                                                                                                                    |                                                         | `string`                 |                   |
| `_buildButtonClasses` | private |                                                                                                                                                                                                                                                                                    |                                                         | `string`                 |                   |
| `_getButtonStyles`    | private |                                                                                                                                                                                                                                                                                    |                                                         | `Record<string, string>` |                   |
| `emit`                |         | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean`                | EventEmitterMixin |

### Events

| Name                    | Type                           | Description                                                                | Inherited From |
| ----------------------- | ------------------------------ | -------------------------------------------------------------------------- | -------------- |
| `btu-action-item-click` | `CustomEvent<{label: string}>` | Fired when the action item is clicked (not fired when disabled or loading) |                |

### Attributes

| Name               | Field           | Inherited From |
| ------------------ | --------------- | -------------- |
| `label`            | label           |                |
| `variant`          | variant         |                |
| `symbol`           | symbol          |                |
| `icon-only`        | iconOnly        |                |
| `disabled`         | disabled        |                |
| `loading`          | loading         |                |
| `zone`             | zone            |                |
| `compactable`      | compactable     |                |
| `tooltip`          | tooltip         | TooltipMixin   |
| `tooltipPosition`  | tooltipPosition | TooltipMixin   |
| `tooltipDelay`     | tooltipDelay    | TooltipMixin   |
| `tooltipOffset`    | tooltipOffset   | TooltipMixin   |
| `tooltipNoArrow`   | tooltipNoArrow  | TooltipMixin   |
| `tooltipTrigger`   | tooltipTrigger  | TooltipMixin   |
| `tooltip-position` | tooltipPosition | TooltipMixin   |
| `tooltip-delay`    | tooltipDelay    | TooltipMixin   |
| `tooltip-offset`   | tooltipOffset   | TooltipMixin   |
| `tooltip-no-arrow` | tooltipNoArrow  | TooltipMixin   |
| `tooltip-trigger`  | tooltipTrigger  | TooltipMixin   |

### CSS Properties

| Name                     | Default | Description                      |
| ------------------------ | ------- | -------------------------------- |
| `--button-color`         |         | Override button background color |
| `--button-text-color`    |         | Override button text color       |
| `--button-border-radius` |         | Override button border radius    |

<hr/>

## Exports

| Kind                        | Name              | Declaration | Module                                  | Package |
| --------------------------- | ----------------- | ----------- | --------------------------------------- | ------- |
| `js`                        | `default`         | ActionItem  | src/components/action-bar/ActionItem.ts |         |
| `custom-element-definition` | `btu-action-item` | ActionItem  | src/components/action-bar/ActionItem.ts |         |
