> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getcliq.io/llms.txt
> Use this file to discover all available pages before exploring further.

# UI kit

> The web components that make a hug look like the Hub — fields, choices, files, attachments, markdown, context — with theming and accessibility.

Hugs

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
import '@getcliqio/hug-frontend/ui';
```

registers the kit's elements. They follow the Hub's font, colours (light and dark) and spacing, are keyboard-reachable
and labelled, and emit a `change` event with the new value in `event.detail`. `form` and `approval` are built only
from these. The kit is optional — a page can draw everything itself.

***

## `<cliq-field>`

One field, with its label, help, required mark and problem.

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
// from attributes — text, number or boolean
html`<cliq-field label="What is wrong?" multiline required .value=${v.note} .problem=${problems['note']}
    @change=${(e) => set('note', e.detail)}></cliq-field>`

// from a requested input — any type: text, number, boolean, enum, file, channel
html`<cliq-field .input=${{ name: 'risk', type: 'enum', label: 'Risk', choices: [{ value: 'low' }, { value: 'high' }] }}
    .value=${v.risk} @change=${(e) => set('risk', e.detail)}></cliq-field>`
```

| | |
| - | - |
| `.input` | A [requested input](https://docs.getcliq.io/hugs.md#requested-inputs) describing the field |
| `label`, `type`, `name`, `help`, `required`, `multiline` | Attributes, when there's no `.input` (`type`: `text`, `number`, `boolean`) |
| `.value` | The value |
| `.problem` | A problem to show under it |
| `change` | The new value; `null` when cleared |

## `<cliq-fields>`

A list of fields, required first, then optional — the layout of `form`.

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
html`<cliq-fields .inputs=${params.inputs} .values=${value} .problems=${problems}
    @change=${(e) => set(e.detail.name, e.detail.value)}></cliq-fields>`
```

`change` carries `{ name, value }`.

## `<cliq-choice-group>`

Mutually exclusive choices, as segmented buttons — Approve / Reject, OK / Not OK.

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
html`<cliq-choice-group label="Verdict" .value=${v.ok ? 'ok' : 'no'}
    .choices=${[{ value: 'ok', label: 'OK' }, { value: 'no', label: 'Not OK', tone: 'danger' }]}
    @change=${(e) => set('ok', e.detail === 'ok')}></cliq-choice-group>`
```

Each choice is `{ value, label?, tone? }`; `tone: 'danger'` draws it red. `change` carries the chosen `value`.

## `<cliq-file>`

An upload slot: a button that asks the host for the person to pick a file, the uploaded files, and remove. Under the
label it says what the slot takes, from the slot's definition — "CSV · optional · up to 5 MB", "Images, PDF or text" —
and a refused file says which types are accepted.

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
html`<cliq-file key="evidence" label="Evidence (optional)" .value=${value.evidence}
    @change=${(e) => set('evidence', e.detail)}></cliq-file>`
```

| | |
| - | - |
| `key` | **Required.** The upload slot — a `file()` field of the definition |
| `label`, `.problem` | Its label and a problem |
| `multiple` | Several files (the slot must allow them) |
| `.value` | The file reference (a list with `multiple`) |
| `change` | The new reference(s); `null` when removed |

Upload errors — too large, the wrong type, too many at once — are shown by the element.

## `<cliq-attachment>`

One file: its name, type and size, **Preview** and **Download**.

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
html`<cliq-attachment .ref=${hug.attachments[0]}></cliq-attachment>`
```

* **Preview** shows text and markdown (the first 200 lines, at most 256 KB) and images inline; other files (PDF,
  binaries) only download. A Hug's only previewable attachment opens by itself.
* `preview="none"` turns previews off.
* The file is read through the host, with the viewer's permissions; a file they may not read says so.

## `<cliq-markdown>`

Sanitized markdown: headings, emphasis, lists, code, quotes, tables (GitHub style, with column alignment), links
(opened through the host). Text is only ever text: HTML in markdown is shown, not run.

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
html`<cliq-markdown .text=${params.prompt}></cliq-markdown>`
```

## `<cliq-context>`

Context blocks — what `form` shows with its question: `markdown`, `artifact` (a file), `checks` (results), and
`transcript` (an earlier conversation).

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
html`<cliq-context .blocks=${params.context}></cliq-context>`
```

## `<cliq-problems>`

A list of problems, each linked to its field.

```ts theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
html`<cliq-problems .problems=${problem_list}></cliq-problems>`
```

***

## Theme

The host passes the Hub's colours, and the kit uses them as CSS variables — use them in your own CSS too, so your
page follows light and dark:

| Variable | |
| - | - |
| `--cliq-bg`, `--cliq-panel` | Page and panel backgrounds |
| `--cliq-ink`, `--cliq-ink-2`, `--cliq-ink-3` | Text: main, secondary, faint |
| `--cliq-line` | Borders |
| `--cliq-acc` | Accent (links, focus) |
| `--cliq-ok`, `--cliq-warn`, `--cliq-bad` | Good, warning, bad |

```css theme={"theme":{"light":"github-light","dark":"one-dark-pro"}}
.doc { border: 1px solid var(--cliq-line); border-radius: 8px; }
.bad { color: var(--cliq-bad); }
```

The kit embeds the Hub's font (Geist) as inlined data, so the bundle stays text. A page that doesn't use the kit can
import just the font: `@getcliqio/hug-frontend/ui/fonts.css`.

Layout is fluid from 320 px wide; the frame's height follows the page.

## Accessibility and language

The kit's elements are reachable by keyboard, have visible focus and labels, and announce problems; each is checked
with [axe](https://github.com/dequelabs/axe-core) in the Hub's light and dark themes, and the themes' colours meet
WCAG AA contrast. Your own controls must do the same — label every input, and use `role="alert"` for problems.
`cliq hug dev` checks your page with axe as you work (see [Testing](https://docs.getcliq.io/hugs/testing.md)). The viewer's `locale` drives date and
number formatting in the default view.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.