Component Gallery

Live examples of every component across all four security tiers. Interact with fields to observe validation, masking, rate limiting, and audit behaviors.

v0.1.2 Zero dependencies TypeScript strict Shadow DOM V1 WCAG 2.2 AA

secure-input

<secure-input>

Single-line text input. Sensitive and critical tiers mask the entered value on blur. Rate limiting and structured audit events fire automatically based on tier.

Security Tiers
Public visible · autocomplete on · minimal audit
Authenticated visible · autocomplete off · changes logged
Sensitive partial mask on blur · autocomplete off · 10/min · full audit
Critical full mask on blur · autocomplete off · 5/min · full audit
Validation & States
Required — blur empty to trigger
Email + pattern constraint
Pattern — letters only
Min length — 5 chars
Password — sensitive tier
Max length — 10 chars
Disabled
Readonly

secure-textarea

<secure-textarea>

Multi-line text area with optional character counter. Tier-based masking, rate limiting, and structured audit events match those of secure-input.

Security Tiers
Public visible · minimal audit
Authenticated visible · changes logged
Sensitive partial mask · 10/min · full audit
Critical full mask · 5/min · full audit
States
Required — blur empty to trigger
Max length + character counter
Min length — 20 chars
Custom rows — 6
Disabled
System initialized successfully.
Readonly
These are the terms of service. This content cannot be edited.

secure-select

<secure-select>

Dropdown and multi-select. Selection changes are audit-logged at authenticated tier and above. Fail-secure default is critical tier if attribute is absent or invalid.

Security Tiers
Public visible · minimal audit
Authenticated visible · changes logged
Sensitive changes audited · 10/min
Critical full audit · 5/min
States
Required — blur without selecting
Pre-selected value
Multiple selection
Disabled

secure-datetime

<secure-datetime>

Date, time, and datetime-local picker variants. Supports min/max constraints, step granularity, and optional timezone display. Audit events fire on value change.

Types across tiers
Date — Public type="date" · minimal audit
Time — Authenticated type="time" · changes logged
DateTime — Sensitive type="datetime-local" · 10/min · full audit
Date — Critical type="date" · 5/min · full audit
Variants & States
Month picker
Week picker
Min / max range
Time with timezone
Time step — 15 min
Required — blur empty to trigger
Disabled
Readonly

secure-file-upload

<secure-file-upload>

Drag-and-drop file input with tier-enforced size limits and accept constraints. Critical tier restricts to 2 MB; sensitive to 5 MB. Every upload is audit-logged.

Security Tiers
Public all common types · 20 MB max
Authenticated all common types · 10 MB max · upload logged
Sensitive image/* + .pdf · 5 MB max · full audit
Critical .pdf + .txt only · 2 MB max · full audit
States
Required
Images only
Custom max size — 1 MB
Disabled

secure-card

<secure-card>

Composite payment card input with live 3D preview. Always locked to critical tier. Luhn validation on card number; expiry validated against current date. Card network detected from number prefix.

PCI model: The full PAN is never included in events, audit logs, or hidden inputs. The CVC is never stored, logged, or transmitted — not even to your own server. Use getCardData() exclusively for PCI-compliant SDK tokenisation (e.g. Stripe.js). Hidden inputs carry only the last-4 and expiry.
Variants
Standard — card number · expiry · CVC
With cardholder name — show-name attribute
States
Disabled
Validation — blur each field empty to trigger

secure-table

<secure-table>

Data table with sortable and filterable columns, pagination, and per-column security tiers. Sensitive and critical columns are automatically masked in the rendered output.

Sorting, filtering & pagination
Click column headers to sort · Use the filter inputs to search
Per-column security tiers — masked data
Email and Phone are sensitive tier (partial mask). SSN is critical tier (full mask). Name is public and unmasked.
Masked columns
Empty state
No data provided

secure-form

<secure-form>

Form wrapper with built-in CSRF token injection, coordinated field validation before submit, telemetry aggregation, and a single structured fetch payload. Submit triggers a dialog showing collected data.

Submitting either form below intercepts the request and displays the serialised payload — including CSRF token if set — for inspection.
Contact form — public tier — all fields validate on blur
Profile form — sensitive tier — CSRF token injected

secure-telemetry-provider

<secure-telemetry-provider>

Optional wrapper that enriches every secure-form-submit event with a signed environmental signals envelope. Detects automation flags, headless browsers, script injection, pointer type, and devtools state. Signs with HMAC-SHA-256 via SubtleCrypto.

Wrap any <secure-form> with this component and provide a signing-key attribute. The signed _env envelope is injected onto detail.telemetry asynchronously before the request fires. Verify the HMAC server-side with the same key.
Live environmental signals — read via getEnvironmentalSignals()
EnvironmentalSignals

Click “Scan now” to collect a point-in-time snapshot of environment signals.

Demo form — submit to inspect telemetry + signed _env envelope

Form Payload