## Input

A standalone input component with label, helper text, disabled/readonly states, and error messaging.

### Import
Since the component is standalone, import it where you use it or declare in a shared module. For plain HTML usage in a demo, include the CSS and render the selector.

Selector: `ccl-input`

### Inputs
- `type`: 'text' | 'password' | 'number' | 'email' (default: 'text')
- `label`: string
- `placeholder`: string
- `disabled`: boolean
- `readonly`: boolean
- `error`: boolean
- `errorMessage`: string
- `helperText`: string

### Basic example
```html
<ccl-input label="Email" type="email" placeholder="you@example.com"></ccl-input>
```

### Helper text
```html
<ccl-input label="Username" helperText="Use 4–16 characters"></ccl-input>
```

### Disabled
```html
<ccl-input label="Account" [disabled]="true" placeholder="Disabled"></ccl-input>
```

### Error state
```html
<ccl-input label="Password" [error]="true" errorMessage="Minimum 8 characters"></ccl-input>
```

### Accessibility
- Associates `label` with input via `for`/`id`.
- Sets `aria-invalid` when `error=true`.
- Adds `aria-describedby` when `helperText` provided.

### Theming
The component uses CSS variables. Example brand override:
```css
:root, :host {
  --color-primary-default: #f97316; /* BrandA orange */
}
```