# Component Library

## ui-button

| Attribute  | Type      | Description                |
|------------|-----------|----------------------------|
| `disabled` | `boolean` | Disables the button        |
| `full`     | `boolean` | Full-width layout          |

| Slot      | Description         |
|-----------|---------------------|
| `default` | Button label text   |
| `icon`    | Leading SVG icon    |

---

## ui-button-secondary

| Attribute  | Type      | Description                |
|------------|-----------|----------------------------|
| `disabled` | `boolean` | Disables the button        |
| `full`     | `boolean` | Full-width layout          |

| Slot      | Description         |
|-----------|---------------------|
| `default` | Button label text   |
| `icon`    | Leading SVG icon    |

---

## ui-badge

| Attribute | Type     | Values                                              |
|-----------|----------|------------------------------------------------------|
| `variant` | `string` | `accent` · `success` · `warning` · `error` · `muted` |

| Slot      | Description       |
|-----------|-------------------|
| `default` | Badge label text  |
| `icon`    | Leading SVG icon  |

---

## notify-bar

| Attribute     | Type      | Values / Description                    |
|---------------|-----------|-----------------------------------------|
| `type`        | `string`  | `success` · `warning` · `error`         |
| `message`     | `string`  | Notification text                       |
| `dismissible` | `boolean` | Whether the bar can be dismissed (default `true`) |

---

## ui-link

| Attribute | Type      | Description                    |
|-----------|-----------|--------------------------------|
| `href`    | `string`  | Navigation target              |
| `active`  | `boolean` | Renders in active/highlighted state |

| Slot      | Description |
|-----------|-------------|
| `default` | Link text   |

---

## form-input

| Attribute     | Type     | Description                  |
|---------------|----------|------------------------------|
| `label`       | `string` | Field label                  |
| `type`        | `string` | `text` · `email` · `password` |
| `placeholder` | `string` | Placeholder text             |
| `value`       | `string` | Current input value          |

| Event           | Detail         | Description             |
|-----------------|----------------|-------------------------|
| `value-changed` | `{ value: string }` | Fires on input change |

---

## stat-card

| Attribute | Type     | Description          |
|-----------|----------|----------------------|
| `value`   | `string` | Displayed metric     |
| `label`   | `string` | Metric description   |

---

## icon-card

| Attribute     | Type     | Description        |
|---------------|----------|--------------------|
| `heading`     | `string` | Card title         |
| `description` | `string` | Card body text     |

| Slot   | Description    |
|--------|----------------|
| `icon` | Leading SVG icon |

---

## ui-card

| Attribute  | Type      | Description                 |
|------------|-----------|-----------------------------|
| `centered` | `boolean` | Centers all child content   |

| Slot      | Description          |
|-----------|----------------------|
| `default` | Arbitrary content    |

---

## card-header

| Attribute    | Type     | Description   |
|--------------|----------|---------------|
| `heading`    | `string` | Title text    |
| `subheading` | `string` | Subtitle text |

---

## card-backdrop

_No attributes or slots observed in usage._

---

## horizontal-divider

_No attributes. Renders a visual separator line._

---

## loading-bar

| Attribute       | Type      | Values / Description                          |
|-----------------|-----------|-----------------------------------------------|
| `label`         | `string`  | Text label next to the bar                    |
| `value`         | `number`  | Progress percentage (`0`–`100`)               |
| `variant`       | `string`  | _(default)_ · `success` · `warning` · `error` |
| `size`          | `string`  | `sm` · `md` · `lg`                            |
| `indeterminate` | `boolean` | Infinite animation, no fixed value            |
| `hideValue`     | `boolean` | Hides the percentage label                    |

---

## line-chart

| Attribute  | Type      | Description                        |
|------------|-----------|------------------------------------|
| `heading`  | `string`  | Chart title                        |
| `subtitle` | `string`  | Chart subtitle                     |
| `xLabel`   | `string`  | X-axis label                       |
| `yLabel`   | `string`  | Y-axis label                       |
| `showArea` | `boolean` | Fill area beneath lines            |
| `series`   | `Array`   | Array of series objects (see below) |

**Series object:**

| Key      | Type     | Description                              |
|----------|----------|------------------------------------------|
| `label`  | `string` | Legend label                             |
| `color`  | `string` | CSS color value                          |
| `points` | `Array`  | Array of `{ x: number, y: number }`     |

---

## circle-chart

| Attribute    | Type     | Description                          |
|--------------|----------|--------------------------------------|
| `heading`    | `string` | Chart title                          |
| `centerText` | `string` | Text rendered in the donut center    |
| `segments`   | `Array`  | Array of segment objects (see below) |

**Segment object:**

| Key     | Type     | Description        |
|---------|----------|--------------------|
| `label` | `string` | Legend label        |
| `value` | `number` | Segment value       |
| `color` | `string` | CSS color value     |

---

## ui-tab-bar

| Attribute | Type     | Description                        |
|------------|----------|------------------------------------|
| `tabs`     | `Array`  | Array of tab objects (see below)  |
| `active`   | `string` | The id of the currently active tab |

**Tab object:**

| Key     | Type     | Description               |
|----------|----------|---------------------------|
| `id`     | `string` | Tab identifier            |
| `label`  | `string` | Tab display text          |
| `icon`   | `string` | Optional icon identifier  |

| Event        | Detail             | Description                 |
|---------------|--------------------|-----------------------------|
| `tab-change`  | `{ tab: string }`  | Fired when tab is selected  |