# Feedback Bar

An inline thumbs up/down banner that collects a quick reaction — and optionally a category and comment — then confirms in place.

<p class="kai-tag-sub">kai-feedback-bar</p>

An inline thumbs up/down banner that owns its own flow — asks, optionally collects a category and comment on a thumbs-down vote, then confirms with a thank-you — all in place, no modal.

## Preview

> **tip:** 
Place `<kai-feedback-bar>` at the end of an assistant response, a completed task, or an article. Add `collect-detail` when you want an optional reason on a thumbs-down vote — the element handles the multi-step flow itself, so you only listen for `kai-feedback-detail`.

## Usage

Drop `<kai-feedback-bar>` after any response. The element transitions to a thank-you on vote; the × button fires `kai-close` and you control when the element leaves the DOM.

- **Copy** — override any label via attributes: `bar-title`, `detail-title`, `detail-placeholder`, `submit-label`, `thanks-message`.
- **Detail form** — add `collect-detail` to open a follow-up form on a thumbs-down vote. Set `categories` in JavaScript (it's an array) to render selectable chips.

## Examples

### Default

### Custom Title

Override the question with `bar-title` when "Was this helpful?" doesn't fit the context.

### Collect Detail

Add `collect-detail` for an optional follow-up form on a thumbs-down vote. Listen for `kai-feedback-detail` to receive `{ value, category?, comment? }`.

### Collect Detail with Categories

Set the `categories` property alongside `collect-detail` to render selectable chips — fast tagging without typing.

### Customising Copy

Every label is overridable — override only what you need; the rest fall back to defaults.

## Props

## Events

## Composed from