{"_id":"@dojo-ng/popup","name":"@dojo-ng/popup","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dojo-ng/popup","version":"0.1.0","license":"BSD-3-Clause","description":"Dojo NG popup web component","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"dependencies":{"@dojo-ng/dojo-element":"^0.1.0","lit":"^3.3.0"},"_id":"@dojo-ng/popup@0.1.0","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-JCn73k1KPamUkiniDLRfrXaToJZfp4RpJ26bf4rhb3T7Ss73mYakLMQHO4mX1wt/nE279zUG8gHEUuwI4i1+Vw==","shasum":"64d138af0c85dac1d362220efc084f640ca559f6","tarball":"https://registry.npmjs.org/@dojo-ng/popup/-/popup-0.1.0.tgz","fileCount":8,"unpackedSize":20689,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFKWSjEorDUXyGqvC++Ivt+MHLrxc3FjU5j5BvK6bi9AAiEAyj6TByowqvyflQCaFFhFhbTCBQIh8Y5TFbOslh55Yas="}]},"_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"directories":{},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/popup_0.1.0_1788374433389_0.5729256681876447"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T18:40:33.157Z","0.1.0":"2026-09-02T18:40:33.536Z","modified":"2026-09-02T18:40:33.878Z"},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"description":"Dojo NG popup web component","license":"BSD-3-Clause","readme":"# @dojo-ng/popup\n\n`<dj-popup>` — Positions slotted content as an overlay, flipping to the opposite side when there isn't room in the preferred position.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library built on Lit. BSD-3-Clause.\n\nPositions slotted content as an overlay, flipping to the opposite side when there isn't room in the preferred position. Anchor it by setting the `anchor` property to an element, or supply viewport coordinates via the `x-*`/`y-*` attributes. While open it locks body scroll and closes on Escape or underlay click, emitting a `dj-close` event. Content goes in the default slot.\n\n## Install\n\n```bash\nnpm install @dojo-ng/popup\n```\n\n## Usage\n\nImport the package to register the custom element, then use the tag.\n\nA low-level primitive; most apps use it through `trigger-popup`, `select`, and similar. Set `anchor` in JS and toggle `open`.\n\n```html\n<dj-button id=\"anchor\">Anchor</dj-button>\n<dj-popup id=\"pop\" position=\"below\">Floating content</dj-popup>\n<script type=\"module\">\n  import \"@dojo-ng/popup\"; import \"@dojo-ng/button\";\n  const pop = document.getElementById(\"pop\");\n  pop.anchor = document.getElementById(\"anchor\");\n  document.getElementById(\"anchor\").addEventListener(\"click\", () => (pop.open = !pop.open));\n</script>\n```\n\n## Properties\n\n`↻` marks an attribute reflected to the DOM; a dash means the property is set in JavaScript only.\n\n| Property | Attribute | Type | Default |\n|---|---|---|---|\n| `open` | open ↻ | `boolean` | `false` |\n| `position` | position ↻ | `PopupPosition` | `\"below\"` |\n| `underlayVisible` | underlay-visible ↻ | `boolean` | `false` |\n| `scrollLock` | scroll-lock | `boolean` | `true` |\n| `yTop` | y-top | `number` | `0` |\n| `yBottom` | y-bottom | `number` | `0` |\n| `xLeft` | x-left | `number` | `0` |\n| `xRight` | x-right | `number` | `0` |\n\n**Slots:** default\n\n**Parts:** `underlay`, `wrapper`, `layer`\n\n**Events:** `dj-close`\n\n**Methods:** `close()` (Close the popup and emit `dj-close`.)\n\n**CSS properties:** `--dj-popup-z-index` (default `901`; Stacking order of the popup.), `--dj-popup-underlay-z-index` (default `900`; Stacking order of the popup underlay.)\n\n## Theming\n\nStyled with Dojo NG `--dj-*` design tokens and exposes `::part()` hooks for targeted overrides.\n\n## Accessibility and i18n\n\nFollows the project's WCAG 2.2 AA and localization conventions.\n\n## More\n\nLive, interactive examples are in the playground (`playground/index.html`). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).\n","readmeFilename":"README.md","_rev":"1-4d1e7873985b148aee931fdbbd6ab776"}