{"_id":"@cujuju/solidjs-select-flyout","_rev":"4-d8f14517af2ced04d021bb738d5d4e79","name":"@cujuju/solidjs-select-flyout","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.0":{"name":"@cujuju/solidjs-select-flyout","version":"0.1.0","keywords":["solidjs","select","flyout","combobox","listbox","dropdown","accessible","glassmorphism"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-select-flyout@0.1.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/select-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"4e5754d2f14e3fca8906cfa79f0ca3d3a0c95d6b","tarball":"https://registry.npmjs.org/@cujuju/solidjs-select-flyout/-/solidjs-select-flyout-0.1.0.tgz","fileCount":12,"integrity":"sha512-t8vM0VAYnyjfuL8djwCWjNhZgqh6R42ce+nM6NRck4xgzCvVOfnBrF7cF0gaxOGz+hw617EcbycRcbd2x36DSA==","signatures":[{"sig":"MEUCIQCXfaHAhstxbtu3W28gTtVlcd631A8lWCxS8e3nv2hCTwIgaVoQSwqF32BW83gY0G3OmpzTuLPSZzInWa2Jla/OnXg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78261},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-select-flyout-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"solid":"./src/index.ts","types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/select-flyout.css"},"scripts":{"test":"vitest run","build":"vite build","test:watch":"vitest"},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"_resolved":"C:\\Users\\shawn\\AppData\\Local\\Temp\\43809a85a5233524a7d629e4ba87ae3e\\cujuju-solidjs-select-flyout-0.1.0.tgz","_integrity":"sha512-t8vM0VAYnyjfuL8djwCWjNhZgqh6R42ce+nM6NRck4xgzCvVOfnBrF7cF0gaxOGz+hw617EcbycRcbd2x36DSA==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/select-flyout"},"_npmVersion":"11.12.1","description":"Keyboard-accessible <select> replacement for SolidJS — roving focus, type-ahead, ARIA combobox/listbox, rendered through an anchored glass-menu panel so backdrop-filter actually applies.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.8.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.2.4","happy-dom":"^15.11.0","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-hooks":"2.0.0","@testing-library/jest-dom":"^6.9.1","@cujuju/solidjs-glass-menu":"0.1.0","@cujuju/solidjs-anchored-popover":"0.1.0"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-hooks":"2.0.0","@cujuju/solidjs-glass-menu":"0.1.0","@cujuju/solidjs-anchored-popover":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-select-flyout_0.1.0_1779136615996_0.16227360952836256","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@cujuju/solidjs-select-flyout","version":"0.1.1","keywords":["solidjs","select","flyout","combobox","listbox","dropdown","accessible","glassmorphism"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-select-flyout@0.1.1","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/select-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"2b6bce0dea13134474e0b859b762167618e6ddf9","tarball":"https://registry.npmjs.org/@cujuju/solidjs-select-flyout/-/solidjs-select-flyout-0.1.1.tgz","fileCount":12,"integrity":"sha512-oSXGJ8SI8/VO6x8RAkeFAWmzV9vnFXVX0QrtLjuaCopHJU+YHhVjpEOZphCWEizPSwzEtftEMCq3lj3I6NoEZg==","signatures":[{"sig":"MEUCIQDXDhh4X5bogMCuv9ApIxpdjdqrjU+DaknqXDZcaXRjPQIgZjXtry584RNG9TsMwBpj/AWLpc0jiVXQxzTYmdeRyq0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78261},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-select-flyout-0.1.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"solid":"./src/index.ts","types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/select-flyout.css"},"scripts":{"test":"vitest run","build":"vite build","test:watch":"vitest"},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"_resolved":"C:\\Users\\shawn\\AppData\\Local\\Temp\\808085b728760a6bac7acef5ae4e5e57\\cujuju-solidjs-select-flyout-0.1.1.tgz","_integrity":"sha512-oSXGJ8SI8/VO6x8RAkeFAWmzV9vnFXVX0QrtLjuaCopHJU+YHhVjpEOZphCWEizPSwzEtftEMCq3lj3I6NoEZg==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/select-flyout"},"_npmVersion":"11.12.1","description":"Keyboard-accessible <select> replacement for SolidJS — roving focus, type-ahead, ARIA combobox/listbox, rendered through an anchored glass-menu panel so backdrop-filter actually applies.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.8.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.2.4","happy-dom":"^15.11.0","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-hooks":"2.0.0","@testing-library/jest-dom":"^6.9.1","@cujuju/solidjs-glass-menu":"0.1.0","@cujuju/solidjs-anchored-popover":"0.1.0"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-hooks":"2.0.0","@cujuju/solidjs-glass-menu":"0.1.0","@cujuju/solidjs-anchored-popover":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-select-flyout_0.1.1_1779136735939_0.45521056681932714","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@cujuju/solidjs-select-flyout","version":"0.2.0","keywords":["solidjs","select","flyout","combobox","listbox","dropdown","accessible","glassmorphism"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-select-flyout@0.2.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/select-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"89c85a981d43d10c199d5c58e5553e438df84acf","tarball":"https://registry.npmjs.org/@cujuju/solidjs-select-flyout/-/solidjs-select-flyout-0.2.0.tgz","fileCount":12,"integrity":"sha512-4rYWTcBtTH8Buwb9d8NFkziNd4ChZssZ6VO27ghLmvSsV30Y/Kr/ILHAuTdv8UGcsNJ0to5NJyiaKhHwdvxu0Q==","signatures":[{"sig":"MEQCIATzNgLy1cR2+gvocq4grMNVM85SPkeHrq3cQxz6RRYYAiBvjjf9/LIfyR9LB2YaHksNmQVVfFrBny1y8Q5+aE7obQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":85955},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-select-flyout-0.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"solid":"./src/index.ts","types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/select-flyout.css"},"scripts":{"test":"vitest run","build":"vite build","test:watch":"vitest"},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"_resolved":"/tmp/110109cc3c67b409107c5ea745de9c81/cujuju-solidjs-select-flyout-0.2.0.tgz","_integrity":"sha512-4rYWTcBtTH8Buwb9d8NFkziNd4ChZssZ6VO27ghLmvSsV30Y/Kr/ILHAuTdv8UGcsNJ0to5NJyiaKhHwdvxu0Q==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/select-flyout"},"_npmVersion":"12.0.1","description":"Keyboard-accessible <select> replacement for SolidJS — roving focus, type-ahead, ARIA combobox/listbox, rendered through an anchored glass-menu panel so backdrop-filter actually applies.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.2.4","happy-dom":"^15.11.0","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-hooks":"2.0.0","@testing-library/jest-dom":"^6.9.1","@cujuju/solidjs-glass-menu":"0.2.0","@cujuju/solidjs-anchored-popover":"0.1.0"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-hooks":"2.0.0","@cujuju/solidjs-glass-menu":"0.2.0","@cujuju/solidjs-anchored-popover":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-select-flyout_0.2.0_1784887090119_0.8995245299959578","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@cujuju/solidjs-select-flyout","version":"0.2.1","description":"Keyboard-accessible <select> replacement for SolidJS — roving focus, type-ahead, ARIA combobox/listbox, rendered through an anchored glass-menu panel so backdrop-filter actually applies.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","solid":"./src/index.ts","import":"./dist/index.js"},"./styles.css":"./src/select-flyout.css"},"sideEffects":["**/*.css"],"license":"MIT","author":{"name":"Cujuju"},"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/select-flyout"},"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/select-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"keywords":["solidjs","select","flyout","combobox","listbox","dropdown","accessible","glassmorphism"],"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-anchored-popover":"^0.1.1","@cujuju/solidjs-glass-menu":"^0.2.1","@cujuju/solidjs-hooks":"^2.0.0"},"devDependencies":{"@testing-library/jest-dom":"^6.9.1","happy-dom":"^15.11.0","vite-plugin-solid":"^2.11.12","vitest":"^3.2.4","@cujuju/solidjs-hooks":"^2.0.0","@cujuju/solidjs-anchored-popover":"^0.1.1","@cujuju/solidjs-glass-menu":"^0.2.1"},"publishConfig":{"access":"public"},"scripts":{"test":"vitest run","test:watch":"vitest","build":"vite build"},"_id":"@cujuju/solidjs-select-flyout@0.2.1","_integrity":"sha512-wf7T7jwmo61VAjeaM/wjZR3V8wXsLIgCoGRGb0AKZRUUEvy375mF7DVG2csULcRUoARsvcX0IGHRsGTCcj0xvg==","_resolved":"/tmp/5ee647458cb8144f6030a938e5d542ff/cujuju-solidjs-select-flyout-0.2.1.tgz","_from":"file:cujuju-solidjs-select-flyout-0.2.1.tgz","_nodeVersion":"24.18.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-wf7T7jwmo61VAjeaM/wjZR3V8wXsLIgCoGRGb0AKZRUUEvy375mF7DVG2csULcRUoARsvcX0IGHRsGTCcj0xvg==","shasum":"63cb67f098a189659e5067885e00192d316a3e80","tarball":"https://registry.npmjs.org/@cujuju/solidjs-select-flyout/-/solidjs-select-flyout-0.2.1.tgz","fileCount":12,"unpackedSize":85961,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICNpgTWNzInmngyNOTeMfgUZ8sru1WPLbXkCXOXlY6PaAiB8xhePGdjxOlyEGvqIRlVnY5Nx95mM5tdz9Z3KURxuxw=="}]},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"directories":{},"maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/solidjs-select-flyout_0.2.1_1784888189265_0.8244895269627903"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-18T20:36:55.865Z","modified":"2026-07-24T10:16:29.560Z","0.1.0":"2026-05-18T20:36:56.159Z","0.1.1":"2026-05-18T20:38:56.087Z","0.2.0":"2026-07-24T09:58:10.246Z","0.2.1":"2026-07-24T10:16:29.397Z"},"bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"author":{"name":"Cujuju"},"license":"MIT","homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/select-flyout","keywords":["solidjs","select","flyout","combobox","listbox","dropdown","accessible","glassmorphism"],"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/select-flyout"},"description":"Keyboard-accessible <select> replacement for SolidJS — roving focus, type-ahead, ARIA combobox/listbox, rendered through an anchored glass-menu panel so backdrop-filter actually applies.","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"readme":"# @cujuju/solidjs-select-flyout\n\nA keyboard-accessible **`<select>` replacement** for SolidJS — roving\nfocus, type-ahead, and full ARIA `combobox` + `listbox` semantics. The\ndropdown is painted by the `.glass-menu` surface from\n[`@cujuju/solidjs-glass`](../glass) (via\n[`@cujuju/solidjs-glass-menu`](../glass-menu)) and positioned through\n[`@cujuju/solidjs-anchored-popover`](../anchored-popover).\n\nNative UA-rendered `<option>` lists cannot accept `backdrop-filter` or\nother modern CSS effects — the OS owns the popup chrome. `Flyout` is a\nfully author-rendered panel, so a glass-styled select is possible.\n\n`Flyout` is **controlled**: it owns no value state. Pass `value` +\n`onChange` and render it wherever a native single-choice `<select>`\nwould go.\n\n## Install\n\n```sh\npnpm add @cujuju/solidjs-select-flyout @cujuju/solidjs-anchored-popover @cujuju/solidjs-glass-menu @cujuju/solidjs-glass @cujuju/solidjs-hooks\n```\n\n`@cujuju/solidjs-anchored-popover`, `@cujuju/solidjs-glass-menu`, and\n`@cujuju/solidjs-hooks` are peer dependencies; `glass-menu` in turn\nneeds `@cujuju/solidjs-glass`. `solid-js >=1.7.0` is also a peer\ndependency.\n\n## Quick start\n\n```tsx\nimport { createSignal } from 'solid-js';\nimport { Flyout } from '@cujuju/solidjs-select-flyout';\n\nfunction Example() {\n  const [fruit, setFruit] = createSignal('apple');\n\n  return (\n    <Flyout\n      value={fruit()}\n      onChange={setFruit}\n      ariaLabel=\"Fruit\"\n      options={[\n        { value: 'apple', label: 'Apple' },\n        { value: 'banana', label: 'Banana' },\n        { value: 'cherry', label: 'Cherry', disabled: true },\n      ]}\n    />\n  );\n}\n```\n\n## Props — `FlyoutProps`\n\n| Prop | Type | Notes |\n|------|------|-------|\n| `options` | `FlyoutOption[]` | The selectable options — see [`FlyoutOption`](#flyoutoption). |\n| `value` | `string` | Currently selected option `value`. No match → the trigger shows `placeholder` (and a dev warning fires when `value` is non-empty). |\n| `onChange` | `(value: string) => void` | Called with the chosen option's `value`. |\n| `placeholder` | `string?` | Trigger text when `value` matches no option. |\n| `disabled` | `boolean?` | Disables the trigger; the panel never opens. |\n| `ariaLabel` | `string?` | Accessible name for the trigger (`combobox`) and the `listbox`. |\n| `class` | `string?` | Class applied to the trigger button — for width / margin. The trigger's own structural styles are emitted at single-class specificity, so author rules merge as expected. |\n| `id` | `string?` | Trigger element `id` — useful when an external `<label for=...>` points at it. |\n\n### `FlyoutOption`\n\n| Field | Type | Notes |\n|-------|------|-------|\n| `value` | `string` | Stable identity passed to `onChange`. |\n| `label` | `string` | Display text — also the type-ahead match target. |\n| `disabled` | `boolean?` | Not focusable, not selectable; skipped by arrow / Home / End navigation. |\n\n## Keyboard\n\n| Key | Closed trigger | Open panel |\n|-----|----------------|------------|\n| `Space` / `Enter` | open | select focused option |\n| `ArrowDown` / `ArrowUp` | open | move focus (wraps, skips disabled) |\n| `Home` / `End` | — | first / last enabled option |\n| `Escape` | — | close, restore focus to trigger |\n| `Tab` | — | close, restore focus, let Tab proceed |\n| printable char | — | type-ahead jump (500 ms idle buffer) |\n\n## What Flyout does NOT do\n\n- **Multi-select** — `value` is a single `string`. Fork if you need multi.\n- **Async / virtualized option lists** — the panel scrolls past ~10\n  rows; keep option counts modest, like a native select.\n- **Search / filter input** — use a chip-flyout or a bespoke combobox.\n- **Form association** — the trigger is a `<button type=\"button\">`\n  with no hidden input; the value lives only in the `value`/`onChange`\n  pair, not in `<form>` FormData.\n\n## Styling\n\n`Flyout` uses stable global classes, prefixed `cujuju-select-flyout-*`\n(`-trigger`, `-trigger-open`, `-chevron`, `-label`, `-placeholder`,\n`-panel`, `-list`, `-option`, `-option-selected`, `-option-focused`,\n`-check`).\n\nThe stylesheet registers itself as an import side effect — **when the\npackage is consumed from source** (the `solid` export condition). A\n**published `dist` build** extracts CSS to a separate file that the\nJS bundle does not reference; `dist` consumers must import it once:\n\n```ts\nimport '@cujuju/solidjs-select-flyout/styles.css';\n```\n\nThe `.glass-menu` surface is themed through `@cujuju/solidjs-glass`\n(see that package's menu-tint engine).\n\n### Host theme tokens\n\nThe trigger / panel reference these CSS custom properties — provide\nthem on a host ancestor (e.g. `:root`): `--height-btn`,\n`--color-border`, `--color-surface`, `--color-surface-hover`,\n`--color-text`, `--color-text-secondary`, `--color-primary`,\n`--color-primary-alpha-10`, `--radius-btn`, `--radius-sm`,\n`--font-size-sm`, `--z-flyout`.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}