{"_id":"@akash-aw/aw-wizard-forms","name":"@akash-aw/aw-wizard-forms","dist-tags":{"latest":"4.14.0"},"versions":{"4.14.0":{"name":"@akash-aw/aw-wizard-forms","version":"4.14.0","publishConfig":{"access":"public"},"description":"A lightweight, Typeform-style multi-step form web component for Webflow + HubSpot integration","main":"dist/wizard-form.min.js","module":"dist/wizard-form.esm.js","browser":"dist/wizard-form.min.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/wizard-form.esm.js","require":"./dist/wizard-form.min.js","types":"./dist/index.d.ts"}},"scripts":{"dev":"vite --config vite.config.mts","dev:watch":"vite build --watch --config vite.config.mts","build":"tsc && vite build --config vite.config.mts","build:types":"tsc --emitDeclarationOnly","preview":"vite preview","test":"vitest","test:ui":"vitest --ui","test:run":"vitest run","test:coverage":"vitest run --coverage","test:e2e":"playwright test","lint":"eslint src --ext .ts","lint:fix":"eslint src --ext .ts --fix","format":"prettier --write \"src/**/*.ts\"","format:check":"prettier --check \"src/**/*.ts\"","typecheck":"tsc --noEmit","size":"yarn build && gzip -c dist/wizard-form.min.js | wc -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build -o storybook-static","test:storybook":"test-storybook"},"keywords":["form","wizard","multi-step","typeform","hubspot","webflow","web-component","custom-element","lit","lightweight"],"author":{"name":"Atomicwork"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/atomicworkhq/aw-wizard-forms.git"},"devDependencies":{"@open-wc/testing":"^4.0.0","@playwright/test":"^1.40.0","@semantic-release/changelog":"6","@semantic-release/git":"10","@storybook/addon-a11y":"^8","@storybook/addon-essentials":"^8","@storybook/addon-interactions":"^8","@storybook/addon-themes":"^8","@storybook/blocks":"^8","@storybook/test":"^8","@storybook/test-runner":"^0.19","@storybook/web-components-vite":"^8","@typescript-eslint/eslint-plugin":"^8.50.1","@typescript-eslint/parser":"^8.50.1","@vitest/coverage-v8":"^1.0.0","@vitest/ui":"^1.0.0","concurrently":"^9.2.1","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.29.0","http-server":"^14.1.1","jsdom":"^27.3.0","lightningcss":"^1.30.2","prettier":"^3.1.0","rollup-plugin-visualizer":"^6.0.5","semantic-release":"23","serve":"^14.2.5","storybook":"^8","terser":"^5.44.1","typescript":"^5.9.3","vite":"^5.0.0","vitest":"^1.0.0","wait-on":"^9.0.3"},"dependencies":{"@webflow/webflow-cli":"^1.10.0","lit":"^3.3.1"},"engines":{"node":">=18.0.0"},"_id":"@akash-aw/aw-wizard-forms@4.14.0","gitHead":"fc3004beeea972d0637b2b8e0e9686f523877e3d","bugs":{"url":"https://github.com/atomicworkhq/aw-wizard-forms/issues"},"homepage":"https://github.com/atomicworkhq/aw-wizard-forms#readme","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-wO2dTAzW3HNCZvkARJYlDbOWZAH9EBHWF8Ht1ZxZkSfwC1inE5gLuKN320eGR85Ey+RsmStryMPIcmujkTsbWg==","shasum":"978cb16a301e4ed21eb98c09df0e765fa7c4fce0","tarball":"https://registry.npmjs.org/@akash-aw/aw-wizard-forms/-/aw-wizard-forms-4.14.0.tgz","fileCount":6,"unpackedSize":913138,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD8Es2Q/yCMEUyigEaAUs5o1MLEDHFnKksr7bS/5KpN1wIgYUu5SksLcTssy6D5xzEViB896IwyQzI786VU1ZlQoYA="}]},"_npmUser":{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"},"directories":{},"maintainers":[{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/aw-wizard-forms_4.14.0_1775840263609_0.1645283349343949"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T16:57:43.540Z","4.14.0":"2026-04-10T16:57:43.800Z","modified":"2026-04-10T16:57:44.037Z"},"maintainers":[{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"}],"description":"A lightweight, Typeform-style multi-step form web component for Webflow + HubSpot integration","homepage":"https://github.com/atomicworkhq/aw-wizard-forms#readme","keywords":["form","wizard","multi-step","typeform","hubspot","webflow","web-component","custom-element","lit","lightweight"],"repository":{"type":"git","url":"git+https://github.com/atomicworkhq/aw-wizard-forms.git"},"author":{"name":"Atomicwork"},"bugs":{"url":"https://github.com/atomicworkhq/aw-wizard-forms/issues"},"license":"MIT","readme":"# aw-wizard-forms\n\nA lightweight, Typeform-style multi-step form wizard built with Lit Web Components.\n\n## Features\n\n- **Lightweight**: ~15KB (Brotli) / ~18KB (gzip) including Lit\n- **Single Script Tag**: Easy embedding with `WizardForm.init()`\n- **Declarative Components**: HTML-based composition with custom elements\n- **Keyboard Navigation**: A-Z badges, Enter/Escape, arrow keys\n- **Validation**: Debounced validation with custom validators\n- **Theming**: CSS Custom Properties (`--wf-*` prefix)\n- **Adapters**: HubSpot, Webhook, RevenueHero integrations\n\n## Installation\n\n### CDN (Recommended)\n\n```html\n<!-- Pin to specific version (recommended) -->\n<script src=\"https://cdn.jsdelivr.net/npm/aw-wizard-forms@4.9.3/dist/wizard-form.min.js\"></script>\n\n<!-- Or use latest (auto-updates) -->\n<script src=\"https://cdn.jsdelivr.net/npm/aw-wizard-forms@latest/dist/wizard-form.min.js\"></script>\n```\n\nReplace `4.9.3` with your desired version. See [npm](https://www.npmjs.com/package/aw-wizard-forms) for available versions.\n\n## Quick Start\n\n```html\n<wizard-form id=\"demo-form\">\n  <wf-step data-step=\"1\">\n    <wf-input name=\"fullName\" label=\"Full Name\" required></wf-input>\n    <wf-email name=\"email\" label=\"Email\" work-email required></wf-email>\n  </wf-step>\n\n  <wf-step data-step=\"2\">\n    <wf-options name=\"companySize\" required>\n      <wf-option value=\"1-10\">1-10 employees</wf-option>\n      <wf-option value=\"11-50\">11-50 employees</wf-option>\n      <wf-option value=\"51+\">51+ employees</wf-option>\n    </wf-options>\n  </wf-step>\n\n  <div slot=\"success\">\n    <h2>Thank you!</h2>\n    <p>We'll be in touch soon.</p>\n  </div>\n</wizard-form>\n\n<script>\n  WizardForm.init({\n    container: '#demo-form',\n    adapter: 'hubspot',\n    hubspot: {\n      portalId: '12345',\n      formId: 'abc-123',\n    },\n    onSubmit: (data) => console.log('Submitted:', data),\n    onSuccess: () => console.log('Success!'),\n    onError: (err) => console.error('Error:', err),\n  });\n</script>\n```\n\n## Components\n\n| Component | Description |\n|-----------|-------------|\n| `<wizard-form>` | Main container/orchestrator |\n| `<wf-step>` | Step container (use `data-step=\"N\"`) |\n| `<wf-input>` | Text input with validation |\n| `<wf-number>` | Number input with min/max/step |\n| `<wf-email>` | Email input with work-email validation |\n| `<wf-textarea>` | Multiline text input |\n| `<wf-options>` | Radio/checkbox option group |\n| `<wf-option>` | Individual option card |\n\n## Adapters\n\n### HubSpot\n\n```javascript\nWizardForm.init({\n  container: '#form',\n  adapter: 'hubspot',\n  hubspot: {\n    portalId: '12345',\n    formId: 'abc-123',\n    fieldMapping: {\n      fullName: 'firstname', // Map form fields to HubSpot fields\n    },\n  },\n});\n```\n\n### Webhook\n\n```javascript\nWizardForm.init({\n  container: '#form',\n  adapter: 'webhook',\n  webhook: {\n    url: 'https://api.example.com/submit',\n    method: 'POST',\n    headers: {\n      'X-API-Key': 'your-key',\n    },\n  },\n});\n```\n\n### RevenueHero\n\n```javascript\nWizardForm.init({\n  container: '#form',\n  adapter: 'revenuehero',\n  revenuehero: {\n    routerId: 'your-router-id',\n  },\n});\n```\n\n## Theming\n\nCustomize with CSS Custom Properties:\n\n```css\nwizard-form {\n  --wf-color-primary: #8b5cf6;\n  --wf-color-surface: #f8f9fa;\n  --wf-color-text: #212529;\n  --wf-color-error: #dc3545;\n  --wf-radius-lg: 12px;\n  --wf-font-size-base: 16px;\n}\n```\n\n## Keyboard Shortcuts\n\n| Key | Action |\n|-----|--------|\n| A-Z | Select option by badge |\n| Enter | Next step / Submit |\n| Escape | Previous step |\n| ↑/↓ | Navigate options |\n| Tab | Navigate fields |\n\n## Development\n\n```bash\n# Install dependencies\nyarn\n\n# Development server\nyarn dev\n\n# Run tests\nyarn test          # Unit tests (Vitest)\nyarn test:e2e      # E2E tests (Playwright)\n\n# Build\nyarn build\n\n# Check bundle size\nyarn size\n```\n\n## Bundle Size\n\n| Compression | Size |\n|-------------|------|\n| Raw | 78KB |\n| Gzip | 17.7KB |\n| **Brotli** | **15.5KB** |\n\n## Browser Support\n\nModern browsers (ES2020+):\n- Chrome 80+\n- Firefox 78+\n- Safari 14+\n- Edge 80+\n\n## Known Issues\n\n### Step disappears intermittently with `submit-on-step` enabled\n\n**Status:** Under investigation\n\nWhen using the `submit-on-step` attribute for partial HubSpot submissions, the next step may occasionally disappear (blank content area while progress bar updates correctly). This is a rare, intermittent issue.\n\n**Workaround:** If you encounter this, refresh the page. The issue does not affect final form submission.\n\n**Debug:** Run this in console when it occurs to help diagnose:\n```javascript\ndocument.querySelectorAll('wf-step').forEach((step, i) => {\n  console.log(`Step ${i + 1}:`, {\n    active: step.hasAttribute('active'),\n    display: getComputedStyle(step).display,\n    height: step.offsetHeight\n  });\n});\n```\n\nTrack progress: [GitHub Issue #31](https://github.com/atomicworkhq/aw-wizard-forms/issues/31)\n\n## License\n\nMIT © [Atomicwork](https://atomicwork.com)\n","readmeFilename":"README.md","_rev":"1-5225696ccb0d3ae369234c55820e5564"}