Trust Center elements

Two email-capture Web Components for your Trust Center. Both are dependency-free and work in any framework or plain HTML.

• <asiri-trust-access> — let prospects request access to gated resources (SOC 2 report, security questionnaire, sandbox).
• <asiri-trust-subscribe> — capture emails for security and compliance update notifications.

Each renders a button that opens a modal email-capture form, or an inline form when variant="inline".

Install

npm / bundler

npm install @asiri-ng/elements
# or
pnpm add @asiri-ng/elements

import '@asiri-ng/elements/trust-access';
import '@asiri-ng/elements/trust-subscribe';

CDN (no build step)

<script
  async
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.1.0/dist/trust-access.global.js"
></script>
<script
  async
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.1.0/dist/trust-subscribe.global.js"
></script>

Quick start

<asiri-trust-access tenant="YOUR_TENANT_SLUG"></asiri-trust-access>
<asiri-trust-subscribe tenant="YOUR_TENANT_SLUG"></asiri-trust-subscribe>

The form auto-loads your tenant name from the Asiri public Trust API (falling back to the slug).

<asiri-trust-access>

Captures: email (required), name (optional), company (optional), message (required).

import { mountAsiriTrustAccess } from '@asiri-ng/elements/trust-access';
 
mountAsiriTrustAccess({
  tenant: 'YOUR_TENANT_SLUG',
  variant: 'inline',
  resourceId: 'soc2-report',
  theme: 'auto',
});

Design tokens

asiri-trust-access {
  --asiri-ta-accent: #7c3aed;
  --asiri-ta-bg: #ffffff;
  --asiri-ta-bg-2: #f8fafc;
  --asiri-ta-text: #101322;
  --asiri-ta-muted: #647084;
  --asiri-ta-border: #dfe4ee;
  --asiri-ta-shadow: 0 22px 64px rgba(16, 24, 40, 0.14);
  --asiri-ta-danger: #c0392b;
  --asiri-ta-success: #2f9b63;
  --asiri-ta-font: Inter, sans-serif;
  --asiri-ta-radius: 10px;
}

Shadow parts

trigger, dialog, backdrop, header, form, field, label, input, textarea, submit, cancel, success, error, close.

<asiri-trust-subscribe>

Captures: email (required), name (optional), company (optional).

import { mountAsiriTrustSubscribe } from '@asiri-ng/elements/trust-subscribe';
 
mountAsiriTrustSubscribe({
  tenant: 'YOUR_TENANT_SLUG',
  variant: 'inline',
  segment: 'security-updates',
  theme: 'auto',
});

Design tokens

asiri-trust-subscribe {
  --asiri-ts-accent: #7c3aed;
  --asiri-ts-bg: #ffffff;
  --asiri-ts-bg-2: #f8fafc;
  --asiri-ts-text: #101322;
  --asiri-ts-muted: #647084;
  --asiri-ts-border: #dfe4ee;
  --asiri-ts-shadow: 0 22px 64px rgba(16, 24, 40, 0.14);
  --asiri-ts-danger: #c0392b;
  --asiri-ts-success: #2f9b63;
  --asiri-ts-font: Inter, sans-serif;
  --asiri-ts-radius: 10px;
}

Shadow parts

trigger, dialog, backdrop, header, form, field, label, input, submit, cancel, success, error, close.

Token precedence

For both components, explicit accent / radius attributes beat CSS token overrides, which beat built-in defaults.

Captcha (Cloudflare Turnstile)

When turnstile-site-key is provided each component lazily injects the Turnstile script (once per page), renders the widget inside the form, and sends the resulting token as captchaToken in the POST body. If omitted, the form submits without a token.

<asiri-trust-access tenant="acme" turnstile-site-key="0x4AAAAAAA..."></asiri-trust-access>
<asiri-trust-subscribe tenant="acme" turnstile-site-key="0x4AAAAAAA..."></asiri-trust-subscribe>

Accessibility

• Modal uses role="dialog" aria-modal="true" with a labelled title (aria-labelledby).
• Focus moves to the first field on open; a focus trap keeps Tab cycling within the dialog.
• Escape and clicking the backdrop both close the modal and restore focus to the trigger.
• Every field has a <label for>; required fields carry aria-required="true".
• Invalid fields receive aria-invalid="true" + aria-describedby pointing to the error message.
• All document listeners (Escape) and the prefers-color-scheme listener are removed in disconnectedCallback — no memory leaks.