Input

Markup canonic · components/input.json

sursa = JSON · generat de scripts/build-catalog.py

Reguli

Padding interior (orizontal)

Egal cu radius-ul: 16px pe input default (h 40, r 20), 20px pe input .lg (h 44, r 20). Textul începe unde se termină curba — aliniat optic.

Padding exterior (vertical)

Gap label → input → help: 4px. Densitate strânsă, label pare ancorat de câmp. Între câmpuri în formular: 16px (margin-bottom pe .field).

Aliniere label → text

Label și help padding-left 16px (= padding interior input md). Label, text input și help încep de la aceeași coloană verticală.

Tipografie

Label: Inter 12 / 500 / sentence case / tracking 0.04em, color fog (label-quiet — discret, nu strigă). Text input: Inter 14 / 400 (md) sau 16 / 400 (lg), color ink. Help: Inter 12 / 400, color fog.

A · Input alb pe card bej-1 (default — context Dublin)

Cazul comun: card „Acțiuni" / dashboard / modal pe pagină bej-0. Input alb iese clar peste cardul bej-1.

Default + label + help
Apare pe facturile emise.
Search input
⌘K
Focus state · border fog + halo 3px
Border fog + halo neutru 3px.
Success state
✓ Validat în Registrul Comerțului.
Error state
Format email invalid.
Disabled
Large · 44h / fs 16 / pad-x 20

D · Input-em (emphasis — doar client-facing: Dublin, landing)

Variantă cu accent: label-ul brand stă în interiorul câmpului — pink în repaus, pink-deep pe focus. Borderul rămâne neutru (fog + halo), ca la orice control. Se folosește pe suprafețe client-facing (Dublin, landing); formularele interne folosesc .field neutru.

input-em · repaus (label pink brand)
input-em · focus (label pink-deep + halo neutru)
Comparație · input regular (label fog, deasupra)
input-em · textarea (redimensionabil vertical — trage de colț)
input-em · textarea cu OVERFLOW (scroll intern, label pinned)

Când textul depășește înălțimea, textarea face scroll intern — label-ul e element separat deasupra, deci textul derulat se decupează sub el, nu urcă peste label. Utilizatorul poate redimensiona vertical (mânerul din colț); regula label-ului rămâne valabilă la orice înălțime.

E · Simulare — inputs pe canvas bej-0 cu dot grid (context flow)

Contextul de flow (ex. emitere factură): câmpurile stau direct pe canvas-ul bej-0 cu dot grid (.has-grid), nu pe un card. Borderul --c-input-border (ink @ 30%) ține fiecare câmp lizibil peste pattern. Câmpurile de mai jos sunt live — click / tab / scrie în ele ca să vezi stările reale.

Border --c-input-border peste dot grid.
⌘K
✓ Validat în Registrul Comerțului.
Format email invalid.

Focus state

:focus-visible · border fog + halo 3px (rgba 14%)
Focus simulat cu .is-focused. Border --c-fog + halo neutru.

B · Input tonal pe card alb (excepție — formulare dedicate)

Cazul rar: pagini de setup, formulare dedicate sau wizard pe card alb. Input bej-0 (.input.tonal) — fundalul dă doar căldură câmpului; peste alb separarea e 1.04:1, deci limita controlului o duce singur conturul, iar conturul e mai închis decât pe inputul default: --c-input-border-tonal (ink @ 46%, 3.16:1 peste bej-0) în loc de --c-input-border (ink @ 30%, 2.00:1 — sub pragul de 3:1 din WCAG 1.4.11).

Tonal default
Apare pe contractul de servicii.
Tonal large

C · Modal — formular dedicat (lg)

Modal-ul e un context dedicat pentru o acțiune principală. Folosește exclusiv mărimea lg (44h / fs 16) — input și buton la aceeași dimensiune. Card bej-1 cu radius 24 (--r-xl), halo outline 1px white + offset 16, backdrop var(--c-backdrop) + blur var(--scrim-blur) (ink 25% + 6px) — scrimul canonic, comun cu .doc-sheet-backdrop și .flow-sheet-scrim.

Factură nouă

Către cine emitem factura?

Adaugă datele clientului. Le păstrăm pentru următoarele facturi.

Container

Card bej-1, max-width 480, padding 32, radius 24, halo white outline 1px / offset 16. Centrat în viewport pe backdrop blur.

Inputs

Toate input-urile: 44h / fs 16 / radius 20 / pad-x 20. Background alb peste cardul bej-1 = contrast clar. Border ink @ 30%. Focus = border fog + halo neutru.

Submit

Buton primary full-width 44h / fs 16 / radius 24. Pe modal, butonul este the acțiune — generos, ușor de țintit.

Header

Eyebrow pink (Inter 11 / 600 / 0.10em / uppercase) + T28 cu T-em italic pe accent pink + lead T14 fog. Acțiunea exprimată ca întrebare („Către cine emitem factura?").