{"_id":"@cujuju/solidjs-glass-menu","_rev":"3-30b4372cf783bf59ca52822ad628dbe2","name":"@cujuju/solidjs-glass-menu","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.0":{"name":"@cujuju/solidjs-glass-menu","version":"0.1.0","keywords":["solidjs","menu","popover","flyout","glassmorphism","glass"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-glass-menu@0.1.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/glass-menu","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"9940deadda985ba095fa48a76b292dad04f0f12a","tarball":"https://registry.npmjs.org/@cujuju/solidjs-glass-menu/-/solidjs-glass-menu-0.1.0.tgz","fileCount":12,"integrity":"sha512-RYX7WT+krAOjui3sZOEOV4OR8ff+4YZLAZ7PJVyTnvpW5PbDEyTA//hGORdpyPzAnKBVxrCRLTAaB8OIo9aWjw==","signatures":[{"sig":"MEUCIQDfZFeFi+HYfpdwjBW8isGIiQtws0pRIUyWYhUlRL+1yQIgXxMrAcCDh3RuGPFUvQUmvpXo4z7cMcg1uASziQenzik=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43430},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-glass-menu-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/glass-menu.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\\a761138e1eb560a28b7f55bc078af359\\cujuju-solidjs-glass-menu-0.1.0.tgz","_integrity":"sha512-RYX7WT+krAOjui3sZOEOV4OR8ff+4YZLAZ7PJVyTnvpW5PbDEyTA//hGORdpyPzAnKBVxrCRLTAaB8OIo9aWjw==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/glass-menu"},"_npmVersion":"11.12.1","description":"Glass-surfaced menu shell for SolidJS — a header (title + action slot + close button) over a scrollable body, styled with the .glass-menu surface.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.8.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^3.2.4","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-glass":"0.1.0","@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-glass":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-glass-menu_0.1.0_1779002507125_0.2901827331849365","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@cujuju/solidjs-glass-menu","version":"0.2.0","keywords":["solidjs","menu","popover","flyout","glassmorphism","glass"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-glass-menu@0.2.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/glass-menu","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"0069723ef95e99e7828c5d9291fc2ef311dd2b42","tarball":"https://registry.npmjs.org/@cujuju/solidjs-glass-menu/-/solidjs-glass-menu-0.2.0.tgz","fileCount":12,"integrity":"sha512-wjTLyHvT0QMXzULHH5U2M5rg5+g8JeBZDdhjabhXdekpNv+DdtEs36uITsOdPanG8zACcRlbK8MR5/C3BOjBOA==","signatures":[{"sig":"MEUCIQCP9XZcMOSqwL3k6dQ7l/R0Jg7nmY/S0Exh4avom/J3wwIgOCV58YSlN9JXgxbCOUqi7pzWkx9yF3I0cdYuu31q0AY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46158},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-glass-menu-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/glass-menu.css"},"scripts":{"test":"vitest run","build":"vite build","test:watch":"vitest"},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"_resolved":"/tmp/0d9841d98ff1764632673cf2bc01aeef/cujuju-solidjs-glass-menu-0.2.0.tgz","_integrity":"sha512-wjTLyHvT0QMXzULHH5U2M5rg5+g8JeBZDdhjabhXdekpNv+DdtEs36uITsOdPanG8zACcRlbK8MR5/C3BOjBOA==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/glass-menu"},"_npmVersion":"12.0.1","description":"Glass-surfaced menu shell for SolidJS — a header (title + action slot + close button) over a scrollable body, styled with the .glass-menu surface.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^3.2.4","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-glass":"0.1.0","@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-glass":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-glass-menu_0.2.0_1784887083557_0.028612486654819635","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@cujuju/solidjs-glass-menu","version":"0.2.1","description":"Glass-surfaced menu shell for SolidJS — a header (title + action slot + close button) over a scrollable body, styled with the .glass-menu surface.","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/glass-menu.css"},"sideEffects":["**/*.css"],"license":"MIT","author":{"name":"Cujuju"},"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/glass-menu"},"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/glass-menu","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"keywords":["solidjs","menu","popover","flyout","glassmorphism","glass"],"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-glass":"^0.1.0"},"devDependencies":{"@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1","jsdom":"^24.0.0","vite-plugin-solid":"^2.11.12","vitest":"^3.2.4","@cujuju/solidjs-glass":"^0.1.0"},"publishConfig":{"access":"public"},"scripts":{"test":"vitest run","test:watch":"vitest","build":"vite build"},"_id":"@cujuju/solidjs-glass-menu@0.2.1","_integrity":"sha512-I/Yj9u3oxJvzZJy77tE3Pun0c0kJsN0dLOiBrCwTmwLw/JHKQ0HpB4c1iS2Ls0Pj7tbR7R9SvP3pnVRyXslo0w==","_resolved":"/tmp/007a237c37ea2ca73a918e181249080b/cujuju-solidjs-glass-menu-0.2.1.tgz","_from":"file:cujuju-solidjs-glass-menu-0.2.1.tgz","_nodeVersion":"24.18.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-I/Yj9u3oxJvzZJy77tE3Pun0c0kJsN0dLOiBrCwTmwLw/JHKQ0HpB4c1iS2Ls0Pj7tbR7R9SvP3pnVRyXslo0w==","shasum":"294a9a6976093fbccc7b0625d08a361bbc93ed6b","tarball":"https://registry.npmjs.org/@cujuju/solidjs-glass-menu/-/solidjs-glass-menu-0.2.1.tgz","fileCount":12,"unpackedSize":46160,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHZowlb+uRaoee09m1v4IBIDIas1Y/wDkxTSCn8RRU0KAiAFAWqt62a+hOZmjee8RP9us9as35KPdsgVg1ECmbfM/Q=="}]},"_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-glass-menu_0.2.1_1784888181156_0.7936202331306277"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-17T07:21:47.030Z","modified":"2026-07-24T10:16:21.468Z","0.1.0":"2026-05-17T07:21:47.264Z","0.2.0":"2026-07-24T09:58:03.698Z","0.2.1":"2026-07-24T10:16:21.280Z"},"bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"author":{"name":"Cujuju"},"license":"MIT","homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/glass-menu","keywords":["solidjs","menu","popover","flyout","glassmorphism","glass"],"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/glass-menu"},"description":"Glass-surfaced menu shell for SolidJS — a header (title + action slot + close button) over a scrollable body, styled with the .glass-menu surface.","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"readme":"# @cujuju/solidjs-glass-menu\n\nA glass-surfaced **menu shell** for SolidJS: an optional header (title +\noptional action slot + optional close button) above a scrollable body,\npainted with the `.glass-menu` surface from\n[`@cujuju/solidjs-glass`](../glass).\n\n`GlassMenu` is **purely presentational**. It paints chrome and nothing\nelse — it owns no positioning, no `Portal`, no open/close state, and no\ndismiss lifecycle. Whatever renders a `GlassMenu` is responsible for\nplacing it, showing/hiding it, and dismissing it. This is deliberate:\nthe same shell backs titled dialogs, dropdown option lists, context\nmenus, and bare information panels, and each of those wants different\npositioning and dismiss behaviour.\n\nBecause the root element itself carries the `.glass-menu` surface\nclass, **the caller can make `GlassMenu` the positioned element\ndirectly** — no extra wrapper box between the popover and the glass.\n\n## Install\n\n```sh\npnpm add @cujuju/solidjs-glass-menu @cujuju/solidjs-glass\n```\n\n`@cujuju/solidjs-glass` is a peer dependency — `GlassMenu` pulls the\n`.glass-menu` surface and glass tokens from it. `solid-js >=1.7.0` is\nalso a peer dependency.\n\n## Quick start\n\n```tsx\nimport { GlassMenu } from '@cujuju/solidjs-glass-menu';\n\nClear}\n onClose={() => setOpen(false)}\n>\n \n;\n```\n\nStylesheets register themselves on import — there is nothing to import\nmanually (see [Styling](#styling)).\n\n## Anatomy\n\n`GlassMenu` renders this DOM. The class names are stable and global\n(plain prefixed classes, not CSS-Module-hashed) so a host can target\nthem from its own stylesheet:\n\n```\n
\n ├─
← only when the header is shown\n │ ├─
{title}
\n │ └─
\n │ ├─ {headerAction}\n │ └─ ← only when onClose is set\n │\n └─
{children}
\n
\n```\n\n| Class | Element | Notes |\n|-------|---------|-------|\n| `glass-menu` | root | The surface treatment (tint / blur / border / shadow / menu-scoped token rebinds) — from `@cujuju/solidjs-glass`. |\n| `cujuju-glass-menu` | root | Layout: `display: flex; flex-direction: column; border-radius; overflow: hidden`. |\n| `cujuju-glass-menu--overflow-visible` | root | Added when `overflow=\"visible\"` — flips the root to `overflow: visible`. |\n| `cujuju-glass-menu-header` | header row | `display: flex`, space-between, padded `10px 14px`, hairline `border-bottom`. Rendered **only** when a header is shown. |\n| `cujuju-glass-menu-header--flush` | header row | Added when `headerDivider={false}` — removes the `border-bottom`. |\n| `cujuju-glass-menu-title` | header left | `flex: 1; min-width: 0` so long titles truncate. Always a `
` (block content allowed). |\n| `cujuju-glass-menu-header-actions` | header right | Holds `headerAction` then the close button. Always rendered (keeps the cluster right-aligned even with no title). |\n| `cujuju-glass-menu-close` | close button | 22×22 button, `aria-label=\"Close\"`. Rendered **only** when `onClose` is set. |\n| `cujuju-glass-menu-body` | body | `flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto`. **No padding** — see [The body is unpadded](#the-body-is-unpadded). |\n\n### When is the header rendered?\n\nThe header row renders when **at least one** of `title`, `headerAction`,\nor `onClose` is supplied. If all three are omitted, no header element is\nemitted at all and `GlassMenu` is a bare glass surface wrapping\n`children` — see the [headerless recipe](#headless-surface-option-list--context-menu--info-panel).\n\n## Props\n\n`GlassMenuProps` extends `JSX.HTMLAttributes` **minus\n`title`** (the HTML `title` string attribute is repurposed as header\ncontent). Every attribute not in the table below — `ref`, `style`,\n`class`, `id`, `role`, `aria-*`, `data-*`, event handlers, and the\n`popover` attribute via `ref` — is spread onto the root element.\n\n| Prop | Type | Default | Notes |\n|------|------|---------|-------|\n| `title` | `JSX.Element?` | — | Header content, left side. A string or any node. Omit `title` + `headerAction` + `onClose` together to drop the header row entirely. |\n| `headerAction` | `JSX.Element?` | — | Node rendered in the header between the title and the close button — e.g. a \"Clear\" action. |\n| `onClose` | `() => void`? | — | Close-button handler. The close button renders **only** when this is provided. `GlassMenu` does not close itself — this is a callback into caller-owned state. |\n| `headerDivider` | `boolean?` | `true` | Hairline `border-bottom` under the header. Pass `false` for a flush header (e.g. an option list where a header-to-body rule reads as clutter). |\n| `overflow` | `'hidden' \\| 'visible'`? | `'hidden'` | Root `overflow`. `'hidden'` clips edge-to-edge body content (full-width row hovers, etc.) to the rounded corners. `'visible'` is for a menu whose children must paint past the surface edge — a context menu with non-Portal'd submenus, or one relying on a drop shadow rendering outside the box. |\n| `children` | `JSX.Element?` | — | Body content. Rendered inside `.cujuju-glass-menu-body`. |\n| `ref` | `HTMLDivElement \\| (el) => void` | — | Forwarded to the root. Use it to measure the surface, or to set the `popover` attribute (see [recipe](#as-the-positioned-popover-element)). |\n| ...rest | `JSX.HTMLAttributes` | — | `style`, `class`, `role`, `aria-*`, `data-*`, handlers — all forwarded to the root. A caller `class` is appended after the package classes, so it wins specificity ties. |\n\n## Recipes\n\n### Titled panel\n\nThe full shell: header with a title, an action slot, and a close\nbutton, above a scrollable body.\n\n```tsx\nCancel all}\n onClose={() => setOpen(false)}\n>\n \n\n```\n\n### Headerless surface (option list / context menu / info panel)\n\nOmit `title`, `headerAction`, and `onClose` — no header is rendered and\n`GlassMenu` is a bare glass container. This is the right shape for a\ndropdown option list, a context menu, or a **purely visual information\npanel**.\n\n```tsx\n// Option list\n\n \n\n// Purely visual info panel — no menu/listbox semantics\n\n \n\n```\n\nFor a non-interactive panel use `role=\"region\"` (or `role=\"note\"`) with\nan `aria-label` — do **not** reach for a menu/listbox role, which would\nannounce interactive semantics the panel does not have.\n\n### As the positioned popover element\n\n`GlassMenu` owns no positioning, so the caller positions the root.\nBecause the root carries the surface class, there is no wrapper to\nposition separately. The HTML Popover API (`popover=\"manual\"`) promotes\nthe menu into the browser's top layer so it paints above every normal\nstacking context:\n\n```tsx\nlet panelEl: HTMLDivElement | undefined;\n\n {\n panelEl = el;\n // Solid's JSX types don't yet include the `popover` global\n // attribute — set it via the ref. Manual mode: the UA does NOT\n // light-dismiss; the caller owns dismiss.\n el.setAttribute('popover', 'manual');\n }}\n style={{\n position: 'fixed',\n top: `${y}px`,\n left: `${x}px`,\n // Neutralize UA [popover] defaults: `inset: 0; margin: auto`\n // would otherwise center an unsized popover.\n right: 'auto',\n bottom: 'auto',\n margin: '0',\n }}\n role=\"dialog\"\n aria-modal=\"false\"\n aria-label=\"Filter dialog\"\n title=\"Filters\"\n onClose={close}\n>\n …\n;\n```\n\nDo **not** set `border: 0` (or override `background` / `border-radius`)\ninline to neutralize UA `[popover]` styling — the `.glass-menu` surface\nrule already wins that cascade and supplies the correct chrome. An\ninline override would erase it.\n\nFor a placement engine (anchoring to a trigger, viewport clamping,\noutside-click + Escape dismiss) compose\n[`@cujuju/solidjs-anchored-popover`](../anchored-popover) **around**\n`GlassMenu`: the popover owns placement + dismiss, `GlassMenu` owns the\nsurface.\n\n### Scrollable body with a constrained height\n\nThe body scrolls only when the root's height is constrained. Give the\nroot a `max-height` (or a fixed `height`) and the body's `overflow-y:\nauto` engages — the header stays pinned, the body scrolls.\n\n```tsx\n\n \n\n```\n\n### Block-content title\n\n`title` renders inside a `
`, so it accepts block content — e.g. a\nstacked stats cluster, not just a string.\n\n```tsx\n\n 3 active\n ETA 2m\n
\n }\n onClose={close}\n>\n …\n\n```\n\n### Internal scroll region with a pinned footer\n\nThe body is itself a flex column, so a child can take `flex: 1` to\nbecome the scroll region while a sibling stays pinned.\n\n```tsx\n\n
\n \n
\n
{count()} results
\n\n```\n\n### Edge-escaping children — `overflow=\"visible\"`\n\nBy default the root clips to its rounded corners. A context menu whose\nsubmenus are **not** Portal'd, or one relying on a drop shadow painting\noutside the box, needs the surface to not clip:\n\n```tsx\n\n \n\n```\n\nNote: an element's **own** box-shadow is not clipped by its `overflow`,\nso a menu does not need `overflow=\"visible\"` merely to cast its shadow.\nUse it when *descendant* content must paint past the edge.\n\n## The body is unpadded\n\n`.cujuju-glass-menu-body` has **no padding** and **no `gap`** — a padded\ntitled panel and an edge-to-edge option list (whose row hovers must\nreach the corners) want opposite insets, so the caller owns spacing.\nTwo ways to supply it:\n\n**1. A body wrapper (preferred — no coupling to internal class names):**\n\n```tsx\n\n
{/* sections */}
\n\n```\n\n```css\n.body { display: flex; flex-direction: column; gap: 12px; padding: 12px; }\n```\n\n**2. Target the body class** from a stylesheet scoped to the root. The\nbody class is stable and prefixed, but this couples your CSS to\n`GlassMenu`'s internal structure:\n\n```css\n.panel :global(.cujuju-glass-menu-body) { padding: 8px; gap: 4px; }\n```\n\n## What GlassMenu does NOT do\n\nIt is presentational only. Each of these is the **caller's**\nresponsibility:\n\n- **Positioning** — `GlassMenu` does not place itself. Set `position` /\n `top` / `left` (or compose `@cujuju/solidjs-anchored-popover`).\n- **Portal** — it renders inline. Wrap it in a `` if it must\n escape an `overflow`/`transform`/`backdrop-filter` ancestor.\n- **Open / close state** — there is no `open` prop. `Show`-gate it, or\n toggle the `popover` attribute / `showPopover()` yourself.\n- **Dismiss** — outside-click, Escape, scroll/resize dismiss all belong\n to the caller. `onClose` is only the close-button's click handler.\n- **ARIA role** — the root has no implicit `role`. Pass `role` +\n `aria-*` appropriate to the use (`dialog`, `listbox`, `menu`,\n `region`, …).\n- **Focus management** — focus trap, restore-on-close, roving focus are\n all caller-owned.\n\n## Accessibility\n\n- The close button is a real `