{"_id":"@braudypedrosa/bp-ui-components","_rev":"4-70d60ad6aedbe64ffd5be44b54a60f2c","name":"@braudypedrosa/bp-ui-components","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@braudypedrosa/bp-ui-components","version":"0.1.0","keywords":["ui","components","counter","design-system","vanilla-js","alpinejs","tailwind"],"author":{"name":"Braudy Pedrosa"},"license":"MIT","_id":"@braudypedrosa/bp-ui-components@0.1.0","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-ui-components#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-ui-components/issues"},"dist":{"shasum":"7dec96627133e99697e0ea0908a21241c3a0e488","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-ui-components/-/bp-ui-components-0.1.0.tgz","fileCount":6,"integrity":"sha512-p5JA2/wFjkpTwfdy9tSDF2tnsxNJRg0AY8QasDhdaVelT+iddFXtDpHskkEAf6jtWEseFPtlbOwsalKjW+D/NA==","signatures":[{"sig":"MEQCIHh2Kl5gEH9/uqfnlNT+WcTxBHFSjb9CSIttYySqOrilAiBss9ZAAl4ZNFk+iPbRRI3HbDTrhMK/nNIoQ16rF72JOQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27460},"main":"./dist/bp-ui.js","type":"module","module":"./dist/bp-ui.js","engines":{"node":">=20"},"exports":{".":"./dist/bp-ui.js","./styles":"./dist/styles/index.css","./styles/counter.css":"./dist/styles/counter.css"},"gitHead":"825d11fc3f916449f7eb3d9553e7bf8661e4bae3","scripts":{"dev":"vite","test":"vitest run","build":"rm -rf dist && vite build && mkdir -p dist/styles && cp src/styles/index.css dist/styles/index.css && cp src/styles/counter.css dist/styles/counter.css && node ./scripts/verify-build.mjs"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-ui-components.git","type":"git"},"_npmVersion":"11.8.0","description":"Framework-agnostic bp-ui component library with vanilla JS and Alpine adapters.","directories":{},"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.4","jsdom":"^26.0.0","vitest":"^3.1.1"},"_npmOperationalInternal":{"tmp":"tmp/bp-ui-components_0.1.0_1772288349046_0.45436046779910777","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@braudypedrosa/bp-ui-components","version":"0.2.0","keywords":["ui","components","counter","select","radio","checkbox","design-system","vanilla-js","alpinejs","tailwind"],"author":{"name":"Braudy Pedrosa"},"license":"MIT","_id":"@braudypedrosa/bp-ui-components@0.2.0","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-ui-components#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-ui-components/issues"},"dist":{"shasum":"1fd1dd77098013bac45446f5e7c928e4969539b2","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-ui-components/-/bp-ui-components-0.2.0.tgz","fileCount":9,"integrity":"sha512-l0SoHyUcybHvgPlQjSdoKVpVTOAYV/l+4JEcPeWM4p7R2sYUmzKM+vZpuBUXtvXVtSez1YqlYG/xKNlRGOdzOw==","signatures":[{"sig":"MEUCIE9isgNiUd65JYTncGImJQ8p0Y2qTSyzjBdwXt9RudBOAiEA+CsL0pN0L/s/AX26Z4obJiTGjiak6LszCUQsH+IVE+Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":97977},"main":"./dist/bp-ui.js","type":"module","module":"./dist/bp-ui.js","engines":{"node":">=20"},"exports":{".":"./dist/bp-ui.js","./styles":"./dist/styles/index.css","./styles/radio.css":"./dist/styles/radio.css","./styles/select.css":"./dist/styles/select.css","./styles/counter.css":"./dist/styles/counter.css","./styles/checkbox.css":"./dist/styles/checkbox.css"},"gitHead":"8d9cfe75c07c17f1ec1c293c309cb6cab93ac5fb","scripts":{"dev":"vite","test":"vitest run","build":"rm -rf dist && vite build && node ./scripts/copy-styles.mjs && node ./scripts/verify-build.mjs","release":"bash ./scripts/release.sh","release:npm":"npm publish","release:major":"bash ./scripts/release.sh major","release:minor":"bash ./scripts/release.sh minor","release:patch":"bash ./scripts/release.sh patch"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-ui-components.git","type":"git"},"_npmVersion":"11.8.0","description":"Framework-agnostic bp-ui component library with vanilla JS and Alpine adapters.","directories":{},"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.4","jsdom":"^26.0.0","vitest":"^3.1.1"},"_npmOperationalInternal":{"tmp":"tmp/bp-ui-components_0.2.0_1772383481365_0.7813478749488134","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@braudypedrosa/bp-ui-components","version":"0.2.1","keywords":["ui","components","counter","select","radio","checkbox","design-system","vanilla-js","alpinejs","tailwind"],"author":{"name":"Braudy Pedrosa"},"license":"MIT","_id":"@braudypedrosa/bp-ui-components@0.2.1","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-ui-components#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-ui-components/issues"},"dist":{"shasum":"5d2de20736e9a81112f7b0ba3eadc502f208ca64","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-ui-components/-/bp-ui-components-0.2.1.tgz","fileCount":9,"integrity":"sha512-pQQ6J1RQa6T5rpeZxgODXf93fz2njlM7pwPO0EBDcRDENOiDgcxMrZaw3mHx4cwc3DE+pTesSLoW+A2VD+sbfQ==","signatures":[{"sig":"MEQCIDdBE6gW4R3hp3x9vAAiWSvtBR3Fr/xSjo2KFL66ZNyLAiBrQQYlhIWXYVuhrzuv1lFPnNi05DfyhHxmFEw7xJ7FDw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":137615},"main":"./dist/bp-ui.js","type":"module","module":"./dist/bp-ui.js","engines":{"node":">=20"},"exports":{".":"./dist/bp-ui.js","./styles":"./dist/styles/index.css","./styles/radio.css":"./dist/styles/radio.css","./styles/select.css":"./dist/styles/select.css","./styles/counter.css":"./dist/styles/counter.css","./styles/checkbox.css":"./dist/styles/checkbox.css"},"gitHead":"4ccddc5cb296a77e9412ef57a1e46301fccd1f6e","scripts":{"dev":"vite","test":"vitest run","build":"rm -rf dist && vite build && node ./scripts/copy-styles.mjs && node ./scripts/verify-build.mjs","release":"bash ./scripts/release.sh","release:npm":"npm publish","release:major":"bash ./scripts/release.sh major","release:minor":"bash ./scripts/release.sh minor","release:patch":"bash ./scripts/release.sh patch"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-ui-components.git","type":"git"},"_npmVersion":"11.10.1","description":"Framework-agnostic bp-ui component library with vanilla JS and Alpine adapters.","directories":{},"_nodeVersion":"25.7.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.4","jsdom":"^26.0.0","vitest":"^3.1.1","sass-embedded":"^1.83.4"},"_npmOperationalInternal":{"tmp":"tmp/bp-ui-components_0.2.1_1772552154436_0.06073674736381918","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@braudypedrosa/bp-ui-components","version":"0.3.0","description":"Framework-agnostic bp-ui component library with vanilla JS and Alpine adapters.","author":{"name":"Braudy Pedrosa"},"type":"module","main":"./dist/bp-ui.js","module":"./dist/bp-ui.js","exports":{".":"./dist/bp-ui.js","./styles":"./dist/styles/index.css","./styles/counter.css":"./dist/styles/counter.css","./styles/select.css":"./dist/styles/select.css","./styles/radio.css":"./dist/styles/radio.css","./styles/checkbox.css":"./dist/styles/checkbox.css","./styles/widget-reset.css":"./dist/styles/widget-reset.css"},"scripts":{"dev":"vite","test":"vitest run","build":"rm -rf dist && vite build && node ./scripts/copy-styles.mjs && node ./scripts/verify-build.mjs","release":"bash ./scripts/release.sh","release:patch":"bash ./scripts/release.sh patch","release:minor":"bash ./scripts/release.sh minor","release:major":"bash ./scripts/release.sh major","release:npm":"npm publish"},"keywords":["ui","components","counter","select","radio","checkbox","design-system","vanilla-js","alpinejs","tailwind"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/braudypedrosa/bp-ui-components.git"},"bugs":{"url":"https://github.com/braudypedrosa/bp-ui-components/issues"},"homepage":"https://github.com/braudypedrosa/bp-ui-components#readme","engines":{"node":">=20"},"publishConfig":{"access":"public"},"devDependencies":{"jsdom":"^28.1.0","sass-embedded":"^1.97.3","vite":"^7.3.1","vitest":"^4.0.18"},"gitHead":"036dbf44235784bee40426f01b49b5c7a49d1d94","_id":"@braudypedrosa/bp-ui-components@0.3.0","_nodeVersion":"25.7.0","_npmVersion":"11.10.1","dist":{"integrity":"sha512-U/U6D9Gu0u4SnTgtg85f81GpzjesY82m8Hb8oit19JhcIRxXUC0hKbXc/Vs/KfIoLqq+E/wEZFjqxOsVdjgLWA==","shasum":"a1b2999b358801b6125f8fc732a6f9045d2b40cb","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-ui-components/-/bp-ui-components-0.3.0.tgz","fileCount":10,"unpackedSize":126864,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCWTqUDe4HzVj73I04OYjQ3FfM62lpX8fT1w4Mb7iZysAIhAMt7vP8RqFNhaPUOV5cngyl2kRNxWrTcO9cCeANVn2jT"}]},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"directories":{},"maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bp-ui-components_0.3.0_1772564317954_0.12557520812505496"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-28T14:19:08.956Z","modified":"2026-03-03T18:58:38.216Z","0.1.0":"2026-02-28T14:19:09.200Z","0.2.0":"2026-03-01T16:44:41.508Z","0.2.1":"2026-03-03T15:35:54.570Z","0.3.0":"2026-03-03T18:58:38.095Z"},"bugs":{"url":"https://github.com/braudypedrosa/bp-ui-components/issues"},"author":{"name":"Braudy Pedrosa"},"license":"MIT","homepage":"https://github.com/braudypedrosa/bp-ui-components#readme","keywords":["ui","components","counter","select","radio","checkbox","design-system","vanilla-js","alpinejs","tailwind"],"repository":{"type":"git","url":"git+https://github.com/braudypedrosa/bp-ui-components.git"},"description":"Framework-agnostic bp-ui component library with vanilla JS and Alpine adapters.","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"readme":"# bp-ui-components\n\n`bp-ui-components` is a snippet-first `bp-ui` UI kit for reusable form and interaction components that work in vanilla JS and Alpine.\n\nCurrent stable components:\n\n- `bp-ui-counter`\n- `bp-ui-select`\n- `bp-ui-radio`\n- `bp-ui-checkbox`\n\n## Install\n\n```bash\nnpm install @braudypedrosa/bp-ui-components\n```\n\n## Standards\n\nThe library-wide implementation contract lives in [COMPONENT_STANDARD.md](./COMPONENT_STANDARD.md).\n\nThat standard is the source of truth for:\n\n- naming\n- folder structure\n- vanilla + Alpine support\n- event shape\n- accessibility minimums\n- test/demo requirements\n\n## Maintainer Workflow\n\nFor the reusable release workflow, versioning rules, and verification steps, see [RELEASING.md](./RELEASING.md).\n\n## Package Exports\n\n### JS exports\n\n- `BPUICounter`\n- `initBPUICounters(root = document)`\n- `createCounterState(config = {})`\n- `bpUICounter(config = {})`\n- `BPUISelect`\n- `initBPUISelects(root = document)`\n- `createSelectState(config = {})`\n- `bpUISelect(config = {})`\n- `BPUIRadioGroup`\n- `initBPUIRadios(root = document)`\n- `createRadioState(config = {})`\n- `bpUIRadio(config = {})`\n- `BPUICheckboxGroup`\n- `initBPUICheckboxes(root = document)`\n- `createCheckboxState(config = {})`\n- `bpUICheckbox(config = {})`\n\n### Browser globals\n\n- `window.BPUICounter`\n- `window.BP_UI_Counter`\n- `window.initBPUICounters`\n- `window.bpUICounter`\n- `window.BPUISelect`\n- `window.BP_UI_Select`\n- `window.initBPUISelects`\n- `window.bpUISelect`\n- `window.BPUIRadioGroup`\n- `window.BP_UI_RadioGroup`\n- `window.initBPUIRadios`\n- `window.bpUIRadio`\n- `window.BPUICheckboxGroup`\n- `window.BP_UI_CheckboxGroup`\n- `window.initBPUICheckboxes`\n- `window.bpUICheckbox`\n\n### CSS entry points\n\n- `@braudypedrosa/bp-ui-components/styles`\n- `@braudypedrosa/bp-ui-components/styles/counter.css`\n- `@braudypedrosa/bp-ui-components/styles/select.css`\n- `@braudypedrosa/bp-ui-components/styles/radio.css`\n- `@braudypedrosa/bp-ui-components/styles/checkbox.css`\n- `@braudypedrosa/bp-ui-components/styles/widget-reset.css`\n\nThe full `@braudypedrosa/bp-ui-components/styles` bundle already includes the shared widget reset.\nIf you import a component stylesheet directly, also import `widget-reset.css` unless another BP package\nalready includes it for that surface.\n\n## Canonical Usage\n\n### `bp-ui-counter` vanilla\n\n```html\n<div\n  class=\"bp-ui-counter\"\n  data-bp-ui-counter\n  data-value=\"2\"\n  data-min=\"0\"\n  data-max=\"8\"\n  data-step=\"1\"\n>\n  <div class=\"bp-ui-counter__label\">Seats</div>\n  <button class=\"bp-ui-counter__button bp-ui-counter__button--decrement\" type=\"button\" aria-label=\"Decrease seat count\">-</button>\n  <div class=\"bp-ui-counter__field\">\n    <input class=\"bp-ui-counter__input\" type=\"number\" inputmode=\"numeric\" aria-label=\"Seat count\" />\n  </div>\n  <button class=\"bp-ui-counter__button bp-ui-counter__button--increment\" type=\"button\" aria-label=\"Increase seat count\">+</button>\n  <div class=\"bp-ui-counter__hint\">Shared markup, no framework required.</div>\n  <div class=\"bp-ui-counter__status\" hidden></div>\n</div>\n\n<script type=\"module\">\n  import '@braudypedrosa/bp-ui-components/styles';\n  import { initBPUICounters } from '@braudypedrosa/bp-ui-components';\n\n  initBPUICounters();\n</script>\n```\n\n### `bp-ui-select` vanilla\n\n```html\n<div class=\"bp-ui-select\" data-bp-ui-select data-placeholder=\"Choose a property type\" data-name=\"propertyType\">\n  <div class=\"bp-ui-select__label\">Property Type</div>\n  <button class=\"bp-ui-select__trigger\" type=\"button\" aria-haspopup=\"listbox\">\n    <span class=\"bp-ui-select__trigger-value\">Choose a property type</span>\n    <span class=\"bp-ui-select__trigger-chevron\" aria-hidden=\"true\"></span>\n  </button>\n  <input class=\"bp-ui-select__input\" type=\"hidden\" />\n  <div class=\"bp-ui-select__popover\" role=\"listbox\">\n    <button class=\"bp-ui-select__option\" type=\"button\" data-value=\"villa\">\n      <span class=\"bp-ui-select__option-label\">Villa</span>\n      <span class=\"bp-ui-select__option-indicator\" aria-hidden=\"true\"></span>\n    </button>\n    <button class=\"bp-ui-select__option\" type=\"button\" data-value=\"cabin\">\n      <span class=\"bp-ui-select__option-label\">Cabin</span>\n      <span class=\"bp-ui-select__option-indicator\" aria-hidden=\"true\"></span>\n    </button>\n    <button class=\"bp-ui-select__option\" type=\"button\" data-value=\"suite\">\n      <span class=\"bp-ui-select__option-label\">Suite</span>\n      <span class=\"bp-ui-select__option-indicator\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <div class=\"bp-ui-select__hint\">Viewport-aware single select.</div>\n  <div class=\"bp-ui-select__status\" hidden></div>\n</div>\n\n<script type=\"module\">\n  import '@braudypedrosa/bp-ui-components/styles';\n  import { initBPUISelects } from '@braudypedrosa/bp-ui-components';\n\n  initBPUISelects();\n</script>\n```\n\n### `bp-ui-select` Alpine + Tailwind wrapper\n\n```html\n<script type=\"module\">\n  import '@braudypedrosa/bp-ui-components/styles';\n  import '@braudypedrosa/bp-ui-components';\n</script>\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n\n<div\n  class=\"relative rounded-[1.75rem] border border-slate-200 bg-white p-5 shadow-sm\"\n  x-data=\"window.bpUISelect()\"\n  x-init=\"init()\"\n>\n  <div class=\"bp-ui-select\" data-value=\"cabin\">\n    <div class=\"bp-ui-select__label\">Property Type</div>\n    <button class=\"bp-ui-select__trigger\" type=\"button\" @click=\"toggle()\">\n      <span class=\"bp-ui-select__trigger-value\">Cabin</span>\n      <span class=\"bp-ui-select__trigger-chevron\" aria-hidden=\"true\"></span>\n    </button>\n    <input class=\"bp-ui-select__input\" type=\"hidden\" value=\"cabin\" />\n    <div class=\"bp-ui-select__popover\" hidden>\n      <button class=\"bp-ui-select__option\" type=\"button\" data-value=\"villa\" @click=\"select($event.currentTarget.dataset.value, 'option'); closePopover()\">\n        <span class=\"bp-ui-select__option-label\">Villa</span>\n        <span class=\"bp-ui-select__option-indicator\" aria-hidden=\"true\"></span>\n      </button>\n      <button class=\"bp-ui-select__option is-selected\" type=\"button\" data-value=\"cabin\" @click=\"select($event.currentTarget.dataset.value, 'option'); closePopover()\">\n        <span class=\"bp-ui-select__option-label\">Cabin</span>\n        <span class=\"bp-ui-select__option-indicator\" aria-hidden=\"true\"></span>\n      </button>\n      <button class=\"bp-ui-select__option\" type=\"button\" data-value=\"suite\" @click=\"select($event.currentTarget.dataset.value, 'option'); closePopover()\">\n        <span class=\"bp-ui-select__option-label\">Suite</span>\n        <span class=\"bp-ui-select__option-indicator\" aria-hidden=\"true\"></span>\n      </button>\n    </div>\n  </div>\n</div>\n```\n\nAdd `.bp-ui-select__popover--local` only when a wrapper intentionally wants local absolute positioning instead of the default viewport-aware floating behavior.\n\n### `bp-ui-radio` default variant\n\n```html\n<div class=\"bp-ui-radio\" data-bp-ui-radio data-name=\"notificationPreference\" data-value=\"push\">\n  <div class=\"bp-ui-radio__label\">Notification Preference</div>\n  <div class=\"bp-ui-radio__group\">\n    <label class=\"bp-ui-radio__option\">\n      <input class=\"bp-ui-radio__input\" type=\"radio\" value=\"email\" />\n      <span class=\"bp-ui-radio__control\" aria-hidden=\"true\"></span>\n      <span class=\"bp-ui-radio__content\">\n        <span class=\"bp-ui-radio__header\">\n          <span class=\"bp-ui-radio__option-label\">Email Summary</span>\n        </span>\n        <span class=\"bp-ui-radio__sublabel\">Receive a daily digest of all activity.</span>\n      </span>\n    </label>\n    <label class=\"bp-ui-radio__option\">\n      <input class=\"bp-ui-radio__input\" type=\"radio\" value=\"push\" />\n      <span class=\"bp-ui-radio__control\" aria-hidden=\"true\"></span>\n      <span class=\"bp-ui-radio__content\">\n        <span class=\"bp-ui-radio__header\">\n          <span class=\"bp-ui-radio__option-label\">Real-time Push</span>\n          <span class=\"bp-ui-radio__tag\">Recommended</span>\n        </span>\n        <span class=\"bp-ui-radio__sublabel\">Get instant mobile notifications.</span>\n      </span>\n    </label>\n  </div>\n  <div class=\"bp-ui-radio__hint\">One group, native radios, shared library styling.</div>\n  <div class=\"bp-ui-radio__status\" hidden></div>\n</div>\n\n<script type=\"module\">\n  import '@braudypedrosa/bp-ui-components/styles';\n  import { initBPUIRadios } from '@braudypedrosa/bp-ui-components';\n\n  initBPUIRadios();\n</script>\n```\n\n### `bp-ui-radio` pill variant\n\n```html\n<div class=\"bp-ui-radio bp-ui-radio--pill\" data-bp-ui-radio data-variant=\"pill\" data-name=\"view\" data-value=\"ocean\">\n  <div class=\"bp-ui-radio__label\">View</div>\n  <div class=\"bp-ui-radio__group\">\n    <label class=\"bp-ui-radio__option\">\n      <input class=\"bp-ui-radio__input\" type=\"radio\" value=\"ocean\" />\n      <span class=\"bp-ui-radio__control\" aria-hidden=\"true\"></span>\n      <span class=\"bp-ui-radio__content\">\n        <span class=\"bp-ui-radio__header\">\n          <span class=\"bp-ui-radio__option-label\">Ocean</span>\n        </span>\n      </span>\n    </label>\n    <label class=\"bp-ui-radio__option\">\n      <input class=\"bp-ui-radio__input\" type=\"radio\" value=\"garden\" />\n      <span class=\"bp-ui-radio__control\" aria-hidden=\"true\"></span>\n      <span class=\"bp-ui-radio__content\">\n        <span class=\"bp-ui-radio__header\">\n          <span class=\"bp-ui-radio__option-label\">Garden</span>\n        </span>\n      </span>\n    </label>\n  </div>\n</div>\n```\n\n### `bp-ui-radio` Alpine + Tailwind wrapper\n\n```html\n<script type=\"module\">\n  import '@braudypedrosa/bp-ui-components/styles';\n  import '@braudypedrosa/bp-ui-components';\n</script>\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n\n<div\n  class=\"rounded-[1.75rem] border border-slate-200 bg-white p-5 shadow-sm\"\n  x-data=\"window.bpUIRadio()\"\n  x-init=\"init()\"\n>\n  <div class=\"bp-ui-radio\" data-name=\"notificationPreference\" data-value=\"push\">\n    <div class=\"bp-ui-radio__label\">Notification Preference</div>\n    <div class=\"bp-ui-radio__group\">\n      <label class=\"bp-ui-radio__option\">\n        <input class=\"bp-ui-radio__input\" type=\"radio\" value=\"email\" />\n        <span class=\"bp-ui-radio__control\" aria-hidden=\"true\"></span>\n        <span class=\"bp-ui-radio__content\">\n          <span class=\"bp-ui-radio__header\">\n            <span class=\"bp-ui-radio__option-label\">Email Summary</span>\n          </span>\n        </span>\n      </label>\n      <label class=\"bp-ui-radio__option\">\n        <input class=\"bp-ui-radio__input\" type=\"radio\" value=\"push\" checked />\n        <span class=\"bp-ui-radio__control\" aria-hidden=\"true\"></span>\n        <span class=\"bp-ui-radio__content\">\n          <span class=\"bp-ui-radio__header\">\n            <span class=\"bp-ui-radio__option-label\">Real-time Push</span>\n          </span>\n          <span class=\"bp-ui-radio__sublabel\">Get instant mobile notifications.</span>\n        </span>\n      </label>\n    </div>\n  </div>\n</div>\n```\n\n### `bp-ui-checkbox` default variant\n\n```html\n<div class=\"bp-ui-checkbox\" data-bp-ui-checkbox data-name=\"amenities\" data-values=\"pool,spa\">\n  <div class=\"bp-ui-checkbox__label\">Amenities</div>\n  <div class=\"bp-ui-checkbox__group\">\n    <label class=\"bp-ui-checkbox__option\">\n      <input class=\"bp-ui-checkbox__input\" type=\"checkbox\" value=\"pool\" />\n      <span class=\"bp-ui-checkbox__control\" aria-hidden=\"true\"></span>\n      <span class=\"bp-ui-checkbox__content\">\n        <span class=\"bp-ui-checkbox__header\">\n          <span class=\"bp-ui-checkbox__option-label\">Pool Access</span>\n        </span>\n        <span class=\"bp-ui-checkbox__sublabel\">Outdoor pool with late-evening access.</span>\n      </span>\n    </label>\n    <label class=\"bp-ui-checkbox__option\">\n      <input class=\"bp-ui-checkbox__input\" type=\"checkbox\" value=\"spa\" />\n      <span class=\"bp-ui-checkbox__control\" aria-hidden=\"true\"></span>\n      <span class=\"bp-ui-checkbox__content\">\n        <span class=\"bp-ui-checkbox__header\">\n          <span class=\"bp-ui-checkbox__option-label\">Spa</span>\n          <span class=\"bp-ui-checkbox__tag\">Popular</span>\n        </span>\n        <span class=\"bp-ui-checkbox__sublabel\">Thermal rooms and massage availability.</span>\n      </span>\n    </label>\n  </div>\n</div>\n```\n\n### `bp-ui-checkbox` pill variant\n\n```html\n<div class=\"bp-ui-checkbox bp-ui-checkbox--pill\" data-bp-ui-checkbox data-variant=\"pill\" data-name=\"views\" data-values=\"ocean,garden\">\n  <div class=\"bp-ui-checkbox__label\">Preferred Features</div>\n  <div class=\"bp-ui-checkbox__group\">\n    <label class=\"bp-ui-checkbox__option\">\n      <input class=\"bp-ui-checkbox__input\" type=\"checkbox\" value=\"ocean\" />\n      <span class=\"bp-ui-checkbox__control\" aria-hidden=\"true\"></span>\n      <span class=\"bp-ui-checkbox__content\">\n        <span class=\"bp-ui-checkbox__header\">\n          <span class=\"bp-ui-checkbox__option-label\">Ocean View</span>\n        </span>\n      </span>\n    </label>\n    <label class=\"bp-ui-checkbox__option\">\n      <input class=\"bp-ui-checkbox__input\" type=\"checkbox\" value=\"garden\" />\n      <span class=\"bp-ui-checkbox__control\" aria-hidden=\"true\"></span>\n      <span class=\"bp-ui-checkbox__content\">\n        <span class=\"bp-ui-checkbox__header\">\n          <span class=\"bp-ui-checkbox__option-label\">Garden</span>\n        </span>\n      </span>\n    </label>\n  </div>\n</div>\n```\n\n### `bp-ui-checkbox` Alpine + Tailwind wrapper\n\n```html\n<script type=\"module\">\n  import '@braudypedrosa/bp-ui-components/styles';\n  import '@braudypedrosa/bp-ui-components';\n</script>\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n\n<div\n  class=\"rounded-[1.75rem] border border-slate-200 bg-white p-5 shadow-sm\"\n  x-data=\"window.bpUICheckbox()\"\n  x-init=\"init()\"\n>\n  <div class=\"bp-ui-checkbox\" data-name=\"amenities\" data-values=\"spa\">\n    <div class=\"bp-ui-checkbox__label\">Amenities</div>\n    <div class=\"bp-ui-checkbox__group\">\n      <label class=\"bp-ui-checkbox__option\">\n        <input class=\"bp-ui-checkbox__input\" type=\"checkbox\" value=\"pool\" />\n        <span class=\"bp-ui-checkbox__control\" aria-hidden=\"true\"></span>\n        <span class=\"bp-ui-checkbox__content\">\n          <span class=\"bp-ui-checkbox__header\">\n            <span class=\"bp-ui-checkbox__option-label\">Pool Access</span>\n          </span>\n        </span>\n      </label>\n      <label class=\"bp-ui-checkbox__option\">\n        <input class=\"bp-ui-checkbox__input\" type=\"checkbox\" value=\"spa\" checked />\n        <span class=\"bp-ui-checkbox__control\" aria-hidden=\"true\"></span>\n        <span class=\"bp-ui-checkbox__content\">\n          <span class=\"bp-ui-checkbox__header\">\n            <span class=\"bp-ui-checkbox__option-label\">Spa</span>\n          </span>\n        </span>\n      </label>\n    </div>\n  </div>\n</div>\n```\n\n## `bp-ui-select` Public Contract\n\n### Stable DOM interface\n\n- `.bp-ui-select`\n- `.bp-ui-select__label`\n- `.bp-ui-select__trigger`\n- `.bp-ui-select__trigger-value`\n- `.bp-ui-select__trigger-chevron`\n- `.bp-ui-select__input`\n- `.bp-ui-select__popover`\n- `.bp-ui-select__option`\n- `.bp-ui-select__option-label`\n- `.bp-ui-select__option-indicator`\n- `.bp-ui-select__hint`\n- `.bp-ui-select__status`\n\n### Runtime state classes\n\n- `.is-open`\n- `.is-disabled`\n- `.is-selected`\n- `.is-highlighted`\n\n### Data attributes\n\n- `data-bp-ui-select`\n- `data-value`\n- `data-placeholder`\n- `data-name`\n- `data-size`\n- `data-variant`\n- `data-disabled`\n\n### Vanilla events\n\n- `bp-ui:select:change`\n- `bp-ui:select:open`\n- `bp-ui:select:close`\n\n`bp-ui:select:change` detail shape:\n\n```js\n{\n  value,\n  previousValue,\n  label,\n  previousLabel,\n  trigger\n}\n```\n\n`trigger` is one of:\n\n- `'option'`\n- `'keyboard'`\n- `'api'`\n\n### Instance methods\n\n- `getValue()`\n- `setValue(value, trigger = 'api')`\n- `open()`\n- `close()`\n- `toggle()`\n- `enable()`\n- `disable()`\n- `destroy()`\n\n## `bp-ui-radio` Public Contract\n\n### Stable DOM interface\n\n- `.bp-ui-radio`\n- `.bp-ui-radio__label`\n- `.bp-ui-radio__group`\n- `.bp-ui-radio__option`\n- `.bp-ui-radio__input`\n- `.bp-ui-radio__control`\n- `.bp-ui-radio__content`\n- `.bp-ui-radio__option-label`\n- `.bp-ui-radio__sublabel`\n- `.bp-ui-radio__tag`\n- `.bp-ui-radio__hint`\n- `.bp-ui-radio__status`\n\n### Runtime state classes\n\n- `.is-selected`\n- `.is-disabled`\n\n### Data attributes\n\n- `data-bp-ui-radio`\n- `data-value`\n- `data-name`\n- `data-size`\n- `data-variant`\n- `data-disabled`\n\n### Vanilla events\n\n- `bp-ui:radio:change`\n\n`bp-ui:radio:change` detail shape:\n\n```js\n{\n  value,\n  previousValue,\n  trigger\n}\n```\n\n`trigger` is one of:\n\n- `'input'`\n- `'api'`\n\n### Instance methods\n\n- `getValue()`\n- `setValue(value, trigger = 'api')`\n- `enable()`\n- `disable()`\n- `destroy()`\n\n## Local Demos\n\n- [Counter demo](./samples/counter.html)\n- [Select demo](./samples/select.html)\n- [Radio demo](./samples/radio.html)\n- [Checkbox demo](./samples/checkbox.html)\n- [Original radio reference](./samples/references/radio-reference.html)\n\n## Development\n\n```bash\nnpm run test\nnpm run build\n```\n\n## Release Strategy\n\n`bp-ui-components` should be distributed through npm as the canonical install path.\n\nVersioning policy:\n\n- `0.1.0` is the initial public counter release.\n- additive component releases should move the minor version forward\n- patch releases stay within the current minor when fixing bugs or improving an already shipped widget without introducing a new component\n\nRelease gate for `1.0.0`:\n\n- do not ship `1.0.0` until the library has at least 8 stable widgets\n- each widget should follow the shared library pattern from [COMPONENT_STANDARD.md](./COMPONENT_STANDARD.md)\n","readmeFilename":"README.md"}