{"_id":"@aho-sdk/components-web","_rev":"2-05a09291c62961157d99716e8d3de913","name":"@aho-sdk/components-web","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@aho-sdk/components-web","version":"0.1.1","keywords":["web-components","digital-credentials-api","mdl","mobile-drivers-license","age-verification","identity-verification","sdk","aho"],"author":{"name":"Aho","email":"support@aho.com"},"license":"MIT","_id":"@aho-sdk/components-web@0.1.1","maintainers":[{"name":"aho-support","email":"support@aho.com"}],"homepage":"https://aho.com/docs/sdks/ui/web-components","bugs":{"url":"https://github.com/aho-hq/aho-verify-js/issues"},"dist":{"shasum":"a2fb833b9be4604c856978dc6238feab9d625466","tarball":"https://registry.npmjs.org/@aho-sdk/components-web/-/components-web-0.1.1.tgz","fileCount":19,"integrity":"sha512-R3uEhrYOactVoqk/upL3UeJt1VWIVE4nnJuBEojHPJvxwB70qdvXBk51bHuvUqHtqq9W0JuJxQXTY38+W46A/A==","signatures":[{"sig":"MEYCIQCdslq09Rk0n92YaXxhFHW9dDxtSVfU3c5jtlvX85fqBgIhANtKx907OJLV658L11+OnCi7DYbCkEuNb84OlWC21klW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":316929},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","browser":"dist/browser/aho-components-web.min.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./browser":{"import":"./dist/browser/aho-components-web.min.js","require":"./dist/browser/aho-components-web.min.js"}},"gitHead":"24bafc3e9ba4991054b15411b00d40929e727ed6","scripts":{"test":"vitest run","build":"npm run build:esm && npm run build:browser","clean":"rm -rf dist","build:esm":"tsup src/index.ts --format cjs,esm --dts","typecheck":"tsc --noEmit","test:watch":"vitest","test:browser":"npm run build:browser && cp dist/browser/aho-components-web.min.js tests/browser/fixtures/ && playwright test","build:browser":"esbuild src/browser.ts --bundle --minify --format=iife --global-name=AhoComponents --outfile=dist/browser/aho-components-web.min.js"},"_npmUser":{"name":"aho-support","email":"support@aho.com"},"repository":{"url":"git+https://github.com/aho-hq/aho-verify-js.git","type":"git","directory":"packages/components-web"},"_npmVersion":"10.7.0","description":"Web Components for Digital Credentials API verification via Aho","directories":{},"_nodeVersion":"20.14.0","dependencies":{"@aho-sdk/verify":"^0.1.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","serve":"^14.0.0","esbuild":"^0.20.0","happy-dom":"^20.9.0","@playwright/test":"^1.42.0"},"peerDependencies":{"@aho-sdk/verify":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/components-web_0.1.1_1776873414633_0.19839097326122723","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aho-sdk/components-web","version":"0.1.2","description":"Web Components for Digital Credentials API verification via Aho","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","browser":"dist/browser/aho-components-web.min.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./browser":{"import":"./dist/browser/aho-components-web.min.js","require":"./dist/browser/aho-components-web.min.js"}},"scripts":{"build":"npm run build:esm && npm run build:browser","build:esm":"tsup src/index.ts --format cjs,esm --dts","build:browser":"esbuild src/browser.ts --bundle --minify --format=iife --global-name=AhoComponents --outfile=dist/browser/aho-components-web.min.js","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest","test:browser":"npm run build:browser && cp dist/browser/aho-components-web.min.js tests/browser/fixtures/ && playwright test","clean":"rm -rf dist"},"keywords":["web-components","digital-credentials-api","mdl","mobile-drivers-license","age-verification","identity-verification","sdk","aho"],"author":{"name":"Aho","email":"support@aho.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aho-hq/aho-verify-js.git","directory":"packages/components-web"},"homepage":"https://aho.com/docs/sdks/ui/web-components","bugs":{"url":"https://github.com/aho-hq/aho-verify-js/issues"},"dependencies":{"@aho-sdk/verify":"^0.1.0"},"devDependencies":{"@playwright/test":"^1.42.0","esbuild":"^0.20.0","happy-dom":"^20.9.0","serve":"^14.0.0","tsup":"^8.0.0"},"peerDependencies":{"@aho-sdk/verify":"^0.1.0"},"_id":"@aho-sdk/components-web@0.1.2","gitHead":"745a46b4667b4f32b7f8d94096cb7d7b22dbec12","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-qxUufmebdiGb1MVy9/dXtPJ36t9l7lsxoVzBu8OpNnS/RjfqrIY0ThPiqwj3vLYDexLRiRGW9g5ACzx4D7AsQw==","shasum":"e2534b835d0e23043bd8a11be4cd054d7370e8cc","tarball":"https://registry.npmjs.org/@aho-sdk/components-web/-/components-web-0.1.2.tgz","fileCount":19,"unpackedSize":318300,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCE2oy1sGcNu0sDmtt7ecD+OYOXz6zcwIJal+yTHqx3uAIgIeyJnT+3O00QXC2LhdKxtEnWWpMVPen1e2hPXitMd3s="}]},"_npmUser":{"name":"aho-support","email":"support@aho.com"},"directories":{},"maintainers":[{"name":"aho-support","email":"support@aho.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/components-web_0.1.2_1777567088877_0.951578022625011"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-22T15:56:54.471Z","modified":"2026-04-30T16:38:09.469Z","0.1.1":"2026-04-22T15:56:54.793Z","0.1.2":"2026-04-30T16:38:09.022Z"},"bugs":{"url":"https://github.com/aho-hq/aho-verify-js/issues"},"author":{"name":"Aho","email":"support@aho.com"},"license":"MIT","homepage":"https://aho.com/docs/sdks/ui/web-components","keywords":["web-components","digital-credentials-api","mdl","mobile-drivers-license","age-verification","identity-verification","sdk","aho"],"repository":{"type":"git","url":"git+https://github.com/aho-hq/aho-verify-js.git","directory":"packages/components-web"},"description":"Web Components for Digital Credentials API verification via Aho","maintainers":[{"name":"aho-support","email":"support@aho.com"}],"readme":"# @aho-sdk/components-web\n\nWeb Components for Digital Credentials API verification via Aho.\n\n## Installation\n\n```bash\nnpm install @aho-sdk/components-web\n```\n\nOr use the CDN:\n\n```html\n<script src=\"https://js.aho.com/v1/components-web\"></script>\n```\n\n## Quick Start\n\n### Using AhoProvider (Recommended)\n\n```html\n<script type=\"module\" src=\"@aho-sdk/components-web\"></script>\n\n<aho-provider api-key=\"aho_pub_xxx\" client-name=\"My App\">\n  <credential-button claims=\"age_over_21\">\n    Verify Age\n  </credential-button>\n</aho-provider>\n```\n\n### Using Global Configuration\n\n```html\n<script type=\"module\">\n  import { configure } from '@aho-sdk/components-web';\n\n  configure({\n    apiKey: 'aho_pub_xxx',\n    clientName: 'My App',\n  });\n</script>\n\n<credential-button claims=\"age_over_21\">\n  Verify Age\n</credential-button>\n```\n\n### Using Data Attributes (Plain HTML)\n\n```html\n<script src=\"https://js.aho.com/v1/components-web\"></script>\n<script>\n  AhoComponents.configure({ apiKey: 'aho_pub_xxx' });\n</script>\n\n<button data-aho-verify data-aho-claims=\"age_over_21\">\n  Verify Age\n</button>\n```\n\n## Configuration\n\nThere are three ways to configure Aho components (in priority order):\n\n1. **Element attributes** - Most specific, per-element\n2. **`<aho-provider>`** - Scoped to descendants\n3. **`configure()`** - Global fallback\n\n### Using `<aho-provider>`\n\nWrap components in a provider element:\n\n```html\n<aho-provider api-key=\"aho_pub_xxx\" client-name=\"My App\">\n  <credential-button claims=\"age_over_21\">Verify</credential-button>\n  <credential-display></credential-display>\n</aho-provider>\n```\n\nYou can nest providers for different configurations:\n\n```html\n<aho-provider api-key=\"aho_pub_main\">\n  <credential-button claims=\"age_over_21\">Main App</credential-button>\n\n  <aho-provider api-key=\"aho_pub_partner\" client-name=\"Partner\">\n    <credential-button claims=\"given_name\">Partner Widget</credential-button>\n  </aho-provider>\n</aho-provider>\n```\n\nOr configure programmatically:\n\n```javascript\nconst provider = document.querySelector('aho-provider');\nprovider.configure({\n  apiKey: 'aho_pub_xxx',\n  clientName: 'My App',\n});\n```\n\n### Using `configure()`\n\nCall `configure()` once before using any components:\n\n```typescript\nimport { configure } from '@aho-sdk/components-web';\n\nconfigure({\n  // Required: Your publishable API key\n  apiKey: 'aho_pub_xxx',\n\n  // Optional: Base URL for API calls (defaults to current origin)\n  baseUrl: 'https://api.example.com',\n\n  // Optional: Default client name shown in wallet dialogs\n  clientName: 'My App',\n\n  // Optional: Auto-initialize data-attribute buttons (default: true)\n  autoInit: true,\n});\n```\n\n## Web Component: `<aho-provider>`\n\nConfiguration provider for descendant components.\n\n### Attributes\n\n| Attribute | Description | Example |\n|-----------|-------------|---------|\n| `api-key` | Publishable API key | `\"aho_pub_xxx\"` |\n| `base-url` | Base URL for API calls | `\"https://api.example.com\"` |\n| `client-name` | Default client name for wallet dialogs | `\"My App\"` |\n\n### Methods\n\n| Method | Description |\n|--------|-------------|\n| `configure(config)` | Set configuration programmatically |\n| `config` | Get current configuration (readonly) |\n\n## Web Component: `<credential-button>`\n\n### Attributes\n\n| Attribute | Description | Example |\n|-----------|-------------|---------|\n| `claims` | Space or comma-separated claim types | `\"age_over_21 given_name\"` |\n| `document-types` | Document types to accept | `\"org.iso.18013.5.1.mDL\"` |\n| `client-name` | Name shown in wallet dialog | `\"My App\"` |\n| `api-key` | Override global API key | `\"aho_pub_xxx\"` |\n| `base-url` | Override global base URL | `\"https://api.example.com\"` |\n| `unsupported` | Behavior when DC API unavailable | `\"hide\"`, `\"disable\"`, `\"fallback\"` |\n| `disabled` | Disable the button | (boolean attribute) |\n\n### Events\n\nEvents are namespaced as `aho:credential:*`:\n\n```javascript\nconst button = document.querySelector('credential-button');\n\nbutton.addEventListener('aho:credential:statechange', (e) => {\n  console.log('State:', e.detail.state);\n  // States: creating_session, awaiting_credential, verifying, completed, failed, cancelled\n});\n\nbutton.addEventListener('aho:credential:verified', (e) => {\n  console.log('Verified!', e.detail.result);\n  // result: { verified, trusted, claims, issuer, sessionId }\n});\n\nbutton.addEventListener('aho:credential:failed', (e) => {\n  console.log('Requirements not met:', e.detail.reason);\n});\n\nbutton.addEventListener('aho:credential:error', (e) => {\n  console.error('Error:', e.detail.error);\n});\n\nbutton.addEventListener('aho:credential:cancelled', (e) => {\n  console.log('User cancelled:', e.detail.reason);\n});\n\nbutton.addEventListener('aho:credential:unsupported', (e) => {\n  console.warn('Not supported:', e.detail.reason);\n});\n```\n\n### CSS Custom Properties\n\nStyle the button using CSS custom properties:\n\n```css\ncredential-button {\n  /* Base styles */\n  --aho-button-bg: #2563eb;\n  --aho-button-color: white;\n  --aho-button-padding: 0.75rem 1.5rem;\n  --aho-button-radius: 0.5rem;\n  --aho-button-font: inherit;\n  --aho-button-font-size: 1rem;\n  --aho-button-font-weight: 500;\n\n  /* Hover state */\n  --aho-button-bg-hover: #1d4ed8;\n\n  /* Verification states */\n  --aho-button-bg-verifying: #6b7280;\n  --aho-button-bg-success: #059669;\n  --aho-button-bg-error: #dc2626;\n\n  /* Disabled state */\n  --aho-button-disabled-opacity: 0.5;\n\n  /* Focus outline */\n  --aho-button-outline: 2px solid #60a5fa;\n  --aho-button-outline-offset: 2px;\n}\n```\n\n### State Classes\n\nThe component applies these classes based on verification state:\n\n| Class | When Applied |\n|-------|--------------|\n| `.aho-idle` | Initial state, ready for verification |\n| `.aho-verifying` | Verification in progress |\n| `.aho-success` | Verification completed successfully |\n| `.aho-error` | Verification failed or was cancelled |\n\n## Web Component: `<credential-display>`\n\nDisplay rendered credentials after verification.\n\n### Basic Usage\n\n```html\n<!-- Server-rendered mode (typical post-verification) -->\n<credential-display src=\"/v1/sessions/abc123/render?sig=xyz\"></credential-display>\n\n<!-- With options -->\n<credential-display\n  src=\"/v1/sessions/abc123/render?sig=xyz\"\n  size=\"large\"\n  enable-download\n></credential-display>\n\n<!-- Controlled mode (pre-fetched data) -->\n<credential-display\n  data='{\"format\":\"svg\",\"content\":\"<svg>...</svg>\"}'\n></credential-display>\n```\n\n### Post-Verification Pattern\n\n```html\n<credential-button claims=\"age_over_21\" id=\"verify-btn\">\n  Verify Age\n</credential-button>\n\n<div id=\"credential-result\" style=\"display: none;\">\n  <credential-display id=\"credential-display\"></credential-display>\n</div>\n\n<script>\ndocument.getElementById('verify-btn').addEventListener('aho:credential:verified', (e) => {\n  document.getElementById('credential-display').setAttribute('src', e.detail.result.renderUrl);\n  document.getElementById('credential-result').style.display = 'block';\n});\n</script>\n```\n\n### Attributes\n\n| Attribute | Description | Example |\n|-----------|-------------|---------|\n| `src` | URL to fetch rendered credential | `\"/v1/sessions/abc/render?sig=xyz\"` |\n| `data` | Pre-fetched render response JSON | `'{\"format\":\"svg\",\"content\":\"...\"}'` |\n| `size` | Size variant | `\"compact\"`, `\"default\"`, `\"large\"` |\n| `enable-download` | Show download button | (boolean attribute) |\n\n### Events\n\n```javascript\nconst display = document.querySelector('credential-display');\n\ndisplay.addEventListener('aho:display:ready', () => {\n  console.log('Component ready');\n});\n\ndisplay.addEventListener('aho:display:loaded', (e) => {\n  console.log('Loaded:', e.detail.format, e.detail.templateKey);\n});\n\ndisplay.addEventListener('aho:display:error', (e) => {\n  console.error('Error:', e.detail.error);\n});\n\ndisplay.addEventListener('aho:display:download', (e) => {\n  console.log('Downloaded:', e.detail.format, e.detail.filename);\n});\n```\n\n### Programmatic Ready Check\n\n```javascript\nconst display = document.querySelector('credential-display');\nawait display.ready();  // Resolves when component is interactive\n```\n\n### CSS Custom Properties\n\n```css\ncredential-display {\n  --aho-display-bg: #ffffff;\n  --aho-display-border: 1px solid #e5e7eb;\n  --aho-display-radius: 0.75rem;\n  --aho-display-compact-width: 280px;\n  --aho-display-default-width: 400px;\n  --aho-display-large-width: 600px;\n  --aho-display-loading-bg: rgba(255, 255, 255, 0.9);\n  --aho-display-spinner-color: #e5e7eb;\n  --aho-display-spinner-active: #3b82f6;\n  --aho-display-error-color: #dc2626;\n  --aho-display-download-bg: rgba(255, 255, 255, 0.9);\n  --aho-display-download-border: 1px solid #e5e7eb;\n}\n```\n\n### State Classes\n\n| Class | When Applied |\n|-------|--------------|\n| `.aho-idle` | Initial state |\n| `.aho-verifying` | Fetching content |\n| `.aho-success` | Content rendered |\n| `.aho-error` | Loading failed |\n\n## Data Attributes API\n\nFor plain HTML buttons without custom elements:\n\n```html\n<button\n  data-aho-verify\n  data-aho-claims=\"age_over_21 given_name\"\n  data-aho-document-types=\"org.iso.18013.5.1.mDL\"\n  data-aho-client-name=\"My App\"\n  data-aho-unsupported=\"disable\"\n>\n  Verify Identity\n</button>\n```\n\n### Manual Initialization\n\nIf `autoInit` is disabled or you add buttons dynamically:\n\n```javascript\nimport { initDataAttributes } from '@aho-sdk/components-web';\n\n// Initialize all data-aho-verify buttons\ninitDataAttributes();\n\n// Or initialize within a specific container\ninitDataAttributes(document.querySelector('#my-container'));\n```\n\n## Available Claims\n\n```javascript\nimport { Claim } from '@aho-sdk/components-web';\n\n// Age verification\nClaim.AGE_OVER_18    // 'age_over_18'\nClaim.AGE_OVER_21    // 'age_over_21'\nClaim.AGE            // 'age'\nClaim.BIRTH_DATE     // 'birth_date'\n\n// Identity\nClaim.GIVEN_NAME     // 'given_name'\nClaim.FAMILY_NAME    // 'family_name'\nClaim.PORTRAIT       // 'portrait'\n\n// Address\nClaim.ADDRESS        // 'resident_address'\nClaim.CITY           // 'resident_city'\nClaim.STATE          // 'resident_state'\nClaim.POSTAL_CODE    // 'resident_postal_code'\nClaim.COUNTRY        // 'resident_country'\n\n// Document info\nClaim.DOCUMENT_NUMBER    // 'document_number'\nClaim.ISSUE_DATE         // 'issue_date'\nClaim.EXPIRY_DATE        // 'expiry_date'\nClaim.ISSUING_AUTHORITY  // 'issuing_authority'\n```\n\n## Document Types\n\n```javascript\nimport { DocumentType } from '@aho-sdk/components-web';\n\nDocumentType.MOBILE_DRIVERS_LICENSE  // 'org.iso.18013.5.1.mDL'\nDocumentType.PHOTO_ID                // 'org.iso.23220.photoid.1'\nDocumentType.EU_PERSONAL_ID          // 'eu.europa.ec.eudi.pid.1'\nDocumentType.JAPAN_MY_NUMBER_CARD    // 'org.iso.23220.1.jp.mnc'\n```\n\n## Browser Support\n\nThe Digital Credentials API is supported in:\n- Chrome on Android (with Google Wallet)\n- Safari on iOS 18+ (with Apple Wallet)\n\nUse the `unsupported` attribute to handle unsupported browsers:\n- `\"disable\"` (default) - Disables the button\n- `\"hide\"` - Hides the button completely\n- `\"fallback\"` - Triggers `aho:unsupported` event for custom handling\n\n## TypeScript\n\nFull TypeScript support with exported types:\n\n```typescript\nimport type {\n  AhoComponentsConfig,\n  AhoElementEventMap,\n  VerifyResult,\n  VerifyState,\n  ClaimType,\n} from '@aho-sdk/components-web';\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}