{"_id":"@coderoycc/bottom-sheet-wrappers","_rev":"6-3e8eefd58f08323811a5de976b8ff1b5","name":"@coderoycc/bottom-sheet-wrappers","dist-tags":{"latest":"2.0.0"},"versions":{"0.1.0":{"name":"@coderoycc/bottom-sheet-wrappers","version":"0.1.0","keywords":["vue","vue3","bottom-sheet","modal","touch-gestures","mobile"],"author":{"name":"coderoycc"},"license":"MIT","_id":"@coderoycc/bottom-sheet-wrappers@0.1.0","maintainers":[{"name":"coderoycc","email":"rcchambi4@gmail.com"}],"homepage":"https://github.com/coderoycc/bottom-sheet-wrappers#readme","bugs":{"url":"https://github.com/coderoycc/bottom-sheet-wrappers/issues"},"dist":{"shasum":"14fc719a0f3eb4d19fea7657cdc92d0baff10420","tarball":"https://registry.npmjs.org/@coderoycc/bottom-sheet-wrappers/-/bottom-sheet-wrappers-0.1.0.tgz","fileCount":8,"integrity":"sha512-/Gw9ytr9z+d3BcbXULS12RBPs/RIBlWWWQxtaA95OeqR3tpZpFUs/q2k+K/5G6hkb1dkiJE32j7uGd2GUA1ePA==","signatures":[{"sig":"MEYCIQCGA5pWF0HEgS1gWb+oEGhygkx5qJFr4Lxo6YzNYzVYIAIhAPjbRnY6EH8TOKsWfiXgQifhuaaK/x6P+7zYTwjHDAxH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":47508},"main":"./dist/bottom-sheet-wrappers.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bottom-sheet-wrappers.es.js","gitHead":"291ae66eefe759b575fe0adbce24217a65f981d6","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:demo":"DEMO_BUILD=true vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"coderoycc","email":"rcchambi4@gmail.com"},"repository":{"url":"git+https://github.com/coderoycc/bottom-sheet-wrappers.git","type":"git"},"_npmVersion":"10.8.2","description":"A flexible Vue 3 bottom sheet component with touch gesture support","directories":{},"_nodeVersion":"20.19.5","dependencies":{"vue":"^3.5.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.94.2","vite":"^7.2.4","quasar":"^2.18.0","vue-tsc":"^3.1.5","typescript":"^5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","@quasar/extras":"^1.17.0","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1","@quasar/vite-plugin":"^1.10.0"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/bottom-sheet-wrappers_0.1.0_1764965284168_0.3208837225043599","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@coderoycc/bottom-sheet-wrappers","version":"0.1.1","keywords":["vue","vue3","bottom-sheet","modal","touch-gestures","mobile"],"author":{"name":"coderoycc"},"license":"MIT","_id":"@coderoycc/bottom-sheet-wrappers@0.1.1","maintainers":[{"name":"coderoycc","email":"rcchambi4@gmail.com"}],"homepage":"https://github.com/coderoycc/bottom-sheet-wrappers#readme","bugs":{"url":"https://github.com/coderoycc/bottom-sheet-wrappers/issues"},"dist":{"shasum":"baad8ff0a18f0ddda6789863e55dc81aae4e5450","tarball":"https://registry.npmjs.org/@coderoycc/bottom-sheet-wrappers/-/bottom-sheet-wrappers-0.1.1.tgz","fileCount":8,"integrity":"sha512-hqi0QK4R+7mJtBmAbeu7QzIv82IJ7z8MORB466wrp2ouGAm/f6PnmLe8B33YPCjKmnlGmKWk6VlDYOvRagIx/w==","signatures":[{"sig":"MEYCIQDUFIDCQ/FIJrA9rbQHipzr8W0Ivp5A3gKM+uTrbAr8VAIhAIz7UFTujLvUYqXMXQOh2Njnq5niIfzxPGqg5k69O0Ab","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":47314},"main":"./dist/bottom-sheet-wrappers.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bottom-sheet-wrappers.es.js","gitHead":"84b6a0c2d957ba52ba6a85d47c7cddecddd8aae4","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:demo":"DEMO_BUILD=true vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"coderoycc","email":"rcchambi4@gmail.com"},"repository":{"url":"git+https://github.com/coderoycc/bottom-sheet-wrappers.git","type":"git"},"_npmVersion":"10.8.2","description":"A flexible Vue 3 bottom sheet component with touch gesture support","directories":{},"_nodeVersion":"20.19.5","dependencies":{"vue":"^3.5.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.94.2","vite":"^7.2.4","vue-tsc":"^3.1.5","typescript":"^5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/bottom-sheet-wrappers_0.1.1_1764966603923_0.03856008604972394","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@coderoycc/bottom-sheet-wrappers","version":"0.1.2","keywords":["vue","vue3","bottom-sheet","modal","touch-gestures","mobile"],"author":{"name":"coderoycc"},"license":"MIT","_id":"@coderoycc/bottom-sheet-wrappers@0.1.2","maintainers":[{"name":"coderoycc","email":"rcchambi4@gmail.com"}],"homepage":"https://github.com/coderoycc/bottom-sheet-wrappers#readme","bugs":{"url":"https://github.com/coderoycc/bottom-sheet-wrappers/issues"},"dist":{"shasum":"03cde47eafe42332230615330a8b097fdacfe1b0","tarball":"https://registry.npmjs.org/@coderoycc/bottom-sheet-wrappers/-/bottom-sheet-wrappers-0.1.2.tgz","fileCount":7,"integrity":"sha512-3esxGzAhJO3DDZGiH570BspHLNPsMxi+Pb0m/ZZKH0fyZ+x5HZhbHagU9x28iHrzGM6b1rxKbg2XCqcN9O0bIw==","signatures":[{"sig":"MEUCIQD9EeOnkG2U2bjLXEiyg/hBuh+e9b2rEOpYaLcT4PFImgIgTydRDavNbh+RnrEnxTjjy1HJLn5R7a0rNILPGsEieNI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@coderoycc%2fbottom-sheet-wrappers@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":46434},"main":"./dist/bottom-sheet-wrappers.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bottom-sheet-wrappers.es.js","gitHead":"85f4379ba84a8583432e36b06c425154b50fbb41","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:demo":"vite build --mode demo","prepublishOnly":"npm run build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a8269ebb-e280-4800-b98d-bfbb1b4ba0ee"}},"repository":{"url":"git+https://github.com/coderoycc/bottom-sheet-wrappers.git","type":"git"},"_npmVersion":"11.6.2","description":"A flexible Vue 3 bottom sheet component with touch gesture support","directories":{},"_nodeVersion":"24.13.0","dependencies":{"vue":"^3.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.94.2","vite":"^7.2.4","vue-tsc":"^3.1.5","typescript":"^5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/bottom-sheet-wrappers_0.1.2_1771102884911_0.03117305609105192","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@coderoycc/bottom-sheet-wrappers","version":"1.0.0","keywords":["vue","vue3","bottom-sheet","modal","touch-gestures","mobile"],"author":{"name":"coderoycc"},"license":"MIT","_id":"@coderoycc/bottom-sheet-wrappers@1.0.0","maintainers":[{"name":"coderoycc","email":"rcchambi4@gmail.com"}],"homepage":"https://github.com/coderoycc/bottom-sheet-wrappers#readme","bugs":{"url":"https://github.com/coderoycc/bottom-sheet-wrappers/issues"},"dist":{"shasum":"69fb7e3ed33b264b4a3828a28482345dbc59db16","tarball":"https://registry.npmjs.org/@coderoycc/bottom-sheet-wrappers/-/bottom-sheet-wrappers-1.0.0.tgz","fileCount":7,"integrity":"sha512-86w+/LG189cIWOGeq3Qkh41YL9hg26dKRmY2MiT+oXnhd9kgUGXsVtQV9S6xr1ILcg3FLmOAcdMziOmoSVi9xA==","signatures":[{"sig":"MEUCIQCSkXJEKMgvUSaXRr8dKVDnnPcAMMP/egc2ocxaQ9YkjAIgcA+41FpOasXcnLnWTXCthnJCk0JahXc+FHXjyQ0dQRI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@coderoycc%2fbottom-sheet-wrappers@1.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":61937},"main":"./dist/bottom-sheet-wrappers.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bottom-sheet-wrappers.es.js","gitHead":"a9cce3fb0ef7748f2417c69273b04e127151e0eb","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:demo":"vite build --mode demo","prepublishOnly":"npm run build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a8269ebb-e280-4800-b98d-bfbb1b4ba0ee"}},"repository":{"url":"git+https://github.com/coderoycc/bottom-sheet-wrappers.git","type":"git"},"_npmVersion":"11.9.0","description":"A flexible Vue 3 bottom sheet component with touch gesture support","directories":{},"_nodeVersion":"24.14.0","dependencies":{"vue":"^3.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.94.2","vite":"^7.2.4","vue-tsc":"^3.1.5","typescript":"^5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/bottom-sheet-wrappers_1.0.0_1774924426585_0.20079934122456344","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@coderoycc/bottom-sheet-wrappers","version":"1.0.1","keywords":["vue","vue3","bottom-sheet","modal","touch-gestures","mobile"],"author":{"name":"coderoycc"},"license":"MIT","_id":"@coderoycc/bottom-sheet-wrappers@1.0.1","maintainers":[{"name":"coderoycc","email":"rcchambi4@gmail.com"}],"homepage":"https://github.com/coderoycc/bottom-sheet-wrappers#readme","bugs":{"url":"https://github.com/coderoycc/bottom-sheet-wrappers/issues"},"dist":{"shasum":"2eb68537976f1d7a3efc9322b578eae91bd84850","tarball":"https://registry.npmjs.org/@coderoycc/bottom-sheet-wrappers/-/bottom-sheet-wrappers-1.0.1.tgz","fileCount":7,"integrity":"sha512-9ebZCZoRUNxV8VJgnCkeA0BhfotJjNA/2ef1zpRFfv1Kxx4PaFTpE6DbDjGcdIu9us6xrH3Y27vUFNrjDimp7w==","signatures":[{"sig":"MEUCIC4sCX/Sl9344TV6qH2k3icBmJbnbo3nenPKHckKI64nAiEAmdzDWcVM5VBCXLIW5BW/cE22Jt8mARQwnBDzmmmxjS0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@coderoycc%2fbottom-sheet-wrappers@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":64267},"main":"./dist/bottom-sheet-wrappers.umd.js","type":"module","style":"./dist/bottom-sheet-wrappers.css","types":"./dist/index.d.ts","module":"./dist/bottom-sheet-wrappers.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bottom-sheet-wrappers.es.js","require":"./dist/bottom-sheet-wrappers.umd.js"},"./style.css":"./dist/bottom-sheet-wrappers.css"},"gitHead":"33e0ed7877487f98afbffeaa1d4135bdcf504278","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:demo":"vite build --mode demo","prepublishOnly":"npm run build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a8269ebb-e280-4800-b98d-bfbb1b4ba0ee"}},"repository":{"url":"git+https://github.com/coderoycc/bottom-sheet-wrappers.git","type":"git"},"_npmVersion":"11.11.0","description":"A flexible Vue 3 bottom sheet component with touch gesture support","directories":{},"_nodeVersion":"24.14.1","dependencies":{"vue":"^3.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.94.2","vite":"^7.2.4","vue-tsc":"^3.1.5","typescript":"^5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/bottom-sheet-wrappers_1.0.1_1775787750529_0.582458244777762","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@coderoycc/bottom-sheet-wrappers","version":"2.0.0","description":"A flexible Vue 3 bottom sheet component with touch gesture support","type":"module","main":"./dist/bottom-sheet-wrappers.umd.js","module":"./dist/bottom-sheet-wrappers.es.js","types":"./dist/index.d.ts","style":"./dist/bottom-sheet-wrappers.css","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bottom-sheet-wrappers.es.js","require":"./dist/bottom-sheet-wrappers.umd.js"},"./style.css":"./dist/bottom-sheet-wrappers.css"},"scripts":{"dev":"vite","build":"vite build","build:demo":"vite build --mode demo","preview":"vite preview","prepublishOnly":"npm run build"},"keywords":["vue","vue3","bottom-sheet","modal","touch-gestures","mobile"],"author":{"name":"coderoycc"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/coderoycc/bottom-sheet-wrappers.git"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"peerDependencies":{"vue":"^3.5.0"},"devDependencies":{"@types/node":"^24.10.1","@vitejs/plugin-vue":"^6.0.1","@vue/tsconfig":"^0.8.1","sass":"^1.94.2","typescript":"^5.9.3","vite":"^7.2.4","vite-plugin-dts":"^4.5.4","vue-tsc":"^3.1.5"},"dependencies":{"vue":"^3.5.0"},"gitHead":"4aaae332caf86c15c98606dbabf9552d9409d3f1","_id":"@coderoycc/bottom-sheet-wrappers@2.0.0","bugs":{"url":"https://github.com/coderoycc/bottom-sheet-wrappers/issues"},"homepage":"https://github.com/coderoycc/bottom-sheet-wrappers#readme","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-kTujgba/oYlqV/ySIKeNmdePKiH9rpHVkvb9hRaduj56jJtZ2i7lVrxv6wOeVk/7dJ7SNRzGQBzrKJl4YT2z/A==","shasum":"89eb9efb9b1840e1e08da0990c07da37c96717b5","tarball":"https://registry.npmjs.org/@coderoycc/bottom-sheet-wrappers/-/bottom-sheet-wrappers-2.0.0.tgz","fileCount":9,"unpackedSize":1843830,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@coderoycc%2fbottom-sheet-wrappers@2.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB9R3V3oidbS8KYKNHRhlqoYD9la4vJQa+pb3QoEuRytAiBkzkvFiIZ3JBWv+FLZu+0fgI2w50TvuuQ7ewDbTMVScQ=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a8269ebb-e280-4800-b98d-bfbb1b4ba0ee"}},"directories":{},"maintainers":[{"name":"coderoycc","email":"rcchambi4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bottom-sheet-wrappers_2.0.0_1777989981810_0.24595393041652547"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-05T20:08:04.050Z","modified":"2026-05-05T14:06:22.305Z","0.1.0":"2025-12-05T20:08:04.309Z","0.1.1":"2025-12-05T20:30:04.072Z","0.1.2":"2026-02-14T21:01:25.064Z","1.0.0":"2026-03-31T02:33:46.782Z","1.0.1":"2026-04-10T02:22:30.670Z","2.0.0":"2026-05-05T14:06:22.011Z"},"bugs":{"url":"https://github.com/coderoycc/bottom-sheet-wrappers/issues"},"author":{"name":"coderoycc"},"license":"MIT","homepage":"https://github.com/coderoycc/bottom-sheet-wrappers#readme","keywords":["vue","vue3","bottom-sheet","modal","touch-gestures","mobile"],"repository":{"type":"git","url":"git+https://github.com/coderoycc/bottom-sheet-wrappers.git"},"description":"A flexible Vue 3 bottom sheet component with touch gesture support","maintainers":[{"name":"coderoycc","email":"rcchambi4@gmail.com"}],"readme":"# 📱 Bottom Sheet Wrappers — v2\n\nA flexible and powerful Vue 3 bottom sheet library designed specifically for **mobile devices** with native-like touch gesture support and two distinct display modes.\n\n> ⚡ **Version 2** introduces a simplified API with new component names (`BsDynamic`, `BsSimple`) and no plugin registration required — just import and use.\n\n[![npm version](https://img.shields.io/npm/v/@coderoycc/bottom-sheet-wrappers.svg)](https://www.npmjs.com/package/@coderoycc/bottom-sheet-wrappers)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n> 📱 **Mobile-First Design**: Built from the ground up for mobile devices with smooth 60fps animations and native-like touch interactions. <a href=\"https://coderoycc.github.io/bsw-demo/\">Full Documentation & Demo →</a>\n\n## ✨ Features\n\n- 🎯 **Two Distinct Components**: `BsDynamic` (resizable with snap points) and `BsSimple` (static height or auto-fit).\n- 👆 **Native Touch Gestures**: Smooth swipe, drag, and tap interactions optimized for mobile.\n- 🎨 **Customizable Backdrop**: Optional backdrop with configurable behavior.\n- 📱 **Mobile-First & Responsive**: Optimized for mobile devices, works great on desktop too.\n- 🔧 **TypeScript Support**: Full TypeScript definitions included.\n- 🪶 **Lightweight**: Minimal dependencies (only Vue 3).\n- ♿ **Accessible**: ARIA support and keyboard interaction ready.\n- ⚡ **Performant**: 60fps animations with GPU acceleration.\n\n## 📦 Installation\n\n```bash\nnpm install @coderoycc/bottom-sheet-wrappers\n```\n\nOr with yarn:\n\n```bash\nyarn add @coderoycc/bottom-sheet-wrappers\n```\n\nOr with pnpm:\n\n```bash\npnpm add @coderoycc/bottom-sheet-wrappers\n```\n\n## 🚀 Quick Start\n\n### 1. Import the styles\n\nImport the styles **once** in your entry file (`main.ts`) or at the top of the component where you need them. This must be done **before** using any component:\n\n```typescript\n// main.ts\nimport \"@coderoycc/bottom-sheet-wrappers/style.css\";\n```\n\n### 2. Import and use the components directly\n\nNo plugin registration needed — simply import the component you want and use it:\n\n```vue\n<script setup>\nimport { ref } from \"vue\";\nimport { BsDynamic } from \"@coderoycc/bottom-sheet-wrappers\";\n\nconst isOpen = ref(false);\n</script>\n\n<template>\n  <button @click=\"isOpen = true\">Open Bottom Sheet</button>\n\n  <BsDynamic v-model=\"isOpen\" title=\"My Bottom Sheet\">\n    <p>Your content here</p>\n  </BsDynamic>\n</template>\n```\n\n> 💡 You can also import the styles directly in the component's `<style>` block or in a dedicated CSS entry file.\n\n## 🎭 Display Modes\n\nThe library consists of two main components acting as distinct modes to perfectly match your use case:\n\n### 1. Dynamic Bottom Sheet (`BsDynamic`)\n\nThis mode allows the user to resize the sheet by dragging up or down between three size states: `collapsed`, `half`, and `full`. It supports a mini-player pattern out of the box.\n\n![BsDynamic demo](public/assets/demo_bsw.gif)\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { BsDynamic } from '@coderoycc/bottom-sheet-wrappers';\n\nconst isDynamicOpen = ref(false);\n</script>\n\n<template>\n  <BsDynamic\n    v-model=\"isDynamicOpen\"\n    initial-size=\"half\"\n    half=\"45dvh\"\n    full=\"95dvh\"\n    @size-change=\"onSizeChange\"\n  >\n    <p>Swipe up or down to resize content</p>\n\n    <!-- Optional collapsed slot for a mini-player/bar view -->\n    <template #collapsed-content>\n      <div>Now Playing...</div>\n    </template>\n  </BsDynamic>\n</template>\n```\n\n**Behavior:**\n- ✅ Swipe up/down to resize through specific snap points.\n- ✅ Handles its own internal sizes accurately mapping to your UI expectations (`half`, `full`).\n- ✅ Provides a seamless collapsed state for a \"mini view\" via `#collapsed-content` slot.\n- ✅ Smart expansion boundaries that block accidental full expansion when limits are hit.\n\n---\n\n### 2. Simple Bottom Sheet (`BsSimple`)\n\nThis mode maintains a fixed or auto-adjusted height (based on the content inside it) and **cannot be resized**, though the user can swipe down to close it. Perfectly covers both fixed-size and auto-fit use cases.\n\n![BsSimple demo](public/assets/demo_bsw_c.gif)\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { BsSimple } from '@coderoycc/bottom-sheet-wrappers';\n\nconst isSimpleOpen = ref(false);\n</script>\n\n<template>\n  <!-- Provide a specific height -->\n  <BsSimple v-model=\"isSimpleOpen\" title=\"Fixed Sheet\" height=\"50dvh\">\n    <p>Fixed at 50% screen height</p>\n  </BsSimple>\n\n  <!-- Or let it auto-adjust (auto-fit behavior) by omitting height -->\n  <BsSimple v-model=\"isSimpleOpen\" title=\"Auto Sheet\">\n    <p>My height adjusts automatically to fit this content!</p>\n  </BsSimple>\n</template>\n```\n\n**Behavior:**\n- ✅ Fixed height or Auto-Height fallback depending on the provided `height` prop.\n- ✅ Swipe down on the handle to close directly.\n- ✅ No internal resizing gestures enabled, maintaining focused view boundaries.\n- ✅ Optional persistent mode to prevent closing via gestures.\n\n## 📚 API Reference\n\n### BsDynamic\n\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `modelValue` | `boolean` | `false` | Controls visibility (`v-model`). |\n| `title` | `string` | `''` | Header title string. |\n| `initialSize` | `'collapsed' \\| 'half' \\| 'full'` | `'half'` | Starting size when the sheet opens. |\n| `half` | `string` | `'45dvh'` | Height when mapped to the `half` size. |\n| `full` | `string` | `'95dvh'` | Height when mapped to the `full` size. |\n| `hideCloseButton` | `boolean` | `false` | Hide the close icon button in the top right. |\n| `showBackdrop` | `boolean` | `false` | Render a dark visual backdrop behind the sheet. |\n| `hideDragHandle` | `boolean` | `false` | Hide the drag handle indicator. |\n| `zIndex` | `number` | `1` | Added over a base `9000` context z-index layer. |\n\n#### Events\n| Event | Payload | Description |\n| ----- | ------- | ----------- |\n| `update:modelValue` | `boolean` | Emitted when visibility changes. |\n| `opened` | — | Emitted when sheet is fully open and mounted. |\n| `closed` | — | Emitted when fully unloaded/closed. |\n| `close` | — | Triggered right before closing starts. |\n| `size-change` | `'collapsed' \\| 'half' \\| 'full'` | Emitted when the sheet switches to a new size mode. |\n\n#### Methods & Slots\n**Methods (via Template Ref):** `open()`, `close()`, `animateToSize(size)`  \n**Slots:** `#default`, `#header`, `#collapsed-content`\n\n---\n\n### BsSimple\n\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `modelValue` | `boolean` | `false` | Controls visibility (`v-model`). |\n| `title` | `string` | `''` | Header title string. |\n| `height` | `string \\| number` | `undefined` | Forced static height. Omitting this makes it auto-fit the content inside. |\n| `showBackdrop` | `boolean` | `false` | Render a dark visual backdrop. |\n| `hideCloseButton` | `boolean` | `false` | Hide the close icon button. |\n| `hideDragHandle` | `boolean` | `false` | Hide the drag handle indicator. |\n| `closeOnBackdrop` | `boolean` | `false` | Close the sheet when clicking the backdrop. |\n| `persistent` | `boolean` | `false` | Prevent closing via gestures and hides the close button. |\n| `zIndex` | `number` | `0` | Added over a base `9000` context z-index layer. |\n\n#### Events\n| Event | Payload | Description |\n| ----- | ------- | ----------- |\n| `update:modelValue` | `boolean` | Emitted when visibility changes. |\n| `opened` | — | Emitted when sheet is fully created & mounted in active state. |\n| `closed` | — | Emitted when fully unloaded/closed. |\n| `before-close` | — | Emitted when the closing sequence begins. |\n\n#### Methods & Slots\n**Slots:** `#default`, `#header`\n\n## 🎨 Styling\n\nYou can override the default styles using CSS variables or by targeting the component classes directly.\n\n```css\n/* Custom backdrop opacity */\n.bsw-bottom-sheet-backdrop--visible {\n  background: rgba(0, 0, 0, 0.75) !important;\n}\n\n/* Custom handle color */\n.bsw-bottom-sheet-handle {\n  background: #007bff !important;\n}\n```\n\n### Dark Mode Support\nThe components naturally embrace CSS scopes for overrides, simply wrap components or nest logic within your specific theme identifiers:\n```vue\n<BsDynamic v-model=\"isOpen\" class=\"my-dark-theme\">\n  <p>Content</p>\n</BsDynamic>\n\n<style>\n.my-dark-theme .bsw-bottom-sheet-panel {\n  background: #1a1a1a;\n  color: #ffffff;\n}\n</style>\n```\n\n## 🏗️ Architecture\n\nThe library is built with clean code principles using Vue 3's Composition API structure:\n\n- `BsDynamic` & `BsSimple` logic separated for specialized behavior.\n- Use of internal composables (e.g., `useDynamicGestures`, `useSimpleGestures`, `useAutoHeight`) to decouple gesture tracking and size orchestration.\n\n## 📖 Documentation\n\nFull interactive documentation and live examples are available at:  \n**[https://coderoycc.github.io/bsw-demo/](https://coderoycc.github.io/bsw-demo/)**\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details\n\n## 👤 Author\n\n**coderoycc**\n\n- GitHub: [@coderoycc](https://github.com/coderoycc)\n- npm: [@coderoycc](https://www.npmjs.com/~coderoycc)\n\n---\n\nMade with ❤️ by coderoycc\n","readmeFilename":"README.md"}