UI kit

Hugs

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.

// 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 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.

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.

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.

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.

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.

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).

html`<cliq-context .blocks=${params.context}></cliq-context>`

`<cliq-problems>`

A list of problems, each linked to its field.

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

.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 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). The viewer’s locale drives date and number formatting in the default view.

Start

Hugs

Agents

CLI

Integrations

`<cliq-field>`

`<cliq-fields>`

`<cliq-choice-group>`

`<cliq-file>`

`<cliq-attachment>`

`<cliq-markdown>`

`<cliq-context>`

`<cliq-problems>`

Theme

Accessibility and language

​<cliq-field>

​<cliq-fields>

​<cliq-choice-group>

​<cliq-file>

​<cliq-attachment>

​<cliq-markdown>

​<cliq-context>

​<cliq-problems>

​Theme

​Accessibility and language

`<cliq-field>`

`<cliq-fields>`

`<cliq-choice-group>`

`<cliq-file>`

`<cliq-attachment>`

`<cliq-markdown>`

`<cliq-context>`

`<cliq-problems>`

Theme

Accessibility and language