### `bars`

Event fires when clicking on a Bars panel element, passing the original DOM event and click data.

**Parameters:**
- `event: MouseEvent` — original DOM mouse event
- `value: EventClickValue` — object with click data

**EventClickValue structure:**
- `type: string` — click/button type (e.g., `'back'` for back button)
- `value: any` — arbitrary button value
- `detail: Record<string, any> | undefined` — additional event data

```html
<script setup>
const handleBars = (event, value) => {
  console.log('DOM event:', event)
  console.log('Button type:', value.type)
  console.log('Value:', value.value)
  console.log('Details:', value.detail)

  if (value.type === 'back') {
    console.log('Back button pressed')
  }
}
</script>

<template>
  <Bars @bars="handleBars">
    <button data-event-type="back">Back</button>
  </Bars>
</template>
```

### `barsLite`

Event fires when clicking on a Bars panel element, passing only data without the original DOM event (lightweight version).

**Parameters:**
- `value: EventClickValue` — object with click data

### `barsBack`

Event fires when the "Back" button in Bars panel is clicked, passing only click data.

**Parameters:**
- `value: EventClickValue` — object with click data

> Back button can be hidden with `barsBackHide` property.

