{"_id":"@dojo-ng/transition-group","name":"@dojo-ng/transition-group","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dojo-ng/transition-group","version":"0.1.0","license":"BSD-3-Clause","description":"Dojo NG transition-group web component (staggers slotted dj-transition children)","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/transition":"^0.1.0","lit":"^3.3.0"},"_id":"@dojo-ng/transition-group@0.1.0","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-70zUd0tSvLM+bnKdxntrUBjFrxRSf6by6yrwFuUfWcSqfEPq8DuBQMozi3+oaRJspqGAjWYrfBwUXIGnU019wg==","shasum":"90aed3a3ce44e33e4f21dfc79383636ba0d020d1","tarball":"https://registry.npmjs.org/@dojo-ng/transition-group/-/transition-group-0.1.0.tgz","fileCount":6,"unpackedSize":13164,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDeTIUn1DI9zBuWHGF+wrbcETnk7EwQG/Hrai+mh/M93AIgdi9TIRxIGq7QUVYU7WVHgm8I6gtMjTW3jL8m6FP6H3k="}]},"_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/transition-group_0.1.0_1788374442721_0.4486990992554001"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T18:40:42.413Z","0.1.0":"2026-09-02T18:40:42.913Z","modified":"2026-09-02T18:40:43.316Z"},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"description":"Dojo NG transition-group web component (staggers slotted dj-transition children)","license":"BSD-3-Clause","readme":"# @dojo-ng/transition-group\n\n`<dj-transition-group>` — Coordinates slotted `dj-transition` children, staggering their `show` toggles.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library built on Lit. BSD-3-Clause.\n\nCoordinates slotted `dj-transition` children, staggering their `show` toggles. When the group's `show` changes it drives each child's `show` in DOM order, child `i` after `i * stagger` ms, for both enter and leave. When every child has completed its phase it emits one group `dj-after-enter` (or `dj-after-leave`). v1 is stagger only: no FLIP/list-move animation and no `appear` forwarding (set `appear` on the children directly). Non-`dj-transition` slotted elements are ignored.\n\n> Coordinates slotted `dj-transition` children only (v1 is stagger, no list-move animation). The effects live on the children; the group just drives their `show` with a delay. Set `appear` on the children directly.\n\n## Install\n\n```bash\nnpm install @dojo-ng/transition-group\n```\n\n## Usage\n\nImport the package to register the custom element, then use the tag.\n\nWrap each item in a `dj-transition` and let the group drive them with a delay. The effect lives on the children; the group emits one `dj-after-enter` when all have finished.\n\n```html\n<style>\n  dj-transition[state=\"entering\"] { animation: fade-in 200ms both; }\n  @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }\n</style>\n<button id=\"reveal\">Reveal</button>\n<ul>\n  <dj-transition-group id=\"grp\" stagger=\"80\">\n    <dj-transition><li>One</li></dj-transition>\n    <dj-transition><li>Two</li></dj-transition>\n    <dj-transition><li>Three</li></dj-transition>\n  </dj-transition-group>\n</ul>\n<script type=\"module\">\n  import \"@dojo-ng/transition\"; import \"@dojo-ng/transition-group\";\n  const grp = document.getElementById(\"grp\");\n  document.getElementById(\"reveal\").addEventListener(\"click\", () => (grp.show = !grp.show));\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| `show` | show ↻ | `boolean` | `false` |\n| `stagger` | stagger | `number` | `0` |\n\n**Slots:** default\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-415e737c03bdefdc9b04e79d382bf813"}