# @isa/ui/label

Label components for displaying tags, categories, and priority indicators.

## Installation

```typescript
import { LabelComponent, PrioLabelComponent } from '@isa/ui/label';
```

## Components

### LabelComponent

A badge-style label for tags, filters, and reward indicators.

**Figma:** [ISA Design System - Label](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2806-8052&m=dev)

#### Usage

```html
<!-- Basic label -->
<ui-label>Prämie</ui-label>

<!-- Active state (hover/pressed) -->
<ui-label [active]="true">Selected</ui-label>
```

#### API

| Input    | Type      | Default | Description                          |
| -------- | --------- | ------- | ------------------------------------ |
| `active` | `boolean` | `false` | Active state (adds background color) |

### PrioLabelComponent

A priority indicator label with two priority levels.

**Figma:** [ISA Design System - Prio Label](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=682-2836&m=dev)

#### Usage

```html
<!-- Priority 1 (high) - default -->
<ui-prio-label [priority]="1">Pflicht</ui-prio-label>

<!-- Priority 2 (low) -->
<ui-prio-label [priority]="2">Prio 2</ui-prio-label>
```

#### API

| Input      | Type     | Default | Description                         |
| ---------- | -------- | ------- | ----------------------------------- |
| `priority` | `1 \| 2` | `1`     | Priority level (1 = high, 2 = low ) |

## CSS Classes

### LabelComponent

- `.ui-label` - Base class
- `.ui-label--active` - Active state

### PrioLabelComponent

- `.ui-prio-label` - Base class
- `.ui-prio-label--1` - Priority 1 (dark background)
- `.ui-prio-label--2` - Priority 2 (light background)

## Accessibility

Both components include:

- `role="status"` - Indicates status information
- E2E testing attributes (`data-what`, `data-which`)

## E2E Testing

```typescript
// Select all labels
page.locator('[data-what="label"]');

// Select all priority labels
page.locator('[data-what="prio-label"]');

// Select specific priority
page.locator('[data-what="prio-label"][data-which="priority-1"]');
```
