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

## class: `ActionBar`, `btu-action-bar`

### Superclass

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

### Mixins

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

### Fields

| Name        | Privacy | Type        | Default     | Description                                                                                                                                                                                                     | Inherited From |
| ----------- | ------- | ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `position`  |         | `Position`  | `'bottom'`  | Bar position: 'top' or 'bottom' (default).                                                                                                                                                                      |                |
| `sticky`    |         | `boolean`   | `false`     | Enables CSS sticky positioning. When combined with position='top',&#xA;the bar sticks to the top of the scroll container. With position='bottom'&#xA;(default), it sticks to the bottom.                        |                |
| `alignment` |         | `Alignment` | `'default'` | Content alignment: 'default' (two-zone), 'start', 'center', 'end'.&#xA;Non-default alignments disable two-zone layout.                                                                                          |                |
| `shadow`    |         | `boolean`   | `false`     | Adds a box-shadow to the bar.                                                                                                                                                                                   |                |
| `label`     |         | `string`    | `''`        | Accessible label for the toolbar region.                                                                                                                                                                        |                |
| `compact`   |         | `boolean`   | `false`     | Enables progressive label compacting. When space shrinks, items marked&#xA;\`compactable\` (with icons) have their labels hidden one-by-one&#xA;from least to most important before items overflow into "More". |                |

### Methods

| Name   | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `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-bar-ready`  | `CustomEvent`                  | Fired after first render and initialization                         |                |
| `btu-action-item-click` | `CustomEvent<{label: string}>` | Fired when an action item is clicked (bubbles from btu-action-item) |                |

### Attributes

| Name             | Field     | Inherited From |
| ---------------- | --------- | -------------- |
| `position`       | position  |                |
| `sticky`         | sticky    |                |
| `item-alignment` | alignment |                |
| `shadow`         | shadow    |                |
| `label`          | label     |                |
| `compact`        | compact   |                |

### CSS Properties

| Name                        | Default | Description                          |
| --------------------------- | ------- | ------------------------------------ |
| `--action-bar-gap`          |         | Gap between items (default: 0.75rem) |
| `--action-bar-padding`      |         | Bar padding (default: 1.5rem)        |
| `--action-bar-background`   |         | Background color (default: white)    |
| `--action-bar-border-color` |         | Border color (default: gray-200)     |
| `--action-bar-z-index`      |         | Z-index (default: 100)               |

### Slots

| Name | Description                              |
| ---- | ---------------------------------------- |
|      | One or more \`btu-action-item\` elements |

<hr/>

## Exports

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