{"_id":"@dojo-ng/slide-pane","_rev":"2-6e9b0150fb1ac41c584f76711669ed4f","name":"@dojo-ng/slide-pane","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@dojo-ng/slide-pane","version":"0.1.0","license":"BSD-3-Clause","_id":"@dojo-ng/slide-pane@0.1.0","maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"dist":{"shasum":"f4e41adfa720f68bca789510b4f880fc2e4eeb83","tarball":"https://registry.npmjs.org/@dojo-ng/slide-pane/-/slide-pane-0.1.0.tgz","fileCount":8,"integrity":"sha512-NNGPlei6lv3/0NwffxqmwmOCizs42DLRB1TngKeE1fcbtN9OwMc2VHjeJqPHm+/DLGBNtvms3uLs6KkV/P3bYA==","signatures":[{"sig":"MEUCIQDNwlOk29OazGGgnfmQyBRt0eRE04b+GPCcOxwED9xIaAIgajus8QNlHEYZB1lyz6Zd/v98T+1ow8oyhxvPKyJ9ieI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13358},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"_npmVersion":"10.9.8","description":"Dojo NG slide-pane web component","directories":{},"_nodeVersion":"22.23.1","dependencies":{"lit":"^3.3.0","@dojo-ng/i18n":"^0.1.0","@dojo-ng/icon":"^0.1.0","@dojo-ng/dojo-element":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slide-pane_0.1.0_1788374438484_0.6186970265524425","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@dojo-ng/slide-pane","version":"0.1.1","license":"BSD-3-Clause","description":"Dojo NG slide-pane 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","@dojo-ng/i18n":"^0.1.0","@dojo-ng/icon":"^0.1.0","lit":"^3.3.0"},"_id":"@dojo-ng/slide-pane@0.1.1","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-1Sf0YwgKrFyds7nF60odVzMYOyjJkx3MFKkYMde9MgmNYl5VBcSFKJmQg+gUMUbmq+bkI9WaYjwxkg3IAg70/g==","shasum":"1f7f91da921885e22da24c5787b410427acab321","tarball":"https://registry.npmjs.org/@dojo-ng/slide-pane/-/slide-pane-0.1.1.tgz","fileCount":8,"unpackedSize":13145,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDEWThCQwr0692HLQo1IV8t0uPAP4zTFV7tvVrMAhojNAiEAg5ZKlTy66E9tZuWoOIRCOdFt4qsie1BnHsceWiL9cCM="}]},"_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/slide-pane_0.1.1_1788903001724_0.10016903912359054"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T18:40:38.279Z","modified":"2026-09-08T21:30:02.075Z","0.1.0":"2026-09-02T18:40:38.619Z","0.1.1":"2026-09-08T21:30:01.877Z"},"license":"BSD-3-Clause","description":"Dojo NG slide-pane web component","maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"readme":"# @dojo-ng/slide-pane\n\n`<dj-slide-pane>` — A panel that slides in from an edge.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library built on Lit. BSD-3-Clause.\n\nA panel that slides in from an edge. Slots: `title`, default (content). Closes on Escape, the close button, and underlay click. Locks body scroll while open. Emits `dj-close`. Width/height comes from `width` (px). Parts: `underlay`, `pane`, `title`, `close`, `content`.\n\n## Install\n\n```bash\nnpm install @dojo-ng/slide-pane\n```\n\n## Usage\n\nImport the package to register the custom element, then use the tag.\n\nSlides in from `align`; toggle `open`.\n\n```html\n<dj-button id=\"open-pane\">Open pane</dj-button>\n<dj-slide-pane id=\"pane\" align=\"right\">\n  <span slot=\"title\">Filters</span>\n  Panel content here.\n</dj-slide-pane>\n<script type=\"module\">\n  import \"@dojo-ng/slide-pane\"; import \"@dojo-ng/button\";\n  document.getElementById(\"open-pane\").addEventListener(\"click\", () => (document.getElementById(\"pane\").open = true));\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| `align` | align ↻ | `SlidePaneAlign` | `\"left\"` |\n| `width` | width | `number` | `320` |\n| `underlay` | underlay | `boolean` | `true` |\n| `closeText` | close-text | `string` | — |\n\n**Slots:** `title`, default (content)\n\n**Parts:** `underlay`, `pane`, `title`, `close`, `content`\n\n**Events:** `dj-close`\n\n**Methods:** `close()`\n\n**CSS properties:** `--dj-slide-pane-size` (default `320px`; Width (left/right) or height (top/bottom) of the pane.), `--dj-slide-pane-z-index` (default `931`; Stacking order of the pane.), `--dj-slide-pane-underlay-z-index` (default `930`; Stacking order of the pane underlay (scrim).)\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 at [play.dojo-ng.com](https://play.dojo-ng.com). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).\n","readmeFilename":"README.md"}