# Feedback & Status Use when you communicate state, progress or an action. ## Index - [`alert`](#alert) — Inline callout with variants and optional dismiss - [`clipboard`](#clipboard) — Copy-to-clipboard button with copied feedback - [`progress`](#progress) — Determinate / indeterminate progress bar - [`skeleton`](#skeleton) — Loading placeholder with loading→content swap - [`toast`](#toast) — Floating notification manager with auto-dismiss --- ## alert Inline callout with `info|success|warning|error` variants and optional dismiss. Sets ARIA live semantics automatically (`error`/`warning` → assertive, others → polite). ```html

Heads up

Your trial ends soon.

``` ```ts import { Alert } from '@42/core/alert'; const a = new Alert(root, { variant: 'warning' }); a.dismiss(); ``` Options: `variant` ('info'|'success'|'warning'|'error'), `role` ('alert'|'status' override) Methods: `setVariant(v)`, `dismiss()`, `show()` Events: `alert:dismiss` → `{ variant }` --- ## clipboard Copy-to-clipboard button with temporary `data-state="copied"` feedback. Text comes from the `text` option or a `[data-c42-clipboard-source]` element. ```html

``` ```ts import { Clipboard } from '@42/core/clipboard'; const cb = new Clipboard(root, { timeout: 2000 }); await cb.copy(); ``` Options: `text` (overrides source), `timeout` (ms, default 2000) Methods: `setText(string | null)`, `copy(): Promise` Events: `clipboard:copy` → `{ text }`, `clipboard:error` → `{ error }` --- ## progress Progress bar with determinate and indeterminate (loading) modes. Sets `role="progressbar"` + value attributes and exposes the percentage as the `--c42-progress-percent` custom property so CSS can size the indicator. ```html

``` ```ts import { Progress } from '@42/core/progress'; const p = new Progress(root, { value: 40, max: 100, label: 'Upload' }); p.setValue(75); p.setIndeterminate(true); ``` Options: `value` (default 0), `min` (default 0), `max` (default 100), `indeterminate`, `label` Methods: `setValue(n)`, `setMax(n)`, `setIndeterminate(boolean)`, `getValue()` Events: `progress:change` → `{ value, min, max, percent, indeterminate }` --- ## skeleton Loading placeholder + controller orchestrating the loading→content swap. Shapes via `data-variant="text|circle|rect"`. ```html

``` ```ts import { Skeleton } from '@42/core/skeleton'; const s = new Skeleton(root, { loading: true }); s.setLoading(false); ``` Options: `loading` (default true) Methods: `setLoading(boolean)` Events: `skeleton:change` → `{ loading: boolean }` --- ## toast Floating notification manager. Creates/auto-dismisses toasts injected into a region. ```html

``` ```ts import { Toaster } from '@42/core/toast'; const toaster = new Toaster(region, { position: 'bottom-right', duration: 5000, max: Infinity }); const id = toaster.show({ title: 'Saved', description: '…', variant: 'success' }); toaster.dismiss(id); ``` Options: `position` (top/bottom × left/right/center), `duration` (ms, 0 = persist), `max` Methods: `show(opts) → id`, `dismiss(id)`, `clear()` Events: `toast:show`, `toast:dismiss` → `{ id: string }`