{"_id":"@bootcn-vue/field-password","_rev":"3-f6b7e9c0dca276d394eb62149f2f6f1c","name":"@bootcn-vue/field-password","dist-tags":{"latest":"0.2.2"},"versions":{"0.2.0":{"name":"@bootcn-vue/field-password","version":"0.2.0","keywords":["vue","vue3","bootstrap","field-password","components"],"author":{"name":"Shashank Shandilya"},"license":"MIT","_id":"@bootcn-vue/field-password@0.2.0","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"homepage":"https://banavasi.github.io/Bootcn-vue/?path=/docs/components-fieldpassword--docs","bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"dist":{"shasum":"3a2d14c80cf5efa30f05bc656fcbe67afeab440e","tarball":"https://registry.npmjs.org/@bootcn-vue/field-password/-/field-password-0.2.0.tgz","fileCount":10,"integrity":"sha512-cOcW8zsov+kTfFw45DF3feU3LXYhWv9oGFNYxaj8gPG8NefwCffHrIxIneWs0yVbk60KE34W6pCiSFBA5kAd9g==","signatures":[{"sig":"MEUCIQDEJhhUxHPjFy4gpgRhpS+bUnQIYoySFguOuAVuxm43BgIgP8wrcS6eDgWQFKaHG5eNTGZFo8Z37OxB/aLQGJDfbBY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bootcn-vue%2ffield-password@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":18627},"main":"./dist/index.js","type":"module","_from":"file:bootcn-vue-field-password-0.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./FieldPassword":{"types":"./src/FieldPassword/index.d.ts","import":"./src/FieldPassword/index.ts"}},"scripts":{"dev":"tsup --watch","lint":"eslint src --fix","test":"vitest run","build":"tsup","clean":"rm -rf dist","test:watch":"vitest","type-check":"tsc --noEmit"},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"_resolved":"/tmp/1d0852a6e2bf9d26a9dfa6d8e36f9663/bootcn-vue-field-password-0.2.0.tgz","_integrity":"sha512-cOcW8zsov+kTfFw45DF3feU3LXYhWv9oGFNYxaj8gPG8NefwCffHrIxIneWs0yVbk60KE34W6pCiSFBA5kAd9g==","repository":{"url":"git+https://github.com/banavasi/Bootcn-vue.git","type":"git","directory":"packages/field-password"},"_npmVersion":"10.9.4","description":"Password field component with show/hide toggle","directories":{},"_nodeVersion":"22.21.1","dependencies":{"reka-ui":"^2.2.1","@bootcn-vue/core":"0.4.0","@bootcn-vue/forms":"0.5.0","@bootcn-vue/tooltip":"0.2.0","class-variance-authority":"^0.7.1","@fortawesome/vue-fontawesome":"^3.1.3","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.3.5","jsdom":"^26.0.0","vitest":"^3.1.1","typescript":"~5.8.0","unplugin-vue":"^7.1.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^5.2.0"},"peerDependencies":{"vue":"^3.5.0","bootstrap":"^5.3.0"},"_npmOperationalInternal":{"tmp":"tmp/field-password_0.2.0_1768291242849_0.33313983359042876","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@bootcn-vue/field-password","version":"0.2.1","keywords":["vue","vue3","bootstrap","field-password","components"],"author":{"name":"Shashank Shandilya"},"license":"MIT","_id":"@bootcn-vue/field-password@0.2.1","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"homepage":"https://banavasi.github.io/Bootcn-vue/?path=/docs/components-fieldpassword--docs","bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"dist":{"shasum":"102ac09928aededa56b30511824fc9138b82a2de","tarball":"https://registry.npmjs.org/@bootcn-vue/field-password/-/field-password-0.2.1.tgz","fileCount":10,"integrity":"sha512-/2XH1rzHYOWlXLf8KD4EGsvHLqG/IAgP8Qq4rWNabbGjt+TXIaFP0mlHJzCEQPUCDNzQJvj8BRsjbVp7qFO2ig==","signatures":[{"sig":"MEQCIB/92EqfPfg0YpnKMUVUwpDZzejSwCPB0qrrezUPUEGWAiByj7rQs7EKNjQ0s7nJfS/Jdm2QzMjGwyo6mkBeE+fEfw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bootcn-vue%2ffield-password@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":28008},"main":"./dist/index.js","type":"module","_from":"file:bootcn-vue-field-password-0.2.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./FieldPassword":{"types":"./src/FieldPassword/index.d.ts","import":"./src/FieldPassword/index.ts"}},"scripts":{"dev":"tsup --watch","lint":"eslint src --fix","test":"vitest run","build":"tsup","clean":"rm -rf dist","test:watch":"vitest","type-check":"tsc --noEmit"},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"_resolved":"/tmp/49e496533712b268efce6d7b01e08e8e/bootcn-vue-field-password-0.2.1.tgz","_integrity":"sha512-/2XH1rzHYOWlXLf8KD4EGsvHLqG/IAgP8Qq4rWNabbGjt+TXIaFP0mlHJzCEQPUCDNzQJvj8BRsjbVp7qFO2ig==","repository":{"url":"git+https://github.com/banavasi/Bootcn-vue.git","type":"git","directory":"packages/field-password"},"_npmVersion":"10.9.4","description":"Password field component with show/hide toggle","directories":{},"_nodeVersion":"22.21.1","dependencies":{"reka-ui":"^2.2.1","@bootcn-vue/core":"0.4.0","@bootcn-vue/forms":"0.6.0","@bootcn-vue/tooltip":"0.2.1","class-variance-authority":"^0.7.1","@fortawesome/vue-fontawesome":"^3.1.3","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.3.5","jsdom":"^26.0.0","vitest":"^3.1.1","typescript":"~5.8.0","unplugin-vue":"^7.1.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^5.2.0"},"peerDependencies":{"vue":"^3.5.0","bootstrap":"^5.3.0"},"_npmOperationalInternal":{"tmp":"tmp/field-password_0.2.1_1768328916177_0.25713302739478117","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@bootcn-vue/field-password","version":"0.2.2","description":"Password field component with show/hide toggle","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./FieldPassword":{"types":"./src/FieldPassword/index.d.ts","import":"./src/FieldPassword/index.ts"}},"dependencies":{"@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0","@fortawesome/vue-fontawesome":"^3.1.3","class-variance-authority":"^0.7.1","reka-ui":"^2.2.1","@bootcn-vue/core":"0.4.0","@bootcn-vue/forms":"0.6.2","@bootcn-vue/tooltip":"0.2.2"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.0","@vue/test-utils":"^2.4.6","jsdom":"^26.0.0","tsup":"^8.3.5","typescript":"~5.8.0","unplugin-vue":"^7.1.0","vitest":"^3.1.1","vue":"^3.5.13"},"peerDependencies":{"bootstrap":"^5.3.0","vue":"^3.5.0"},"publishConfig":{"access":"public","provenance":true},"repository":{"type":"git","url":"git+https://github.com/banavasi/Bootcn-vue.git","directory":"packages/field-password"},"homepage":"https://banavasi.github.io/Bootcn-vue/?path=/docs/components-fieldpassword--docs","bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"keywords":["vue","vue3","bootstrap","field-password","components"],"author":{"name":"Shashank Shandilya"},"license":"MIT","scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","type-check":"tsc --noEmit","lint":"eslint src --fix","test":"vitest run","test:watch":"vitest"},"_id":"@bootcn-vue/field-password@0.2.2","_integrity":"sha512-nWREwrZNsfu5GI/E8RxejFov4htERqIAS+PnhCw0HZpl9iTCYMDe0n1DemEkhBDTxejsqfppnUAJi+ruTovvUg==","_resolved":"/tmp/f812ed66db9c9d75bd77401c5acc359c/bootcn-vue-field-password-0.2.2.tgz","_from":"file:bootcn-vue-field-password-0.2.2.tgz","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-nWREwrZNsfu5GI/E8RxejFov4htERqIAS+PnhCw0HZpl9iTCYMDe0n1DemEkhBDTxejsqfppnUAJi+ruTovvUg==","shasum":"393413e96c5e411bd9f16d039492238e72ec75e9","tarball":"https://registry.npmjs.org/@bootcn-vue/field-password/-/field-password-0.2.2.tgz","fileCount":10,"unpackedSize":28008,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bootcn-vue%2ffield-password@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDXf42Q5kfa0rQD+BAKoBQLFkKTybpp1l7MkLwy/mAtKAIgX1p3oPYHowqwrcC3nqAX+wFScRzHlDys3WsuF/yM/hM="}]},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"directories":{},"maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/field-password_0.2.2_1768368472955_0.6896724813147164"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-13T08:00:42.710Z","modified":"2026-01-14T05:27:53.428Z","0.2.0":"2026-01-13T08:00:43.014Z","0.2.1":"2026-01-13T18:28:36.340Z","0.2.2":"2026-01-14T05:27:53.095Z"},"bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"author":{"name":"Shashank Shandilya"},"license":"MIT","homepage":"https://banavasi.github.io/Bootcn-vue/?path=/docs/components-fieldpassword--docs","keywords":["vue","vue3","bootstrap","field-password","components"],"repository":{"type":"git","url":"git+https://github.com/banavasi/Bootcn-vue.git","directory":"packages/field-password"},"description":"Password field component with show/hide toggle","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"readme":"# @bootcn-vue/field-password\n\nComplete password field component with show/hide toggle functionality for Vue 3.\n\n[![npm version](https://badge.fury.io/js/@bootcn-vue%2Ffield-password.svg)](https://www.npmjs.com/package/@bootcn-vue/field-password)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## 📚 Documentation\n\n**[View Components & Examples](https://banavasi.github.io/Bootcn-vue/?path=/docs/forms-field-password--docs)** - Interactive Storybook\n\n## Overview\n\nA complete, production-ready password field component with toggle visibility, label, help text, error messages, and an optional helper slot. Perfect for login forms, registration, and password change interfaces.\n\n## Installation\n\n### Using CLI (Recommended)\n\n```bash\n# Initialize bootcn-vue (if not already done)\nnpx @bootcn-vue/cli@latest init\n\n# Add field-password component (when available)\nnpx @bootcn-vue/cli@latest add field-password\n```\n\n### Direct Installation\n\n```bash\nnpm install @bootcn-vue/field-password @bootcn-vue/forms @bootcn-vue/core bootstrap\n```\n\n## Features\n\n- ✅ **Show/Hide Toggle** - Eye icon button to toggle password visibility\n- ✅ **Cursor Position Preservation** - Maintains cursor position when toggling\n- ✅ **Complete Field** - Label, input, help text, and error messages included\n- ✅ **Helper Slot** - Flexible slot for requirements, strength indicators, or \"Forgot password?\" links\n- ✅ **Accessible** - Full ARIA support and keyboard navigation\n- ✅ **Validation** - Built-in error message display\n- ✅ **Tooltips** - Optional info tooltips next to labels\n- ✅ **TypeScript** - Full type safety\n- ✅ **Bootstrap Styled** - Consistent with Bootstrap 5 forms\n- ✅ **RDS Spacing** - Uses RDS spacing system\n\n## Usage\n\n### Basic Example\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { ref } from \"vue\";\n\nconst password = ref(\"\");\n</script>\n\n<template>\n  <FieldPassword\n    id=\"password\"\n    label=\"Password\"\n    v-model=\"password\"\n    placeholder=\"Enter your password\"\n    required\n  />\n</template>\n```\n\n### Login Form\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { ref } from \"vue\";\n\nconst password = ref(\"\");\n</script>\n\n<template>\n  <form @submit.prevent=\"handleLogin\">\n    <FieldPassword\n      id=\"password\"\n      label=\"Password\"\n      v-model=\"password\"\n      placeholder=\"Enter your password\"\n      autocomplete=\"current-password\"\n      required\n    >\n      <template #helper>\n        <a href=\"/forgot-password\" class=\"small text-muted\">\n          Forgot password?\n        </a>\n      </template>\n    </FieldPassword>\n\n    <button type=\"submit\" class=\"btn btn-primary mt-space-sm\">Sign In</button>\n  </form>\n</template>\n```\n\n### Registration with Password Requirements\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { ref, computed } from \"vue\";\n\nconst password = ref(\"\");\n\nconst requirements = computed(() => ({\n  length: password.value.length >= 8,\n  uppercase: /[A-Z]/.test(password.value),\n  lowercase: /[a-z]/.test(password.value),\n  number: /[0-9]/.test(password.value),\n  special: /[!@#$%^&*]/.test(password.value),\n}));\n\nconst allMet = computed(() => Object.values(requirements.value).every(Boolean));\n</script>\n\n<template>\n  <FieldPassword\n    id=\"password\"\n    label=\"Create Password\"\n    v-model=\"password\"\n    placeholder=\"Choose a strong password\"\n    autocomplete=\"new-password\"\n    required\n  >\n    <template #helper>\n      <div class=\"small mt-space-xxs\">\n        <p class=\"mb-1 fw-semibold\">Password must contain:</p>\n        <ul class=\"list-unstyled mb-0\">\n          <li :class=\"requirements.length ? 'text-success' : 'text-muted'\">\n            <i\n              :class=\"\n                requirements.length\n                  ? 'fa-solid fa-check'\n                  : 'fa-regular fa-circle'\n              \"\n            />\n            At least 8 characters\n          </li>\n          <li :class=\"requirements.uppercase ? 'text-success' : 'text-muted'\">\n            <i\n              :class=\"\n                requirements.uppercase\n                  ? 'fa-solid fa-check'\n                  : 'fa-regular fa-circle'\n              \"\n            />\n            One uppercase letter\n          </li>\n          <li :class=\"requirements.lowercase ? 'text-success' : 'text-muted'\">\n            <i\n              :class=\"\n                requirements.lowercase\n                  ? 'fa-solid fa-check'\n                  : 'fa-regular fa-circle'\n              \"\n            />\n            One lowercase letter\n          </li>\n          <li :class=\"requirements.number ? 'text-success' : 'text-muted'\">\n            <i\n              :class=\"\n                requirements.number\n                  ? 'fa-solid fa-check'\n                  : 'fa-regular fa-circle'\n              \"\n            />\n            One number\n          </li>\n          <li :class=\"requirements.special ? 'text-success' : 'text-muted'\">\n            <i\n              :class=\"\n                requirements.special\n                  ? 'fa-solid fa-check'\n                  : 'fa-regular fa-circle'\n              \"\n            />\n            One special character (!@#$%^&*)\n          </li>\n        </ul>\n      </div>\n    </template>\n  </FieldPassword>\n</template>\n```\n\n### With Validation\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { ref, computed } from \"vue\";\n\nconst password = ref(\"\");\nconst error = computed(() => {\n  if (!password.value) return \"Password is required\";\n  if (password.value.length < 8)\n    return \"Password must be at least 8 characters\";\n  if (!/[A-Z]/.test(password.value))\n    return \"Password must contain an uppercase letter\";\n  if (!/[0-9]/.test(password.value)) return \"Password must contain a number\";\n  return \"\";\n});\n</script>\n\n<template>\n  <FieldPassword\n    id=\"password\"\n    label=\"Password\"\n    v-model=\"password\"\n    :error=\"error\"\n    help-text=\"Choose a strong password\"\n    required\n  />\n</template>\n```\n\n### Password Confirmation\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { ref, computed } from \"vue\";\n\nconst password = ref(\"\");\nconst confirmPassword = ref(\"\");\n\nconst confirmError = computed(() => {\n  if (!confirmPassword.value) return \"Please confirm your password\";\n  if (confirmPassword.value !== password.value) return \"Passwords do not match\";\n  return \"\";\n});\n</script>\n\n<template>\n  <div>\n    <FieldPassword\n      id=\"password\"\n      label=\"New Password\"\n      v-model=\"password\"\n      placeholder=\"Enter password\"\n      autocomplete=\"new-password\"\n      required\n    />\n\n    <FieldPassword\n      id=\"confirm-password\"\n      label=\"Confirm Password\"\n      v-model=\"confirmPassword\"\n      placeholder=\"Re-enter password\"\n      autocomplete=\"new-password\"\n      :error=\"confirmError\"\n      required\n      class=\"mt-space-sm\"\n    />\n  </div>\n</template>\n```\n\n### With Tooltip\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { ref } from \"vue\";\n\nconst password = ref(\"\");\n</script>\n\n<template>\n  <FieldPassword\n    id=\"password\"\n    label=\"Password\"\n    v-model=\"password\"\n    tooltip-message=\"Your password should be at least 8 characters and include uppercase, lowercase, and numbers\"\n    required\n  />\n</template>\n```\n\n### Optional Field\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { ref } from \"vue\";\n\nconst optionalPassword = ref(\"\");\n</script>\n\n<template>\n  <FieldPassword\n    id=\"optional-password\"\n    label=\"Additional Password\"\n    v-model=\"optionalPassword\"\n    :is-optional=\"true\"\n    optional-text=\"Optional\"\n    help-text=\"Only required for advanced features\"\n  />\n</template>\n```\n\n## Props\n\n| Prop             | Type                                 | Default              | Description                            |\n| ---------------- | ------------------------------------ | -------------------- | -------------------------------------- |\n| `id`             | `string`                             | **required**         | Unique ID for the input element        |\n| `label`          | `string`                             | **required**         | Label text for the field               |\n| `modelValue`     | `string`                             | `''`                 | v-model binding for the password value |\n| `placeholder`    | `string`                             | `undefined`          | Placeholder text                       |\n| `required`       | `boolean`                            | `false`              | Mark field as required                 |\n| `disabled`       | `boolean`                            | `false`              | Disable the input                      |\n| `readonly`       | `boolean`                            | `false`              | Make input readonly                    |\n| `error`          | `string`                             | `undefined`          | Error message to display               |\n| `helpText`       | `string`                             | `undefined`          | Help text below input                  |\n| `tooltipMessage` | `string`                             | `undefined`          | Tooltip next to label                  |\n| `isOptional`     | `boolean`                            | `false`              | Show optional badge                    |\n| `optionalText`   | `string`                             | `'Optional'`         | Custom optional badge text             |\n| `labelLevel`     | `'h1'\\|'h2'\\|'h3'\\|'h4'\\|'h5'\\|'h6'` | `'h3'`               | Heading level for label                |\n| `labelSize`      | `'small'\\|'medium'\\|'large'`         | `'small'`            | Label font size                        |\n| `labelVisible`   | `boolean`                            | `true`               | Show/hide label visually               |\n| `autocomplete`   | `string`                             | `'current-password'` | Autocomplete attribute                 |\n| `class`          | `string`                             | `undefined`          | Additional CSS classes                 |\n\n**Autocomplete values:**\n\n- `current-password` - For login forms (default)\n- `new-password` - For registration and password change forms\n\n## Slots\n\n### `helper`\n\nCustom content area below the input field, perfect for:\n\n- Password requirements checklist\n- Password strength indicator\n- \"Forgot password?\" link\n- Additional help text or actions\n\n```vue\n<template>\n  <FieldPassword id=\"pwd\" label=\"Password\">\n    <template #helper>\n      <!-- Your custom content here -->\n    </template>\n  </FieldPassword>\n</template>\n```\n\n**Note:** The helper slot replaces `helpText` prop if both are provided.\n\n## Events\n\n| Event               | Payload  | Description                      |\n| ------------------- | -------- | -------------------------------- |\n| `update:modelValue` | `string` | Emitted when input value changes |\n\n## Toggle Button Behavior\n\nThe show/hide toggle button:\n\n- Shows an eye icon (👁️) when password is hidden\n- Shows an eye-slash icon (👁️‍🗨️) when password is visible\n- Has proper `aria-label` for screen readers\n- Preserves cursor position when toggling\n- Uses `type=\"button\"` to prevent form submission\n- Is keyboard accessible (Tab to focus, Enter/Space to toggle)\n\n## Accessibility\n\nThe component follows WCAG 2.1 guidelines:\n\n- ✅ **Proper Labels** - Label associated with input via `for`/`id`\n- ✅ **Toggle Button** - Accessible with `aria-label` and screen reader text\n- ✅ **Required Fields** - `aria-required` attribute\n- ✅ **Error States** - `aria-invalid` and `aria-describedby` for errors\n- ✅ **Help Text** - Associated via `aria-describedby`\n- ✅ **Keyboard Navigation** - Full keyboard support\n- ✅ **Focus Management** - Proper focus indicators\n- ✅ **Screen Readers** - All content announced properly\n\n## Styling\n\nThe component uses Bootstrap 5 classes and RDS spacing:\n\n```vue\n<template>\n  <FieldPassword\n    id=\"password\"\n    label=\"Password\"\n    v-model=\"password\"\n    class=\"mb-space-md\"\n  />\n</template>\n```\n\n## Form Integration\n\nWorks seamlessly with form libraries:\n\n### With VeeValidate\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { useField } from \"vee-validate\";\n\nconst { value, errorMessage } = useField(\"password\", \"required|min:8\");\n</script>\n\n<template>\n  <FieldPassword\n    id=\"password\"\n    label=\"Password\"\n    v-model=\"value\"\n    :error=\"errorMessage\"\n    required\n  />\n</template>\n```\n\n### With Zod\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldPassword } from \"@bootcn-vue/field-password\";\nimport { ref, computed } from \"vue\";\nimport { z } from \"zod\";\n\nconst passwordSchema = z\n  .string()\n  .min(8, \"Password must be at least 8 characters\")\n  .regex(/[A-Z]/, \"Must contain uppercase letter\")\n  .regex(/[0-9]/, \"Must contain number\");\n\nconst password = ref(\"\");\n\nconst error = computed(() => {\n  const result = passwordSchema.safeParse(password.value);\n  return result.success ? \"\" : result.error.issues[0].message;\n});\n</script>\n\n<template>\n  <FieldPassword\n    id=\"password\"\n    label=\"Password\"\n    v-model=\"password\"\n    :error=\"error\"\n  />\n</template>\n```\n\n## Security Considerations\n\n- Password is masked by default (type=\"password\")\n- Toggle button allows users to verify input\n- Cursor position is preserved to avoid user confusion\n- No password value is exposed in DOM attributes\n- Works with browser password managers\n- Supports autocomplete for better UX\n\n## Dependencies\n\n- `@bootcn-vue/forms` - Form primitives (includes InputPassword)\n- `@bootcn-vue/core` - Core utilities\n- `@fortawesome/vue-fontawesome` - Icons for toggle button\n\n## Peer Dependencies\n\n- `vue` ^3.5.0\n- `bootstrap` ^5.3.0\n\n## Links\n\n- **[GitHub Repository](https://github.com/banavasi/Bootcn-vue)**\n- **[Documentation](https://banavasi.github.io/Bootcn-vue/)**\n- **[Report Issues](https://github.com/banavasi/Bootcn-vue/issues)**\n\n## Related Packages\n\n- [@bootcn-vue/cli](https://www.npmjs.com/package/@bootcn-vue/cli) - CLI for adding components\n- [@bootcn-vue/forms](https://www.npmjs.com/package/@bootcn-vue/forms) - Form primitives and components\n- [@bootcn-vue/field-text](https://www.npmjs.com/package/@bootcn-vue/field-text) - Text input field component\n- [@bootcn-vue/core](https://www.npmjs.com/package/@bootcn-vue/core) - Core utilities\n\n## License\n\nMIT © [Shashank Shandilya](https://github.com/banavasi)\n","readmeFilename":"README.md"}