feat(pie-toast-provider): DSW-2949 implement zIndex into toast provider

[thejfreitas]

• Adds a z-index CSS property to allow users to control the stacking order of the toast component.

Author Checklist (complete before requesting a review, do not delete any)

• I have performed a self-review of my code.
• I have added thorough tests where applicable (unit / component / visual).
• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have reviewed visual test updates properly before approving.
• If changes will affect consumers of the package, I have created a changeset entry.
• If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.
• I have filled out the DS Review Tracker checklist (Moving PR to "Ready to Review")

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

---

Testing

How do I test my changes?

Task	Link
Aperture PR	🔗
NextJS 14 deployment	🔗
Nuxt 3 deployment	🔗
Vanilla deployment	🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1 @fernandofranca

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• N/A If there are visual test updates, I have reviewed them.

Reviewer 2 - @jamieomaguire

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9fd611a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@justeattakeaway/pie-toast-provider	Minor
pie-storybook	Minor
pie-docs	Minor
@justeattakeaway/pie-webc	Patch
wc-nuxt2	Patch
wc-react17	Patch
wc-react18	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[fernandofranca]

Good stuff! 🔥🔥🔥

[jamieomaguire]

@thejfreitas I understand your reasoning but I personally feel that a property is overkill even if it is just 10 lines. I think the CSS variable pattern is the most browser-friendly approach as documented by Carbon - I don't think it would be difficult to clearly document what CSS variables can be exposed for overriding by consumers.

Furthermore, doing it here would help us define a pattern to use in other components going forward. For every property we add, its not just about the lines of code but the reactivity and obseriving of a property for changes at runtime.

I am not very familiar with Styled components, but the CSS variable does not necessarily have to be defined in a style attribute on the component. Is there truly no way in Styled components to define arbitrary CSS rules?

Happy to chat offline if easier!

[raoufswe]

/test-aperture

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@raoufswe Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-toast-provider@0.0.0-snapshot-release-20250423095841 --mode=update-lockfile

yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20250423095841 --mode=update-lockfile

Then finally:

yarn install